Lightbox Embed

A lightbox embed code allows you to easily display your Tourial in a pop-up modal when a user clicks on a button or link.

In addition to being able to embed a Tourial directly on your website using the code generated under the Embed tab, you can also add it to your site using Tourial's Lightbox Embed code.

Using the Lightbox Embed Code

The Lightbox code can be found in under the SAVE button in the upper right corner of the Tourial studio
Select the Embed tab in the Publish & Save pop-up
Under "Add Tourial To Website", select the Embed in Page dropdown, then select the Tourial Lightbox option from the dropdown menu.
You'll see two sections appear that you'll copy and paste to your HTML document.
1. The class name is what you need to add to your HTML tag that triggers the Lightbox - this could be a button, image, link, etc.
2. The next section is the code you'll add at the end of the <body> in your HTML document

Note: If you've already created a mobile version of your Tourial that you'd like to display, be sure to select Mobile Tourial Enabled to trigger the mobile version for users on mobile devices.

See how the lightbox works on a website CTA button IRL below!

PreviousEmbedding Interactive Demos NextWebsite Embed

Last updated 1 year ago