​
Tours Overview

Learn how to create interactive user guides and onboarding experiences using Oppla’s tour functionality.

​
What are Tours?

Tours are interactive guides that help users learn about your application’s features. They can include:
  • Tooltips highlighting specific elements
  • Modal dialogs explaining features
  • Banners for announcements
  • Wait steps for user actions
  • Fork steps for conditional paths

​
Installation

Install the Oppla Tours package: 
npm install @oppla-ai/tours
# or
yarn add @oppla-ai/tours

​
Basic Usage

​
Initialize Tours

import { initTours } from '@oppla-ai/tours';

// Initialize tours
initTours({
  projectId: 'YOUR_PROJECT_ID',
  apiKey: 'YOUR_API_KEY'
});

​
Create a Simple Tour

import { createTour } from '@oppla-ai/tours';

// Create a tour
const tour = createTour({
  id: 'welcome-tour',
  name: 'Welcome Tour',
  steps: [
    {
      type: 'tooltip',
      target: '#signup-button',
      content: 'Click here to create your account'
    },
    {
      type: 'modal',
      content: 'Welcome to our platform! Let us show you around.'
    }
  ]
});

// Start the tour
tour.start();

​
Tour Components

​
Tooltips

Highlight specific elements with tooltips: 
{
  type: 'tooltip',
  target: '#feature-button',
  content: 'This feature helps you...',
  placement: 'right'
}

​
Modals

Show modal dialogs for important information: 
{
  type: 'modal',
  content: 'Welcome to our new feature!',
  title: 'New Feature',
  buttons: [
    {
      text: 'Got it',
      action: 'next'
    }
  ]
}

​
Banners

Display announcements and notifications: 
{
  type: 'banner',
  content: 'New features available!',
  style: 'info',
  duration: 5000
}

​
Advanced Features

​
Wait Steps

Wait for user actions before proceeding: 
{
  type: 'wait',
  target: '#complete-profile',
  event: 'click',
  timeout: 30000
}

​
Fork Steps

Create conditional paths based on user actions: 
{
  type: 'fork',
  conditions: [
    {
      type: 'user-property',
      property: 'plan',
      value: 'premium',
      next: 'premium-features'
    },
    {
      type: 'user-property',
      property: 'plan',
      value: 'free',
      next: 'upgrade-prompt'
    }
  ]
}

​
Best Practices

  1. Keep it Short: Focus on essential features
  2. Be Clear: Use simple, concise language
  3. Test Thoroughly: Verify all steps work correctly
  4. Monitor Progress: Track completion rates

​
Next Steps

Tooltips

Learn about tooltip steps

Modals

Learn about modal steps