Tour Management

Learn how to manage and control tours in Oppla

Tour Management

Learn how to manage and control tours in your application using the Oppla tours package.

Basic Usage

Initialize Tours

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

// Create a tour
const tour = createTour({
  id: 'feature-tour',
  steps: [
    {
      type: 'tooltip',
      target: '#feature-button',
      content: 'Try our new feature!'
    }
  ]
});

// Initialize tour manager
const manager = new TourManager();

// Register tour
manager.register(tour);

Start and Stop Tours

// Start a tour
manager.start('feature-tour');

// Stop a tour
manager.stop('feature-tour');

// Pause a tour
manager.pause('feature-tour');

// Resume a tour
manager.resume('feature-tour');

Advanced Features

Tour Events

Listen to tour events:

manager.on('start', (tourId) => {
  console.log(`Tour ${tourId} started`);
});

manager.on('stop', (tourId) => {
  console.log(`Tour ${tourId} stopped`);
});

manager.on('step', (tourId, stepIndex) => {
  console.log(`Tour ${tourId} moved to step ${stepIndex}`);
});

Tour State

Get tour state:

// Check if tour is running
const isRunning = manager.isRunning('feature-tour');

// Get current step
const currentStep = manager.getCurrentStep('feature-tour');

// Get tour progress
const progress = manager.getProgress('feature-tour');

Multiple Tours

Manage multiple tours:

// Register multiple tours
manager.register(tour1);
manager.register(tour2);
manager.register(tour3);

// Start all tours
manager.startAll();

// Stop all tours
manager.stopAll();

// Get all registered tours
const tours = manager.getTours();

Best Practices

1. Be Organized: Keep tour IDs consistent and meaningful
2. Be Efficient: Only register tours when needed
3. Be Responsive: Handle tour events appropriately
4. Be Clean: Clean up tours when they’re no longer needed

Common Issues

Tour Not Starting

• Check tour registration
• Verify tour ID
• Check for conflicts
• Ensure proper initialization

Tour State Issues

• Check event handlers
• Verify state management
• Check for race conditions
• Ensure proper cleanup

Next Steps

Tooltips

Learn about tooltip steps

Modals

Learn about modal steps