Embedding a Tourial Product Tour on Your Website
To embed a Tourial product tour on your website, you copy the iframe embed code from your Tourial account, then paste it into an HTML element within your CMS or page builder (like WordPress, HubSpot, Wix, etc.), adjust the container size as needed to ensure proper display, and preview the page to confirm the tour appears correctly.
To embed a Tourial product tour onto your website, you add a simple iframe code, similar to embedding a video or other rich media.
Step 1: Copy the embed code
- 1.Log in to app.tourial.com and navigate to the Tourial you wish to embed.
- 2.Click on the ⚙️ icon in the top right.
- 3.In the Settings pop-up, select the Embed tab.
- 4.Alternatively, this option is also available under the Share button after your tour is published.
- 5.Click Copy Embed Code.
Step 2: Log in to your CMS/page builder
Log in to your CMS or page builder (such as WordPress, HubSpot, Wix, Unbounce, Webflow, Squarespace, etc.) to access the page's editor.
Step 3: Add the embed code
Depending on your CMS or page builder, add an HTML element to paste the embed code. Usually, there will be a "source code" edit icon that you can click into or add as a new element. Paste the embed code in the location where you want the tour to appear on the page.
Step 4: Preview the page
Preview the page to ensure the tour fits properly inside the iframe and appears as expected.
FAQ & Common Issues
- If your Tourial is cut off on the height or width, first try to make the embed code's container (where you pasted the embed) smaller in your website builder.
- If you can't control the container's width in your website builder, you can wrap the embed code with an additional
<div>to help with adjustment, as shown below:
// Adjust style below as needed - this should work in most cases.
<div style="max-width: 1000px; margin: auto; padding: 10px">
// Paste Embed Code Here - DO NOT edit embed code directly
</div>
Guidance for Specific Website Editors
HubSpot
- Navigate to the page you want to embed the Tourial on.
- Select the section to add the tour, or add a new section.
- Click Insert at the top toolbar, then Embed, and paste the embed code.
- You can set the width and height properties after clicking Insert in the top toolbar.
Squarespace
- Navigate to the page where you want to embed the Tourial.
- Click the + icon where you want it embedded and click Embed on the right-hand side toolbar.
- Click the Embed Data
</>button and paste in the embed code. - You'll need to set the height as described above in Common Issues. Squarespace Help Article on Embed Blocks.
WordPress
- WordPress varies depending on configuration. If you have embedded code before, follow the same process.
- If not, consider using the Code Embed plugin, which has helpful documentation.
Related
Tour Engagement Data | Navless Product Documentation
After setting up the HubSpot Integration, Tourial engagement data—including detailed metrics like time spent, clicks, form interactions, and metadata such as Tourial name, URL, and visitor IDs—is sent via HubSpot cookies to populate contact record activity feeds, enabling users to create targeted lists, workflows, and reports based on visitor interactions with Tourials within HubSpot.
Triggering HubSpot Workflows | Navless Product Documentation
The documentation explains how to connect HubSpot to Tourial and create a workflow trigger based on Tourial engagement data—such as Tourial name and time spent viewing—to automate actions like adding viewers to campaigns, tagging them, notifying teams, retargeting ads, or updating lead statuses within HubSpot workflows.
Instant Scheduling with HubSpot Scheduler
The guide explains how to integrate HubSpot Scheduler with Tourial by connecting your HubSpot account, adding HubSpot Meeting Links, and then embedding these meeting schedulers as clickable CTA buttons either on individual Tour Pages or the Tour Center, enabling users to book meetings via a calendar popup, with a note that when embedded on external websites, the scheduler may open in a new tab which can affect analytics tracking.
Lead Forms with HubSpot | Navless Product Documentation
The documentation explains how to integrate Tourial forms with HubSpot by creating or selecting a HubSpot form, importing and mapping fields (including hidden UTM parameters) into Tourial, styling the form, configuring confirmation modals, and testing lead submission to ensure data flows correctly, while also addressing FAQs about blocking free email providers and UTM parameter passing.
TourPlayer Engagement Data | Navless Product Documentation
The Navless documentation explains that after integrating HubSpot with Tourial, detailed engagement data—such as time spent, CTA clicks, form interactions, and metadata like Tourial Content name and session IDs—is sent via HubSpot cookies to appear in contact record activity feeds, enabling users to create targeted lists, workflows, and reports based on visitor interactions with Tourial Content.
Form Fails | Navless Product Documentation
Navless' Tourial sends email alerts to admins only for three specific form submission failures—Blocked Email, CAPTCHA enabled on HubSpot forms, and missing required fields—when using the HubSpot integration, while Marketo and Pardot users do not receive such alerts, and issues with field mismatches between Tourial and HubSpot forms can cause submission failures with internal notifications handled differently across integrations.