HTML Embed widget settings

The HTML Embed widget holds code you paste in: an iframe, a booking calendar, a review feed, a form from another tool, or any HTML. Use it when a service gives you "embed code" for your website.

It's in the Add panel under Custom. In the Layers panel it's called HTML.

How to add an embed

1. Open the editor and click Add.
2. Under Custom, drag HTML Embed onto the page. An empty one says "Click to add HTML or embed code".
3. Click Manage HTML in the toolbar (or right-click it and choose Edit Code). The HTML Content window opens.
4. Paste your code. Tab adds two spaces; Cmd+Enter (Ctrl+Enter on Windows) saves.
5. Turn on Run on the live site if the code needs it (see below).
6. Click Save embed.

Sandboxed or Run on the live site

• Sandboxed (the default): the code runs in its own sealed frame. It can't see the page's cookies or scripts, so it can't break your site. Most iframes, maps, videos and simple widgets work this way, and they show in the editor and Preview too.
• Run on the live site: for widgets that need the page itself or cookies, such as GoHighLevel or Calendly booking, chat bubbles and some review feeds. The code runs with full access to the page, like site-wide custom code, but only on the published site at its own address. The editor and preview links show a placeholder instead. Only add code you trust.
• The Run on the live site switch only shows for people who can change custom code (see Who can use it).

To add code to every page instead (for example a chat widget's script in the head), use the site's custom code settings. See Custom code (Dev Mode).

X (Twitter) timelines

Paste just the profile link, for example https://x.com/yourbusiness, and click Save embed. The widget shows that profile's posts. On a new widget the height is set to 600px for you. X's own "Embed timeline" code works too (including its dark theme); it's turned into the same timeline.

Design panel

Size

• Width: a number in px (0–2000), % (0–100) or auto (full width). Per screen size. Default 100%. On auto or % the embed fills the column or row it's in, so it also shows full width in a row of widgets. Switching from auto to px starts from its size on the page.
• Height: a number in px (0–2000) or auto. Per screen size. Default 200px. With auto on the live site, the frame grows to fit what's inside.

Spacing

Padding inside the widget (per screen size, with a reset) and margin around it. See Widget design panel basics.

Animations & Effects

Hover effects, Entrance and Scroll. See Animations and effects.

Connect to Data

On a dynamic page, the HTML can come from a collection field: select the widget and use Connect to Data ("Connect Content to"). Each item's page then shows its own embed, for example a different map or video per location. A connected widget can't be edited in HTML Content; it shows "Connected — no content yet" until the field has a value. See Connect to data.

Custom widgets

For an embed your agency reuses with settings people can fill in (no code), build a custom widget in the Widget Builder instead. It then appears under Custom in the Add panel. See Widget Builder and Use custom widgets on a site. Placing a custom widget doesn't need the custom code permission.

Examples

• Booking calendar: paste the provider's inline embed code, turn on Run on the live site, set Height to auto, and check it on the published site.
• Review feed from another service: paste its snippet. Try it sandboxed first; if it stays blank on the live site, turn on Run on the live site.
• Embedded map or video by iframe: paste the iframe, keep it sandboxed, and set Width 100% and Height 450px.
• Business X feed in the sidebar: paste https://x.com/yourbusiness.

Limits and what it can't do

• With Run on the live site, the code only runs on the published site at its own address. The editor and preview links show a placeholder.
• Sandboxed code can't read the page, its cookies or other scripts, so tools that need them (some chat bubbles, booking pop-ups, tracking) won't work sandboxed.
• If the site uses a cookie banner, an embed that loads content from another service waits for the visitor's consent and shows a button to load it. See Cookie banner.
• In Edit mode, clicks pass through the embed so you can select and move the widget. Use Preview to try it.
• An empty HTML Embed is invisible in Preview and on the live site.

Who can use it

Anyone with the Mount Olympus tool on the agency team. Client people need the Dev Mode permission to add an HTML Embed, change its code or change Run on the live site. Without it, the switch is hidden and saving refuses the change. Changing size or design needs Editor.

Troubleshooting

• The embed is blank in the editor: code set to Run on the live site only shows a placeholder in the editor and previews. Publish and check the live site.
• The embed is blank on the live site: the code may need the page or cookies. Turn on Run on the live site and republish. If it still fails, check the provider allows your domain.
• A message and a button to load it show instead of my embed: the cookie banner is waiting for the visitor's consent before loading content from another service.
• The content is cut off at the bottom: raise Height or set it to auto. Many embeds need 500–800px.
• There's a scroll bar inside the embed: the height is smaller than the content. Use auto or a bigger number.
• "Adding or changing HTML code needs the Dev Mode permission.": the client person editing doesn't have Dev Mode. Ask the agency to add it, or have the agency paste the code.
• "Changing "Run on the live site" needs the Dev Mode permission.": the same, for the switch.
• The X timeline doesn't appear: paste only the profile link (no extra text), and make sure it's a profile, not a single post.
• I can't edit the code, it says Connected: the widget is connected to a collection field. Change the field's value in the collection, or disconnect it.