Product Tour Generator

Welcome to the Demo

This page demonstrates the Product Tour Generator runtime. Click the button below to start an interactive tour that highlights different elements on this page.

Getting Started

The Product Tour Generator helps you create engaging product tours without writing code. Use the Bookmarklet to author tours directly on your website, then export and embed them.

✨

Visual Editor

Create tours directly on your live website. No browser extension required.

🎮

Rich Interactions

Support for clicks, inputs, selections, and automated actions.

📑

Multi-Page Tours

Create tours that span multiple pages with URL detection.

Key Features

No Installation: Works via Bookmarklet on any modern browser
Framework Agnostic: Works with React, Vue, Angular, or Vanilla JS
Smart Selectors: Automatically generates robust CSS selectors
Interaction Modes: Supports Guided (User action) and Automated steps
Themeable: Customize colors, fonts, and tooltips

Embedding a Tour

After exporting your tour from the editor, embed it in your page like this:

                <script src="product-tour-runtime.js"></script>
                <script>
                // Start the tour
                ProductTourGenerator.start('my-tour-id');

                // Or with options
                ProductTourGenerator.start('my-tour-id', {
                debug: true,
                themeOverrides: {
                tooltipBg: '#1a1a2e',
                highlightColor: '#10b981'
                },
                onEnd: () => console.log('Tour complete!')
                });
                </script>
            