First, it's helpful to note that Circuit offers two types of embeds, Interactive Embeds and Banner Embeds.

Interactive Embeds allow users to engage with scenes and tours directly on your webpage. By default, Circuit embeds are interactive, meaning the code snippet you copy from the CMS will let users interact with the content right inside the parent page. For example:

Interactive Embeds work best when the parent page allows for an embed window that’s large enough to explore the tour—our recommended minimum size for Interactive Embeds is: 400px tall by 850px wide. When that size isn't possible, or you want to add multiple embeds, you can use Banner Embeds.

Banner Embeds are responsive visual placements that, when clicked, open a tour or in a new tab. The banner display mode is activated simply by adding the banner=true parameter into the embed code snippet. This parameter turns the embed into a responsive, styled button that opens the content in a new tab. For example:

As you can see in the video, Banner Embeds dynamically pull in the imagery, title and meta description from the content you are embedding. This saves you an hour or two of manual work creating a stylized graphic banner for your webpage that would do pretty much the same thing, but without the cool factor.

Now that you understand the two formats, the next question is deciding what you'd like to embed.

There are four different options for the types of content you can embed. They are:

It’s important to consider which content type would be most suitable, depending on the destination page you're looking to add the embed into. For example, if your location webpage aligns with an entire tour of that location, you might embed the entire tour into the page. If it more closely lines up with a specific scene, you might opt to embed an individual scene instead. This allows you to present content more relevant for your visitors who are viewing that particular page.

Let's walk through how to complete each of these.

For tour embeds, the easiest way is to navigate to the tour you want to embed in the CMS and click the share button to copy the embed code (steps below). Note that embeds will only work for live tours, so make sure you hit Publish on that tour and see a Live label in your list view.

Ironically, the tool we're using for this help centre is restrictive and does not allow third party embeds, so we've created a page showing the embeds.

For individual scene embeds, navigate to the tour you want to embed in the CMS and click the share button to copy the embed code (steps below). Note that embeds will only work for live scenes, so make sure you hit Publish on that scene and see a Live label in your scene list view.

To add a banner embed, find the URL for the tour you’d like to create a banner for, following the steps above. At the end of that URL, add the parameter

?banner=true which will enable banner mode. For example:

https://app.madewithcircuit.com/explorer/campus-highlights?banner=true

Once you create the banner embed, you can style it using the following optional parameters:

Embedding is a great way to distribute your interactive content on your webpage, or on third party pages that allow for it.

Send us a message and we will be happy to assist you.