Skip to main content
Adding an Embed box

Display external services with an Embed box

Kelvin H. avatar
Written by Kelvin H.
Updated over a week ago

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

  1. From the Add panel located on the left side of the editor, add an Embed Box to your page.

  2. Open the settings panel located on the right side of the editor and add your code to the Embed code field.

  3. 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.

    document.addEventListener('DOMContentLoaded', function() {
    console.log('Dose not fire');

  • 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="">STUDIO LP</a>
    <a href="" target="_blank">STUDIO LP _blank</a>
    <a href="" target="_top">STUDIO LP _top</a>
    <a href="" target="_parent">STUDIO LP _parent</a>

    embed script

Did this answer your question?