360 Embeds (Group/Post embeds)

Group Embeds allow you to share your Groups/single posts beyond the platform, seamlessly embedding them across your website. With just two lines of code, you can integrate Groups effortlessly while ensuring a consistent user experience without duplication of effort.

Watch our group embeds in action here.

Prerequisites

Before embedding, ensure that:

• This feature is accessible with your current contract.

• Your Groups are already set up. If not, refer to the articles below to help you get started:
  • How to create a group
  • Filtering for Groups.

Navigation Steps: Enabling your Group  Embed

Navigate to your CMS:

• Go to Groups > Edit Group>Tour Embed Info Panel (usually on the right side of your screen)

Enable the ‘Tour Embed’ Option:

• Toggle the Enable Tour Embed button (see screenshot below) and click Update.

Once you enable the embed, three new fields (refer to screenshot below) will appear:

1. The preview of the group is for you to see what it will look like in the front end.
2. The embed code that you need to embed on your external site.
3. An embed option asks you if you would like a Call to Action (CTA) card with your group.

Using the embed code

Add the script anywhere in the head or body of the site in which to embed. The script only needs embedding once regardless of the number of widgets you plan to use.

<script async type="module" src="https://rv-vepple-tour.web.app/vepple-tour.min.js"></script>

Place the following code where you wish the embed to appear. By default, the embed will take the height and width of its parent element.

<vepple-tour loader="false" id="5661" url="qa"></vepple-tour>

By default, the embed will take the height and width of its parent container. If no dimensions are defined, the tour may not display correctly.

Option 1: Set the dimensions directly on the component:

• <vepple-tour loader="false" id="5661" url="qa" style="width:800px; height:800px;"></vepple-tour>

Option 2: Wrap it in a container with set dimensions:

<div style="width:800px; height:800px;">
   <vepple-tour loader="false" id="18099" url="qa"></vepple-tour>
</div>

Please note:

1. The embed will use your current featured image to display as a splash screen over the embed. This functionality can be disabled by adding the attribute of loader=” false” to the embed code generated at the bottom of the CMS page. Refer to this article for further information.
2. Make any amends you would like to embed and republish to see any changes you make in the preview.
3. Copy the embed code from the bottom of the page into the destination web page.

Cookies and Analytics

By default, we add the Google Analytics gtag.js script to embeds when they load. This enables us to measure the usage of the embeds across all sites that use them.

We give the option to opt out of this behaviour by adding the attribute analytics="false" to the embed code generated in the CMS. This is useful in case you wish to toggle on analytics only when a user has accepted cookies via a cookie banner.

You can find out more about Google Analytics gtag.js here.

You can find more information on the specific cookies used by gtag.js here. https://support.google.com/analytics/answer/11397207?

The code snippet used in gtag.js can be found here.