Embed / Custom Code Block

Our Embed / Custom Code block can be added from the Page Content tab at the top left of the CMS. Just add a new block and select Embed.

Generally the provider of the embed will give you a snippet of code. You can paste that code into the Embed block sidebar. If the code provided contains Link tags, read below to see how to handle those. They generally should not be pasted into the Embed block. Script tags as well, may in some cases, need to be pasted into a separate location.

*Do not paste a standard page link, which will not function. So if all you have is a page link, here are some limited instructions on setting up iframe embeds from links.

Javascript preview off: The Embed block will allow any code to be pasted into it, however, Javascript will not run by default within the CMS for security reasons. When you publish to your live site, the Javascript will run there. With Javascript preview off, your website styles will pass into the Embed block correctly, creating a more accurate representation of what your live page will look like. Javascript preview off is best for iFrames and pure HTML/CSS. For pure Javascript embeds, javascript preview on will work better.
​
​Javascript preview on: Flipping on the "javascript preview" toggle will allow Javascript to run, but will also block your website styles (only in the CMS) from passing into the block, likely causing formatting to look incorrect. This is because in order to safely run Javascript in the CMS, we have to "sandbox" your code into an iframe, which also blocks CSS / styles from passing through. Your website CSS / styles will pass through correctly on your live site.
​

So as you can see, either mode may not faithfully display what will happen on your live site, depending on what sort of code you're using, so you'll need to publish and view the live site to see a 100% accurate reflection of how the block will ultimately appear. The status of the toggle will not affect at all what happens on your live site.

If you want to add a full block of custom code, like your own HTML and CSS, this block can also be used for that purpose as well. Just paste your custom code into the sidebar. If you simply want to paste a snippet of hidden code (like for analytics), versus creating a whole new block, you may be better off using our Custom Code sections.

Unfortunately, iframe components do not automatically expand to match the size of their contents, unlike other HTML elements. Therefore, if your embed contains an iframe, and the content of the iframe overruns the iframe window, there will be a scroll bar to see the overrunning content.

If you want to remove the scrollbar by showing all the content, we allow you to set the height for the desktop, tablet, and phone versions manually so that scrolling isn't necessary. You can use the window size preview icons at the bottom of the CMS to see your site in these different views. You may also want to Publish the site, and slowly adjust the width of the window in the published site, to make sure that your iframe content isn't cut off at any screen width.

*Note: If you have javascript preview turned on, this setting will apply to the iframe we automatically enable in the CMS, not an iframe that you've pasted in. Turn off javascript preview if you're embedding an iFrame in order to see an accurate representation of how your block will look on the live site.

For any services we offer integrations for, we suggest that you use the integration versus an embed of that service. This will result in a more consistent visual appearance for your website.

If the code you're pasting into the Embed block contains a Script or Link (not ahref) tag, you may need to remove that from the rest of the embed code and paste it into the Custom Code and Scripts section, and usually in the box labeled Header. You can reach the Insert Code section of an individual page by clicking Page Settings at the top left of the page. To do it site-wide, you can do it on the Site Settings page, then the Custom Code and Scripts tab.

Script tags generally start with something like: "<script type=..."

And end with a closing tag that looks like this: "</script>"

Cut and paste everything from the opening to the closing script tag.

Link tags generally start with something like this and are self-closing: "<link..."