The Custom Code page allows portal administrators to inject site-wide HTML, CSS, and JavaScript into every page of their portal — either in the page header or the page footer.
This feature exists to support integrations and customisations that fall outside the platform's built-in configuration options, such as analytics tracking, consent management, and third-party scripts.
This article covers the following topics:
2. Understand, create and manage your custom codes
2.1 Accessing the Custom Code Page
2.2 Admin Responsibility & Platform Behaviour
1. Pre-Requisites
Before using the Custom Code page, the following areas of the platform must be configured or understood. These areas directly interact with the custom code feature.
| Area | Why It Matters |
| Portal Creation | The Custom Code page is scoped to a specific portal by its Portal ID. The portal must exist and be accessible before you can configure custom code for it. |
| Portal Dashboard Side Menu | The Custom Code page is accessed via the Portal Dashboard Side Menu. You must have access to the dashboard to navigate to it. |
| Publishing Flow | Saved custom code applies immediately to the staging environment, but only appears on Live Environment after the site is published. If your Live site has not been published since saving, your custom code will be stored but not active on Live Environment. |
2. Understand, create and manage your custom codes
2.1 Accessing the Custom Code Page
- Sign into your Bakuun account and navigate to your B-Portal via Bakuun store
- Click Editor
- Then click Custom Code
2.2 Admin Responsibility & Platform Behaviour
Before using this feature, it is essential to understand what the platform does and does not do with the code you enter. This is one of the most important aspects of the Custom Code page.
The platform does not:
- Validate the code you enter
- Sanitise or modify the code in any way
- Check for syntax errors
- Warn you if the code could cause performance or security issues
This means:
- Code is saved and injected exactly as you enter it
- If your code contains errors, those errors will appear on your live portal
- If your code introduces a security vulnerability, the platform will not catch it
Important: Portal admins are fully responsible for the correctness, security, and performance impact of any custom code they add.
Always test your code thoroughly in the preview environment before publishing to Live environment, and ensure any third-party scripts you include come from trusted sources.
2.3 Header Code Field
The Header Code field is where you enter code that should be loaded in the <head> section of every page on your portal. This is the standard location for code that needs to be available early in the page load process, such as analytics initialisation scripts, font loading, and global stylesheets.
Field properties:
| Property | Detail |
| Field type | Multiline code editor |
| Font | Monospace |
| Whitespace handling | Preserves whitespace and line breaks exactly as entered |
| Injection point | Immediately before the closing </head> tag on every page |
| Maximum characters | 50,000 |
| Input beyond limit | Blocked — no additional characters can be entered |
Allowed content types:
The Header Code field accepts any valid HTML, JS, or CSS snippet, including but not limited to:
- <style> blocks
- <script> tags
- <link> tags
- <meta> tags
2.4 Footer Code Field
The Footer Code field is where you enter code that should be loaded at the bottom of every page on your portal, just before the page finishes rendering. This is the standard location for scripts that do not need to block the page from loading — such as tracking pixels, chat widgets, and deferred third-party integrations.
Field properties:
| Property | Detail |
| Field type | Multiline code editor |
| Font | Monospace |
| Whitespace handling | Preserves whitespace and line breaks exactly as entered |
| Injection point | Immediately before the closing </body> tag on every page |
| Maximum characters | 50,000 |
| Input beyond limit | Blocked — no additional characters can be entered |
Allowed content types:
The Footer Code field accepts the same content types as the Header Code field. The most common use cases for the footer are scripts and tracking pixels, as placing these here avoids slowing down the initial page load.
Validation:
As with the Header Code field, there is no content validation, sanitisation, or syntax checking. Code is stored and injected as-is.
2.5 Saving Custom Code
When you are ready to save your custom code, both the Header Code and Footer Code fields are saved together in a single Save action.
To save your custom code:
- Enter or update your code in the Header Code field, the Footer Code field, or both.
- Click the Save button.
- A success message will be displayed confirming the save was successful.
- The Last Updated metadata will be updated with the current timestamp and the user who performed the save.
2.6 Preview and Live Environment Behaviour
The Custom Code feature behaves differently depending on which environment you are working with. Understanding this distinction is important to avoid confusion about why changes may or may not be visible.
| Environment | Behaviour |
| Preview | Always live. Saved custom code applies immediately and is reflected on the staging portal without any additional steps. |
| Live | Requires a publish action after saving. If the Live Environment has not been published since the save, the code is stored in the system but is not active on the Live portal. |
Important: There is no separation between Preview and Live custom code values. Both environments use the same stored code. The only difference is when that code becomes active — immediately on Preview Environment, and only after publishing on Live Environment.
2.7 Data Storage on Bakuun
When you save custom code, the following data is stored per portal:
| Field | Description |
| portal_id | The unique identifier of the portal this configuration belongs to. |
| custom_code_header | The full contents of the Header Code field, stored as raw text. |
| custom_code_footer | The full contents of the Footer Code field, stored as raw text. |
| updated_at | The timestamp of the most recent save. |
| updated_by | The user who performed the most recent save. |
3. Troubleshooting
| Issue | Likely Cause | Resolution |
| Custom code is not appearing on the Live portal after saving | The site has not been published since the save; Live only reflects saved code after a publish action | Navigate to the Publishing flow and publish the site. Once published, the saved custom code will become active on Live portal. |
| Custom code is causing layout or functionality issues on the portal | The saved code contains errors or conflicts with the portal's existing styles or scripts; the platform does not validate or sanitise code | Review the code carefully for errors. Test in the staging environment first. Remove or correct the problematic code, save, and re-publish if needed. |
| The Header Code or Footer Code field will not accept more input | The 50,000 character limit has been reached | Review your code and remove any unnecessary content to bring it within the limit. Consider whether any scripts can be hosted externally and loaded via a single <script src=""> tag to reduce character usage. |
| The Custom Code page is inaccessible | The portal is in a Delete Pending or Deleted state | Check the portal's status in the portal management area. If the portal should not be in this state, contact your system administrator. |
| Code was entered but was lost after navigating away | The Cancel button was clicked, or the page was navigated away from before saving | Always click Save before navigating away. If Cancel was clicked unintentionally, the last saved state has been restored and the unsaved changes cannot be recovered. |
| Saved code is not appearing on the staging environment | The save may not have completed successfully | Confirm that the success message appeared after clicking Save. If it did not, attempt to save again. If the issue persists, refresh the page and re-enter your changes. |