To embed a Tourial product tour onto your website, you add a simple iframe code, just like when you add a video or any other rich media to a page.

Step 1: Copy the embed code

Login to app.tourial.com and navigate to the Tourial you wish to embed.

Click on SAVE in the top right.

In the Publish & Share pop-up, select the EMBED tab:

If you have mobile ready, toggle on Mobile tour enabled and configure the button.

(This is the button visitors will see to open the Tourial).

Click Copy Embed Code.

Step 2: Log in to your CMS/page builder

Log in to your CMS/page builder (WordPress, HubSpot, Wix, Unbounce, Webflow, Squarespace, etc) to access the page's editor.

Step 3: Copy the embed code

Depending on the CMS/page builder you're using, 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.

From there, paste the embed code in the location you want the tour to load on the page.

Step 4: Preview the page

Preview the page to make sure the tour fits exactly inside the iframe and looks appropriate.

FAQ & Common Issues

  • If your Tourial is cut-off on the height, you may have to explicitly set the height and or width. In the <iframe .... portion, there is a style="" with various css styles set. Inside that section, you can add height="540px"; and width="960px";

Some guidance for specific website editors:

Hubspot

To embed the Tourial into a website hosted by Hubspot, navigate to the page you would like to embed the Tourial on. Select the section to add the tour, or add a new section. Click Insert at the top toolbar, Embed, and paste the embed code. You'll be able to set the width and height properties after clicking Insert in the top toolbar.

Squarespace

Navigate to the page where you would like to embed the Tourial. Click the + icon where you would like 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 from site to site depending on how it's configured. If you have embedded code before, you should follow that same flow. However, if you have not, one plugin that can be beneficial is Code Embed. Their documentation has good walk-throughs.

Did this answer your question?