Tour Setup

Learn how to set up and configure tours in Oppla

Tour Setup

Learn how to set up and configure tours in your application using the Oppla tours package.

Installation

Install Package

npm install @oppla-ai/tours

Import Package

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

Basic Setup

Initialize Tour Manager

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

// Configure global settings
manager.configure({
  debug: false,
  defaultOptions: {
    showProgress: true,
    showControls: true
  }
});

Create a Tour

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

// Register tour
manager.register(tour);

Advanced Setup

Custom Styling

// Configure global styles
manager.configure({
  styles: {
    tooltip: {
      backgroundColor: '#ffffff',
      color: '#000000',
      borderRadius: '4px',
      padding: '12px'
    },
    modal: {
      backgroundColor: '#ffffff',
      color: '#000000',
      borderRadius: '8px',
      padding: '24px'
    }
  }
});

Custom Controls

// Configure custom controls
manager.configure({
  controls: {
    showPrevious: true,
    showNext: true,
    showClose: true,
    showProgress: true,
    customButtons: [
      {
        text: 'Skip',
        onClick: (tour) => tour.stop()
      }
    ]
  }
});

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

Setup Not Working

• Check package installation
• Verify imports
• Check initialization
• Ensure proper configuration

Styling Issues

• Check CSS conflicts
• Verify style properties
• Check for missing styles
• Ensure proper specificity

Next Steps

Tooltips

Learn about tooltip steps

Modals

Learn about modal steps