💡 You will need a paid plan to use Custom Code.

The Custom Code feature lets you embed custom blocks of code to your entire website or individual pages. Custom code can be added at the end of the <head> and <body> tags.

Add code through the Settings Panel. Code added to the "End of <head> tag" in the settings panel will be inserted into the <head> of the HTML document and will be executed before the HTML document is rendered. Code added to the "End of <body> tag" will be inserted into the <body> of the HTML document and will be executed when the HTML document has been loaded and parsed.

After adding custom code to your website or individual pages, you can verify that the code is functioning properly by checking on the published site. Keep in mind that the code will not function in the Design Editor or Live Preview.

Please also be aware that STUDIO is unable to provide assistance regarding the content or behavior of custom code created independently or supplied by external services.

What can I embed?

Up to 10 code blocks can be added respectively before the </head> and </body> tags, with each code block limited to a maximum of 30,000 characters.
Within the <head> tag, you may add the following five tags. Any other tags added will not be reflected:
- <link>
- <meta>
- <style>
- <script>
- <noscript>

How can I embed custom code?

Adding custom code

You can add custom blocks of code from the right panel in the Design Editor. To make changes to the <head> and <body> tags for the entire site, go to the Site tab. For changes specific to a page, go to the Page tab.

Click on "Custom Code" within the relevant tab, and in the settings field that appears for the <head> and <body> tags, add your code. Finally, remember to update your site to ensure the changes are reflected on the published site.

Editing or deleting custom code

The added code will be displayed as a list. To edit the code or include a memo, simply click on the respective list item. Additionally, you can rearrange the order of code blocks using drag and drop.

Important

Integrating with external apps
Proceed with caution if you have integrated codes from External Apps, as conflicts may arise.

What will happen after downgrading
After downgrading to the Free plan, any custom code you added will be retained. You can remove the code blocks. If you want to edit or enable the code blocks, you will need to upgrade to a paid plan.
Handling of DOMContentLoaded events
Question: DOMContentLoaded events do not fire at the expected timing.
- Any code you wish to execute after the HTML document has been loaded and parsed should be placed directly within the custom code <body> tag.
- If the code is written in <head>, the DOMContentLoaded event will fire, but it will fire when the HTML document has not yet been loaded and parsed.
```
<script>
window.addEventListener('DOMContentLoaded', (event) => {
    console.log(document.getElementById("abc")); // null: Because the id cannot be found even if it is set in the Design Editor
});
</script>
```
- If the code is written in <body>, the DOMContentLoaded event will not fire.
```
<script>
window.addEventListener('DOMContentLoaded', (event) => {
    console.log('Does not fire');
});
</script>
```
- Solution: Any code you wish to execute after the HTML document has been loaded and parsed should be placed directly within the custom code <body> tag.
```
<script> 
console.log(document.getElementById("abc")); 
</script>
```

Errors Due to Variable Declarations

Redeclaring a variable may result in an error such as "Uncaught SyntaxError: Identifier 'foo' has already been declared".

<script> 
// Error occurs because the same variable is declared when the page is revisited
const foo = "foo";
</script>

Solution: Use type="module", or

<script type="module">
 const foo = "foo"; 
</script>

Use block scope { }.

<script> 
{ 
const foo = "foo"; 
} 
</script>