Documentation
Everything you need to integrate TourGuide into your application.
Getting Started
ZenGuide is an onboarding widget that helps you create interactive tours for your websites. Follow these steps to get started in minutes.
- Create an account and access your dashboard
- Create a new tour and add your steps (minimum of 5)
- Copy the code for your tour
- Paste the code into your website's HTML or Layout for frameworks
- You can then monitor your tours analytics in the dashboard
Installation
Add the TourGuide script to your website. Place it before the closing</body>tag for best performance.
<!-- Onboarding Tour Widget -->
<Script
src="https://zenguide-widget.vercel.app/widget-bundle.js"
data-tour-id="kh7dw5smxjrbw7epxskr37xzd97wy72e"
data-auto-start="false"
/>Configuration
Customize the widget behavior with these configuration options:
data-tour-id="your-tour-id" // (string) Your unique tour identifier
data-position="bottom-right" // (string) Widget position: 'bottom-right', 'bottom-left', 'top-right', 'top-left'
data-show-avatar="true" // (boolean) Show 3D avatar animation
data-auto-start="true" // (boolean) Start tour on page load
data-avatar-position="center" // (string) Avatar position: 'center', 'left', 'right'
| Option | Type | Default | Description |
|---|---|---|---|
data-tour-id | string | required | Your unique tour identifier |
data-position | string | ‘bottom-right’ | Widget position on screen |
data-show-avatar | boolean | true | Show 3D avatar animation |
data-avatar-position | string | ‘center’ | Avatar position on widget |
data-auto-start | boolean | true | Start tour on page load |
API Reference
Control the tour programmatically using these methods:
// Start the tour
window.TourGuide.start();
// Stop the tour
window.TourGuide.stop();Examples
Here are some example configurations for different use cases:
E-commerce Onboarding
<Script
src="https://zenguide-widget.vercel.app/widget-bundle.js"
data-tour-id="ecom-onboarding-123"
data-auto-start="true"
data-show-avatar="true"
data-position="bottom-left"
/>SaaS Product Tour
<Script
src="https://zenguide-widget.vercel.app/widget-bundle.js"
data-tour-id="saas-product-tour-456"
data-auto-start="false"
data-show-avatar="false"
data-position="top-right"
/>FAQ
ZenGuide is an onboarding tour platform that helps you create interactive tours for your web applications.