🎯 Product Tour Generator

Create interactive product tours on any website

1 Install the Bookmarklet

Drag this button to your bookmarks bar:

Tour Editor
💡 Tip: If you don't see your bookmarks bar, press Ctrl+Shift+B (Windows) or Cmd+Shift+B (Mac) to show it.

2 Create Your Tour

  1. Navigate to the website where you want to create a tour
  2. Click the Tour Editor bookmarklet in your bookmarks bar
  3. Click "+ Add Step" to create steps
  4. Click "🎯 Select Target Element" and click any element on the page
  5. Fill in the title and description for each step
  6. Click "💾 Export JS" to download your tour

3 Embed on Your Site

Add the runtime and your exported tour to your website:

<!-- Include runtime -->
<script src="product-tour-runtime.js"></script>

<!-- Include your tour -->
<script src="my-tour.js"></script>

<!-- Start the tour -->
<script>
  ProductTourGenerator.start('your-tour-id');
</script>

✨ Features

🎯 Smart Selectors Auto-generates robust CSS selectors
📦 Export/Import Save and load tours as JS files
🔒 Isolated UI Shadow DOM prevents style conflicts
âš¡ No Install Works instantly via bookmarklet