Plans covered: Paid plans
Please note: Custom code you write or code from external services is generally not supported through chat support. We also recommend searching for tips in the Studio.Design community.
In Studio.Design, you can add custom code to the <head> and <body> tags of your site or individual pages.
The code you add to the "end in
<head>" in the Add Code field will be inserted into the<head>of the HTML Document and executed before the HTML Document is built.Code added to the "end in
<body>" will be inserted into the<body>of the HTML Document and will be executed when the HTML Document has been loaded and parsed.
Custom Code Specifications
Up to 10 codes can be added just before
</head>and</body> tags, respectively.A maximum of 3,000 characters can be entered in a single code field.
Available Tags in <head>
Only the following five tags can be added to the <head> tag. Other tags will not be reflected in the settings.
<link<meta> <style> <meta> <style> <meta> <style> <meta<style> <script><script><noscript>
Using Dynamic Values (CMS Properties, URL Variables)
You can use dynamic values such as CMS properties and URL variables in your code.
Click on the Custom Code entry field.
Click the [+] button displayed in the left frame.
Select the value you wish to use from the candidates displayed.
Adding a Custom Code
Note: The code you add will not work in the Design Editor or Live Preview. Please confirm that it works on the public site.
In the Design Editor, click in the off-screen gray margin area.
The settings panel will open in the right panel.
If the panel is closed, open the right panel.
Select the [Page] or [Site] tab, depending on where you want to place your custom code.
When you have finished entering the code, update your site to reflect the changes on the public site.
Manage Custom Codes
The added codes will be displayed in a list format. You can label the codes and reorder the list.
Edit Labels for Custom Codes
Codes displayed in the list are labeled and by default are numbered, such as "New Code 1".
To change the label, double-click on the label name and edit it in the text field that appears.
Switch the Order of Custom Codes
The codes in the list can be reordered by dragging. Changing the order also changes the order of the codes to be executed.
Delete Custom Codes
Place the cursor over the code you wish to delete.
Click the [×] button to delete the code.
Notes and Sample Codes
Conflicts with External Apps
Problems may occur if the code for a service linked with an external Apps is also set in a custom code.
To avoid loading the same script twice, be careful about the settings of external Apps integration and custom code.
Behavior After Plan Downgrade
After downgrading to the Free plan and completing the switchover, the configured custom codes will be retained internally.
In this state, you can delete the code, but you cannot edit or activate it, so if you want to use it again, please consider upgrading.
Handling of DOMContentLoaded Events
DOMContentLoaded events are not fired at the expected timing.
If you write code in
<head>, the DOMContentLoaded event will fire, but it will fire when the loading and parsing of the HTML document is not yet complete.<script>
window.addEventListener('DOMContentLoaded', (event) => {
console.log(document.getElementById("abc")); // null: Design
});
</script> because it cannot be found even if the id is set in the Editor.If the code is written in
<body>, the DOMContentLoaded event will not fire.<script>
window.addEventListener('DOMContentLoaded', (event) => {
console.log('Not fired');
});
</script>
Solution:
The code you want to execute after the HTML document has been loaded and parsed should be placed directly within the custom code <body>.
<script>
console.log(document.getElementById("abc"));
</script>
Error Due to Variable Declaration
Redeclaring a variable may result in an error like "Uncaught SyntaxError: Identifier 'foo' has already been declared".
<script>
// page transition, when you come back, you will have to declare the same variable, so it will be an error
const foo = "foo";
</script>
Solutions:
Use
type="module<script type="module">
const foo = "foo";
</script>Use block scope
{ }<script>
{
const foo = "foo";
}
</script>