Available on: Paid plans
Note: Our chat support may not be able to help with code you've written yourself or code provided by third-party services. Consider searching for examples or posting questions in the Studio Community.
With Studio.Design, you can add custom code to the <head> and <body> tags of your entire site or individual pages.
Code added to "End of
<head>" is inserted into the<head>of the HTML document and runs before the HTML document is fully built.Code added to "End of
<body>" is inserted into the<body>of the HTML document and runs after the HTML document has finished loading and parsing.
Custom code specifications
You can add up to 10 code blocks each before the
</head>and</body>closing tags.Each code block can contain up to 30,000 characters.
Tags allowed in the <head> tag
Only the following 5 tags can be added to the <head> tag. Any other tags will not be applied, even if entered.
<link><meta><style><script><noscript>
Using dynamic values (CMS properties, URL variables)
You can use dynamic values such as CMS properties and URL variables within your code.
Click the custom code input field.
Click the [+] button that appears on the left.
Select the value you'd like to use from the list of options.
Adding custom code
Note: Custom code does not run in the Design Editor or Live Preview. Please test your code 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, open the right panel.
Choose the [Page] or [Site] tab, depending on where you want to add the code.
Once you've finished entering your code, update your site to apply the changes to your published site.
Tip: You'll find custom code fields in both the Page settings tab and the Site settings tab.
Site settings: Applies to your entire site. If no page-level code is set, the site-level code will be used.
Page settings: Applies only to that specific page and takes priority over site settings.
Managing custom code
Your added code blocks are displayed in a list. You can label your code blocks and rearrange their order.
Editing custom code labels
Each code block in the list has a label. By default, they're labeled with a number, like "New Code 1."
To change a label, double-click on it and edit the text in the field that appears.
Reordering custom code
You can drag and drop code blocks in the list to reorder them. Changing the order also changes the order in which the code runs.
Deleting custom code
Hover over the code block you want to delete.
Click the [×] button that appears to delete it.
Important notes and sample code
Conflicts with external Apps
If you've connected a service through external Apps and also add the same service's code via custom code, it may cause issues.
Make sure you're not loading the same script twice between external Apps integrations and custom code.
Behavior after downgrading your plan
If you downgrade to the Free plan, your existing custom code is still saved internally even after the switch is complete.
In this state, you can delete code but cannot edit or re-enable it. To use custom code again, consider upgrading to a paid plan.
Handling the DOMContentLoaded event
The DOMContentLoaded event may not fire at the timing you expect.
If you write code in the
<head>, the DOMContentLoaded event will fire, but it fires 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>If you write code in the
<body>, the DOMContentLoaded event will not fire at all.<script>
window.addEventListener('DOMContentLoaded', (event) => {
console.log('This will not fire');
});
</script>
Solution
If you want code to run after the HTML document has finished loading and parsing, write it directly inside the custom code <body> section.
<script>
console.log(document.getElementById("abc"));
</script>
Errors caused by variable declarations
You may encounter an error like "Uncaught SyntaxError: Identifier 'foo' has already been declared" due to re-declaring a variable.
<script>
// When navigating back to the page, the same variable is declared again, causing an error
const foo = "foo";
</script>
Solution
Use
type="module"<script type="module">
const foo = "foo";
</script>Use a block scope
{ }<script>
{r> const foo = "foo";
}
</script>