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

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

  • Data collection forms

  • Search functionality

  • Interactive location finders

  • E-commerce "Buy It" buttons

  • Ad units

  • Social aggregation widgets

  • Interactive maps

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

The Embed Element is currently only available in paid editions of Brandcast. More information about the features in each edition can be found here.

Adding an Embed to the Page

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.

Adding Embed Code to the Embed Element

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.

Embed Settings

Scrollable

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.

iframed

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:

<iframe src="https://websitename"></iframe>

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 Brandcast 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."

Did this answer your question?