Website Embed

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 the ⚙️ icon in the top right.

In the Settings 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 or width, first try to make the embed code's container (where you pasted the embed) smaller in your website builder.

  • If for some reason you can't control the container's width in your website builder, you can also wrap our embed code with one more <div> to help with adjustment as shown below

Example adjusting container:

// 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>

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.