Skip to main content

Adding Banner Embeds Into Webpages

Learn how to create and add banner embeds of your virtual tour onto your website

Written by Mrittica Rahman
Updated today

Banner Embeds are responsive visual placements that, when clicked, open a tour or scene 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.

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 and your internal web teams time.

Creating a Banner Embed For a Tour/Scene

  1. Click on the Tours or Scenes tab in the CMS

  2. Find the tour or scene you want to embed and click on the three dots for more options

  3. Click Share.

  4. Copy the embed code that appears at the top.

  5. 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

There are also some sizing recommendations to consider when creating your banner embeds:

  • When the viewport width is > 200 px, the card’s maximum width is capped at 600px.

  • When the viewport height is ≤ 200 px, the card expands to fill the entire height.

  • When the viewport width is >= 1920 px, the card scales up by 1.5×.

Creating a Banner Embed for a Homepage

  1. Navigate to your virtual tour website and decide on the tour group you want to create an embed for.

  2. Copy the URL from your browser.

  3. At the end of the URL, add the parameter ?banner=true . For example https://app.madewithcircuit.com/explorer/home/featured-tours?banner=true

To change the title of the tour group on the banner embed, use the parameter &title= Insert Custom Title Name .

For example: https://app.madewithcircuit.com/explorer/home/featured-tours?banner=true&title=Explorer College Virtual Tours
​
The minimum recommended height for homepage banner embeds is 400px. The width recommendation is 100% to fit the width of your page area.

Customizing your Banner Embed

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

  1. Dark Mode: add the parameter &mode=dark to revert to your primary brand colour configured in the CMS. For example:

  2. Transparent background: to add a transparent background to the embed, use the parameter &background=transparent which will remove the blurred image background (default) and replace it with a transparent background on the embed. For example:

  3. Colour fill background: to add a colour fill background to the embed banner, use the parameter &background=12345 where the numbers represent the HEX code for your desired colour.

  4. Language customization: to change the language of the banner embed, use the parameter &lng=language code.

  5. Check out a full list of URL parameters that you can use to customize your embeds.

  6. Check out our article on marketing your virtual tour for extra tips on how to promote your virtual tour using embeds with examples from customers!

    Looking for more embed options?

Learn how to create an Interactive Embed

💡 Need more help?

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

Did this answer your question?