Custom Code
Inject custom HTML and CSS into the client panel header and footer, control sidebar branding, and preview changes from the admin Settings page.
What the Custom Code page does
The Custom Code page lets you inject your own HTML and CSS into the client panel without touching any core files. It gives you two injection slots — a Custom Header that renders above the main content area and a Custom Footer that renders below it on every client panel page — plus a small set of Sidebar Branding switches that control the built-in logo, the login-page header, and the “Powered by” badge.
How to reach it
Open the admin panel and go to Settings. In the settings menu, find the Appearance group and click Custom Code. It sits alongside Themes and Icons in the same group.
Sidebar Branding toggles
The first card, Sidebar Branding, holds three switches that affect how your branding appears in the client panel.
- Show sidebar logo
- Displays the company logo and name at the top of the client panel sidebar. Turn it off if your custom header already provides the branding and you want a cleaner sidebar. On by default.
- Hide platform header on login page
- Removes the built-in logo/name header from the login screen. This is useful when a custom header already contains your branding, so you do not show two logos. Off by default.
- Show “Powered by FluxBilling”
- Controls whether the “Powered by” badge appears in the sidebar and footer. This switch is only editable when the white-label add-on is active on your plan. When it is not available, the toggle is greyed out and shows a White Label badge with the note “Purchase the white-label add-on to control this setting.” On by default.
Editing the header and footer
Below the branding card you will find two near-identical cards: Custom Header and Custom Footer. Each contains an enable toggle, a dark code editor, a size indicator, and a preview button. The workflow for either slot is the same:
- Switch on the Enable custom header (or Enable custom footer) toggle on the card. When it is off, your code is kept but not shown to customers, so you can prepare markup before going live.
- Type or paste your HTML into the dark code editor. It shows line numbers and wraps long lines so your markup stays readable.
- Watch the size indicator at the top-right of the card — it shows the current content size against the 64 KB budget for that slot (for example,
1.2 KB / 64 KB). Keep large assets external rather than inlining them. - Click the eye icon at the top-right of the card to Show preview. A sandboxed render of your current markup appears directly beneath the editor. Click it again to hide the preview.
- When you are happy, click Save Changes at the top-right of the page. Nothing you typed takes effect on the live client panel until you save.
The header renders above the main content area on all client panel pages, and the footer renders below it. Both apply consistently across the customer-facing panel, so they are ideal for a persistent announcement bar, a secondary navigation strip, compliance links, or a branded footer.
Field and control reference
| Control | Where | What it does |
|---|---|---|
| Show sidebar logo | Sidebar Branding | Shows or hides the company logo and name at the top of the client sidebar. |
| Hide platform header on login page | Sidebar Branding | Removes the built-in logo/name header from the login screen. |
| Show “Powered by FluxBilling” | Sidebar Branding | Shows or hides the “Powered by” badge in the sidebar and footer. Requires the white-label add-on to change. |
| Enable custom header | Custom Header card | Turns header injection on or off without clearing your saved code. |
| Enable custom footer | Custom Footer card | Turns footer injection on or off without clearing your saved code. |
| Code editor | Both cards | Where you write the HTML/CSS for that slot, with line numbers and word wrap. |
| Size indicator | Both cards | Shows current content size against the 64 KB budget for that slot. |
| Preview (eye icon) | Both cards | Toggles an inline, sandboxed render of the current slot content. |
| Save Changes | Page header | Commits both slots and all branding toggles. Required for anything to apply. |
What HTML and CSS is allowed
The help panel at the bottom of the page lists what you can use. Stick to layout-oriented tags — the following are accepted:
div, p, span, a, img, h1-h6, ul, ol, li, table, header, footer, nav, button, style
To add styling, wrap your CSS in <style>...</style> tags inside the same slot. Inline style attributes and data-* attributes are also allowed on elements. Three CDN libraries are supported and compiled for you automatically so they render instantly: Tailwind CSS, Lucide icons, and Google Fonts.
Security note. For safety, inline JavaScript, form tags, iframes, and event handlers are automatically stripped from your code — only external HTTPS
scriptandlinktags are preserved (for font loading). This keeps the injection surface narrow and prevents cross-site scripting, so you cannot use the header or footer to run scripts or embed third-party forms.
Tips and gotchas
- Save before you leave. Typing in the editor or flipping a toggle changes nothing on the live panel until you click Save Changes. After a successful save you will see a confirmation that the custom code was saved and compiled.
- Keep assets external. The 64 KB budget per slot is generous for a banner, navigation strip, or footer, but it is not the place for large inline SVGs or base64 images. Host those on your own server and reference them by URL.
- Use the preview while editing. The inline preview renders in an isolated frame, so it is the quickest way to confirm spacing and styling before you publish to customers.
- Disable instead of delete. If a header or footer is causing a layout problem, just turn off its enable toggle and save — your markup is preserved for when you want to bring it back.
- White-label control. The “Powered by” toggle only becomes editable with the white-label add-on. On plans without it, the switch stays disabled and the badge remains visible.