How to Embed Custom iFrame Code

This feature is available at both the Booth level and the Event level.

It is accessed by the "Manage Widgets" button right below the Description section.

These widgets also allow you to (click for more info):

But you can also add custom iFrame code in these widgets.

What is an iFrame?

An iFrame (which stands for inline Frame) is a snippet of HTML code that can be embedded into a webpage, that renders some small piece of HTML when it's rendered.

Why would you want to use this?

Tons of things are embeddable with an iFrame! You can make tweaks to how a YouTube video appears, embed a survey for your visitors, even embed a donation form directly, and your own custom code (if you know how to write HTML). An iFrame can easily be something a visitor to your page interacts with whether it's clicking play, typing in a response, making a donation, or even playing a mini-game!

How do you do this?

On your Event Page or Booth Page, scroll down under the Description section. Click on the green "Manage Widgets" button.

This opens up the editor. Where you can choose to either enter a supported URL or custom embed code.

Now, paste your iFrame code into the "Enter Custom iFrame" field in the bottom half of the box. This could be code that you're just copying and pasting from somewhere (YouTube), or code you've written and edited yourself. Click "Add" to save this iFrame.

NOTE: We do not validate your iFrame code. If it is not valid HTML, or something about it is broken, it will just show up like a blank box on your page. You are responsible for validating that this code works. We recommend using a site like http://www.csgnetwork.com/htmlcodetest.html to test your embed code and see if it works!

Once saved, it'll look like this while you're still in "Manage Widgets" mode:

After you add the social widget, you will be able to resize the box (arrows in upper left corner), reorder the widgets (arrows at the bottom), and remove the widget (trash can in upper right).

For our example, we created a survey with Swift: Real-Time Audience Polling, which generates this iFrame code to embed:

<iframe src="https://p.excitem.com/s/play/69074?e=1" allowtransparency="true" frameborder=0 width="100%" min-height="300px" style="padding:0;border:0;"/iframe>

We then resized the box so it would take up the whole width of the page, so on "Manage Widgets" it looked like this:

Now, to see what this will actually look like to folks who visit your page, click the green Save Widget Changes in the upper right of this section.

Our embedded survey looks like this:

We went ahead and added some more widgets for social media feeds and a YouTube video, here's a video of what it all looks like together:

Here's a screenshot to sum up everything you can do from the Manage Widgets mode:

As a reminder, you can find more detail in the following guides on the other types of widgets:

Articles in this section

Comments