The Embed Element can be used to embed third party functionality or custom code snippets onto your TIME Sites pages.

Common examples of functionality that you may want to embed on a page include:

The embed can also be used if you have a developer that needs to develop an element that requires more interaction than the TIME Sites Design Studio allows.

The Embed Element is currently only available in paid editions of TIME Sites.

Click the embed element icon in your left toolbar, and drag it onto the stage:

This will add a blank embed element to the page. It can be placed as a root-level element, or within any container or grid. By default, it will automatically expand to take up 100% of the width of its parent container.

The embed element will be empty initially. The next step is to add your embed code into it.

Click the small "</> icon in the center of the element:

This will open the code editor window:

This is where you can paste in your embed code. 

When you're finished, click "Submit". It may take a few moments for the embed to finish processing.

This option determines whether or not the embed should have its own scroll bars. If the embedded element is small, it's usually better to make the dimensions of the embed element large enough to contain the entire embed.

If the embed is a larger experience, you may want to set the embed element to "scrollable". 

If the embedded content exceeds the size of the embed element, and the element is not set to "scrollable", any overflowing content will be cut off.

An iframe provides an extra level of separation between the code that you add to the page and the rest of the page. The distinction is largely technical, but if you find that one setting is not working as intended it is worth trying the other.

Iframing content means that the code stays within the bounds of the embed element. Deselecting iframed means you're letting the code affect the rest of the page, which it might need to do. If your code already has an <iframe> tag in it, remember to deselect iframed.

If the "iframed" checkbox is deselected, you will be unable to preview the final experience in the studio and will have to publish the site to see it unless the code has <iframe> in it. (Remember, you can always password protect a site if you want to preview it before release.)

You can also embed most website pages into your site using the code format:

It's important to note that unsecure (http) urls cannot be iframed into a secure site (if the site url has https). There's nothing that TIME Sites can do about this—it's internet security protocol. Be sure to uncheck the "iframe" checkbox. As the code already includes iframe, that box does not need to be selected.

You will then see a pop-up and select "I understand."