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.
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.
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.
Creating an Interactive Embed for a Full Tour
⚠️ 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.
Click on the Tours tab in the CMS
Find the tour you want to embed and click on the three dots for more options
Click Share
Click on the Interactive Embed tab in the share modal
To adjust the width and height of the embed, enter your desired values in the corresponding input fields using any CSS unit (px, %, rem, vw/vh). The minimum width and height is 400px.
To adjust the corner style of the background, select from the Corner Style options Straight, Radius-8, Radius-16, or Radius-24
Once you’re happy with the size of the embed, click Copy embed code
You can adjust the scale of the embed in the top right-hand corner above the embed to zoom in or out in the preview, but this won’t affect the actual embed dimensions.
Creating an Interactive Embed for an Individual Scene
⚠️ 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.
Click on the Scenes tab in the CMS.
Find the scene you want to embed and click on the three dots for more options.
Click Share
Click on the Interactive Embed tab in the share modal
To adjust the width and height of the embed, enter your desired values in the corresponding input fields using any CSS unit (px, %, rem, vw/vh). The minimum width and height is 400px.
To adjust the corner style of the background, select from the Corner Style options Straight, Radius-8, Radius-16, or Radius-24
Once you’re happy with the size of the embed, click Copy embed code
You can adjust the scale of the embed in the top right-hand corner above the embed to zoom in or out in the preview, but this won’t affect the actual embed dimensions.
Advanced Options and UTM Parameters
You can customize your embed code beyond basic styling directly within the share modal. There are four sets of parameters you can adjust:
Call to Action parameters
Language parameters
UI parameters
UTM parameters
To update the parameters:
Click on Advanced Options and UTM parameters
Adjust the parameters that you’d like, then click Copy embed code
To learn more about how to set up your UTM parameters, check out this article.
Creating an Interactive Embed for a Map
To embed your interactive map on your webpage, insert the link to your map from any point within the Places or Direction tab into the code snippet below, and add it to the destination webpage.
The code snippet is:
<iframe src="INSERT MAP LINK" style="border:0;width:100%;height:80vh;min-height:480px;max-height:760px;" allowfullscreen />
Marketing Your Virtual Tour
Now that your banner embeds are created, you may be looking for additional ways to promote your virtual tour. Click the link below to learn about our best practices and see examples from our customers.
Looking for other embed options?
💡 Need more help?
Send us a message and we will be happy to assist you.