Tourial Product Documentation
  • 👋Welcome to Tourial!
    • Planning Tours with AI
    • Building Tours with AI
  • 🏁Best Practices & Launching
    • Tour Building Best Practices
    • Before you Launch Check-List
  • 🏗️Building
    • Interactive Tours
      • Record
        • Chrome Extension
          • Downloading the Chrome Extension
          • Troubleshooting
            • Full page screenshot not working
        • Importing Media
      • Edit
        • Interactive Tools
          • Advanced Features
        • Timed Tools
        • Video Trimming
      • Branding
      • Mobile-Optimization
      • HTML Demos (Experimental)
        • Chrome Extension (Capture)
        • Building & Editing
    • Tour Centers
      • Interactive Topics
      • Editing Styles
      • Navigation & Format
      • Supported Content in Tour Centers
        • Adding Google Slides to your Tour Center
      • Upfront Prompts
      • Mobile Optimization
  • 🌎Sharing
    • Embedding Demos
      • Embedding Interactive Demos
        • Lightbox Embed
        • Website Embed
      • Embedding Tour Centers
      • Updating your Embed Code when changes are made
    • Tour Link Sharing
    • Tour Center Link Sharing
    • Share Links
      • How to create a share link
  • GIF Generation
  • 🔢Analytics
    • Tour Analytics
    • Tour Center Analytics
  • ⚙️Admin & Settings
    • Inviting your team
    • Setting your Account Branding
    • Workspaces
      • Create & Add Users to a Workspace
    • User Management
    • White Label Your Account & Content
    • Tourial Forms
      • Form Fails
      • Hyperlinking in Tourial Forms
  • ➕Integrations
    • HubSpot
      • Instant Scheduling with HubSpot Scheduler
      • Tour Engagement Data
        • Slack Notifications with HubSpot
        • Triggering HubSpot Workflows
        • Pushing Engagement Data from HubSpot to SFDC
      • HubSpot Reporting Setup
      • TourPlayer Engagement Data
      • Lead Forms with HubSpot
      • How do I hide the chatbot?
      • How do I hide the Cookie Banner?
      • FAQs
    • Marketo
      • Lead Forms with Marketo
      • Engagement Data with Marketo
        • Slack Notifications with Marketo
        • Approving Marketo Custom Activities
      • Marketo Reporting Setup
    • Partners
      • G2
      • TrustRadius
    • Pardot
      • Lead Forms in Pardot
      • Engagement Data with Pardot
      • How to Create a Pardot Dashboard to Measure Tourial's Impact
    • Salesforce
      • Leads Forms in Salesforce
      • Engagement Data with Salesforce
        • Add Tourial Engagement to record's Lightning page
        • Add Tourial Engagement as Salesforce tab
        • Create an SFDC report using Engagement Data
      • How to Create a Salesforce Dashboard to Measure Tourial's Impact
    • Zapier
    • Calendly
    • Chili Piper
    • Cross-Frame Events
      • Tours
      • Tour Centers
    • Slack
  • Security
    • SSO (Single Sign-on)
    • Uptime Reports
    • Form Compliance
Powered by GitBook
On this page

Was this helpful?

  1. Sharing
  2. Embedding Demos
  3. Embedding Interactive Demos

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.

PreviousEmbedding Interactive DemosNextWebsite Embed

Last updated 3 days ago

Was this helpful?

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

  1. The Tourial Lightbox embed code and HTML can be found under the Embed option in the Settings Menu -

  1. The code can also be found in the Publish/Share menu -

  1. You'll see two sections appear that you'll copy and paste to your HTML document.

  2. 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.

  1. 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.

🌎