Our Custom Code / Embed block can be added from the Page Content tab at the top left of the CMS. Just add a new block and select Custom Code / Embed.
This block starts empty but allows you to add code in the sidebar. That code can be written from scratch or can be an iframe and javascript snippet provided by an external service that you paste in (more commonly known as an "embed").
This block should, in most cases, faithfully preview your code in the CMS (see exceptions below), and will update as you edit it. By default we also pull your site styles into this block, so text fonts, sizes, and colors for example, should automatically get applied.
If you simply want to paste a snippet of hidden code (like for analytics), versus creating a whole new block, you should use our Custom Code sections instead.
Design settings
Padding: The padding setting, when enabled, will add padding outside of the code you paste in, using the standard padding sizes on Run. If you want to control the block all the way to the edges, turn this off.
Background color: You can use our standard background colors on this block, which will also, automatically apply your colors to other standards HTML text tags. Using our color variable system, you can implement this in a more granular way as needed. This will required inspecting our standard blocks to see what variables we use to control color.
Using "embeds"
An embed generally refers to something provided by an external service, like a form or widget. Generally the provider of the embed will give you a snippet of code. You can paste that code into this block's 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 URL, which will not function. So if all you have is a page URLs, here are some limited instructions on setting up iframe embeds from URLs.
Link and Script tag issues
Link and Script tag issues
If the code you're pasting into the this block contains a Script or Link (not "A href") 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. Note: Custom code inserted into the Custom Code and Scripts sections will not preview on the CMS for security reasons, so you'll need to preview on the published site.
Example Script tag
<script type="text/javascript">
console.log("Hello, world!");
</script>
Example Link tag:
<link rel="stylesheet" href="styles.css">
Setting the correct heights for iFrames
Setting the correct heights for iFrames
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.
Embeds vs. Form Integrations
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.
"Wrap code in iframe" toggle
By default we provide an iframe wrapper around your Custom Code / Embed Block. This allows you to run javascript in the CMS without causing a security risk to our system. However, our default outer iframe may prevent an iframe that you paste in as an embed from displaying correctly. If you turn off the "Wrap code in iframe" toggle, this should allow an iframe you've added to display correctly, but will simultaneously block any javascript from running in the CMS. Javascript will however run on the live site, no matter which setting you have enabled.