You can use the Embed box to add HTML, CSS, and JavaScript code to your page in the Design Editor.
Please be aware that STUDIO is unable to provide assistance regarding the content or behavior of custom code created independently or supplied by external services.
Code Types
There are two types of embed boxes: iframe type and sandbox type, which are determined by the content of the code added.
iframe type
Code consisting only of the <iframe> tag
Embed code for forms created with Formrun
Embed code for HubSpot Forms
Sandbox type
All other code that does not fall into the iframe type category
Adding an embed box
From the Add panel located on the left side of the editor, add an Embed Box to your page.
Open the settings panel located on the right side of the editor and add your code to the Embed code field.
Finally, update your site to apply the changes and reflect them on your published site.
Notes and Sample Code
Handling of styles
For the sandbox-type embed box, any "style" applied will only affect the content within the embed box and will not impact the entire page.Handling of DOMContentLoaded events The DOMContentLoaded events will not be triggered within the embed box.
<script>
document.addEventListener('DOMContentLoaded', function() {
console.log('Dose not fire');
})
</script>Link configuration within the embed code
When setting links, please include the attributes target="_blank", target=_top", or target="_parent". If no target attribute is set, the link will navigate within the Embed box itself.
<a href="https://studio.design/ja">STUDIO LP</a>
<a href="https://studio.design/ja" target="_blank">STUDIO LP _blank</a>
<a href="https://studio.design/ja" target="_top">STUDIO LP _top</a>
<a href="https://studio.design/ja" target="_parent">STUDIO LP _parent</a>embedscript