Available on: Paid plans
Note: Custom code that you write yourself or code provided by third-party services may fall outside the scope of our chat support. We recommend searching for examples or posting your question in the Studio Community.
Custom code specifications
Code added to "End of
<head>" is inserted into the<head>of the HTML Document and runs before the HTML Document is built.Code added to "End of
<body>" is inserted into the<body>of the HTML Document and runs once the HTML Document has finished loading and parsing.You can add up to 10 code blocks each just before the
</head>and</body>tags.Each code field can contain up to 30,000 characters.
Tags allowed in the <head> tag
Only the following 5 tags can be added inside the <head> tag. Any other tags you enter won't be applied to your settings.
<link><meta><style><script><noscript>
Using dynamic values (CMS properties, URL variables)
In custom code within the <head> element, you can use dynamic values such as CMS properties and URL variables. In custom code within the <body> element, dynamic values are not expanded.
Click on the custom code input field.
Click the [+] button that appears in the left frame.
Choose the value you want to use from the suggestions that appear.
Adding custom code
Note: Added code won't run in the Design Editor or Live Preview. Please test it on your published site.
In the Design Editor, click the gray area outside the screen.
The settings panel will open in the right panel.
If the panel is closed, please open the right panel.
Select either the [Page] or [Site] tab depending on where you want to place your custom code.
Once you've entered your code, update your site to apply the changes to your published site.
Tip: Custom code can be added in both the Page settings tab and the Site settings tab.
Site settings: Apply to the entire site. Pages without page-level settings will use the site settings.
Page settings: Apply only to individual pages and take precedence over site settings.
Where custom code is added
There are two custom code fields, each with a different insertion location and execution timing.
Code field | Insertion location | Execution timing |
[End of |
| Before the HTML Document is built |
[End of |
| When the HTML Document has finished loading and parsing |
Managing custom code
Added code is displayed in a list. You can label your code, reorder the list, and delete entries.
In the Design Editor, click the gray area outside the screen.
The settings panel will open in the right panel.
If the panel is closed, please open the right panel.
To edit or delete site-wide tags, use [Site settings].
To edit or delete tags for a specific page, use [Page settings].
Editing custom code labels
Each code item in the list has a label, shown by default as a numbered name like "New Code 1." To rename a label, double-click the label name and edit the text field that appears.
Reordering custom code
You can drag items in the list to reorder them. Changing the order also changes the order in which the code is executed.
Deleting custom code
To delete code, hover over the item you want to remove and click the [X] button that appears.
Things to watch for and sample code
Conflicts with external Apps
Adding the same code as a service connected through external Apps to your custom code may cause issues.
To avoid loading the same script twice, please make sure your external Apps integrations and custom code settings don't overlap.
Behavior after downgrading your plan
After downgrading to the Free plan and completing the switch, your previously configured custom code is still kept internally.
In this state, you can delete the code, but you can't edit or enable it. If you'd like to use it again, consider upgrading to a paid plan.
Handling the DOMContentLoaded event
The DOMContentLoaded event doesn't fire at the timing you might expect.
When code is placed in
<head>, the DOMContentLoaded event fires, but it does so before the HTML document has finished loading and parsing.<script>
window.addEventListener('DOMContentLoaded', (event) => {
console.log(document.getElementById("abc")); // null: even if an id is set in the Design Editor, it won't be found
});
</script>When code is placed in
<body>, the DOMContentLoaded event doesn't fire.<script>
window.addEventListener('DOMContentLoaded', (event) => {
console.log('does not fire');
});
</script>
Workaround
For code you want to run after the HTML document has finished loading and parsing, write it directly inside the <body> custom code field.
<script>
console.log(document.getElementById("abc"));
</script>
Errors from variable declarations
Redeclaring a variable can cause errors like "Uncaught SyntaxError: Identifier 'foo' has already been declared."
<script>
// When navigating back to the page, the same variable is declared again, causing an error
const foo = "foo";
</script>
Workaround
Use
type="module"<script type="module">
const foo = "foo";
</script>Use a block scope
{ }<script>
{
const foo = "foo";
}
</script>