In Studio.Design, you can use the Embed box to add HTML, CSS, and JavaScript code to your page. This lets you display external tools and content—like Google Maps—directly within your page.
Note: Custom code you write yourself and code provided by external services—including how it behaves—may fall outside the scope of our chat support.
You may also want to search for examples or post questions in the Studio.Design Community.
Add an Embed box
In the navigation, click the Add icon
.In the Add panel, click the [Basic] tab.
From the [Embed] section, choose the dedicated box for the external tool you want to embed, or select [Blank].
Edit the box to match what you want to embed.
For detailed steps on each external tool, check the following help articles:
Edit embed code
Select the Embed box you added to the screen.
In the right panel, select the [Embed] tab.
If the panel is closed, open the right panel first.
In the [Embed code] input field, click [Open editor].
Edit your code in the embed code modal window.
When you're done editing, click [Save].
If you're editing a site that's already published, update the site to apply your changes to the live version.
How to use the embed code editor window
The embed code editor window shows the code editor in the left pane and a preview in the right pane.
Left pane: Code editor
Action | How to use |
Undo |
|
Redo |
|
Line wrap | Turn the [Wrap] toggle ON |
Insert a variable | While focused on the editor, click the + button that appears at the cursor position, then choose a CMS property |
Right pane: Preview
The right pane lets you preview the result of your code in action.
The auto-update setting controls when your edits appear in the preview. You can switch it using the auto-update toggle.
Auto-update ON: Edits are applied automatically.
Auto-update OFF: Click the [Update] button to apply changes manually.
CMS variables are shown with their actual values substituted in.
Using dynamic values (CMS properties and URL variables)
You can use dynamic values like CMS properties and URL variables within your code.
Click the [+] button shown in the left pane of the code input area.
Choose the value you want to use from the list that appears.
Embed Code AI
Embed Code AI is an AI feature built into the embed code editor. It works both for editing existing code and for generating code from scratch.
AI output is reflected in the preview in real time, so you can fine-tune your code while watching how it behaves on the screen.
Edit existing code
Enter a prompt to tell the AI how to modify the code that's already in the embed code editor, and it'll rewrite the code for you.
Generate from scratch
Starting from an empty editor, you can generate HTML, CSS, and JavaScript code using just a prompt.
Using Embed Code AI
In the embed code editor, click the AI button (Studio.Design logo icon) in the top left.
In the modal that appears, describe in natural language what kind of code you'd like to create or change.
Review your input and click [Edit]. While the AI is working, the area around the editor will be highlighted in pink.
The code will be rewritten in real time as it streams in, and the results will appear in the preview on the right.
Check the generated result, and click [Save] if everything looks good.
To apply changes to your live site, update the site from the publish panel.
Note:
Changes made by the AI aren't saved to the embed code until you click [Save].
If there's a problem with the generated result, you can undo it using the editor shortcut (Cmd+Z / Ctrl+Z).
While the AI is processing, the preview won't update—even if auto-update is ON—until the AI finishes.
Cancel an Embed Code AI edit or generation
While the AI is working, you can cancel the edit by doing either of the following:
Press the Esc key on your keyboard
Click the [Cancel] button shown in the on-screen overlay
When you cancel, any code that's been rewritten up to that point will remain in the editor.
Prompt examples
Background animations
Use case | Example prompt |
Particle background | Create a background animation with softly floating particles. Use a blue gradient for the colors. |
Gradient background | Create a gradient background that slowly shifts colors. |
Wave animation | Add a wavy animation along the bottom of the screen. |
Geometric patterns | Create a background with moving geometric patterns in a minimal design. |
Interactive elements
Use case | Example prompt |
Countdown | Create a countdown timer that counts down to April 1, 2025. |
Number count-up | Create an animation that counts up from 0 to 100 when scrolled into view. |
Typing-style text | Create an animation where the text "Welcome" appears as if it's being typed out. |
Mouse follow | Add a light effect that follows the mouse cursor. |
UI that looks like external content
Use case | Example prompt |
Social media feed style | Create a card-style UI that looks like a Twitter embed. |
Business calendar | Show this month's calendar with Saturdays and Sundays in red. |
Edit existing code
Use case | Example prompt |
Change colors | Change the background color to navy and the text to white. |
Add animation | Add an animation that makes the button gently lift up when hovered. |
Responsive support | Make the font size smaller when viewed on mobile. |
Adjust speed | Slow down the animation speed. |
Code types: iframe and sandbox
The Embed box automatically switches between the iframe and sandbox code types depending on the content of the code you add.
iframe type
Your code will be treated as iframe type when:
It consists only of an <iframe> tag
It's an embed code for a form created with formrun
It's an embed code for a HubSpot Form
Note: If you're embedding the HubSpot form ID using a CMS property, it will automatically be treated as "sandbox" type.
With sandbox type, some features may be limited due to security restrictions.
sandbox type
Your code will be treated as sandbox type when:
It's any code that doesn't qualify as iframe type
A CMS property is used within code that's otherwise recognized as iframe
Things to know and sample code
For more advanced use cases, please review the following points first.
How styles are handled
When the code type is sandbox, styles you set (e.g., using style) only apply inside the Embed box. They won't affect the rest of the page.
How the DOMContentLoaded event is handled
Code that depends on DOMContentLoaded won't fire, so consider using a different event or approach.
<script> document.addEventListener('DOMContentLoaded', function() { console.log('This will not fire'); }) </script>Setting links inside embed code
When you add links in your embed code, set one of the following target attributes to make the destination clear:
target="_blank"target="_parent"target="_top"
Without a target attribute, the link will only navigate inside the Embed box—not the whole page.
<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>
Tips: When embedding the following external tools, follow the steps in their respective help articles:
Style the Embed box
Just like other boxes, the Embed box supports design options such as appearance, layout, and responsive settings.
For detailed steps, check the following help articles:
Tips: If you embed an element that needs to keep its aspect ratio—like a video—see the article below for how to make it responsive.
embed script speakerdeck tag box