Guided Tour Embeds – Vepple

Guided Tour Embeds allow you to share your best, most engaging, and visually-rich Guided Tours beyond the platform, seamlessly embedding them across your website. With just two lines of code, you can integrate Guided Tours effortlessly while ensuring a consistent user experience without duplication of effort.

Why do Guided Tour Embeds matter?

Increase Engagement: Reach a wider audience by embedding interactive Guided Tours across multiple web pages.
Effortless Updates: Update content once in the CMS, and it reflects everywhere.
Simple Integration: Just toggle a field and copy-paste a snippet to embed the tour.
Enhanced User Experience: Includes content spots, info spots, a mini-map, and ambassadors for a richer guided experience.

Watch our Guided Tour embeds in action here.

Prerequisites

Before embedding, ensure that:

This feature is accessible with your current contract.

Your Guided Tours are already set up. If not, refer to the articles below to help you get started:

Navigation Steps: Enabling your Guided Tour Embed

Navigate to your CMS:

Go to Guided Tours > Edit Guided Tour>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:

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

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="5661" url="qa"></vepple-tour>
</div>

Please note:

By default, 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 guidance on this.
Make any amends you would like to embed and republish to see any changes you make in the preview.
Copy the embed code from the bottom of the page into the destination web page.
Confirm that you have given the Guided Tour embed a height and width where it is being embedded as per instructions generated on the embed code.

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.

Prerequisites

Navigation Steps: Enabling your Guided Tour Embed

Using the embed code

Cookies and Analytics

Related articles