> ## Documentation Index
> Fetch the complete documentation index at: https://docs.oppla.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Tours Overview

> Learn about Oppla's tour functionality for creating interactive user guides

# 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:

```bash theme={null}
npm install @oppla-ai/tours
# or
yarn add @oppla-ai/tours
```

## Basic Usage

### Initialize Tours

```javascript theme={null}
import { initTours } from '@oppla-ai/tours';

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

### Create a Simple Tour

```javascript theme={null}
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:

```javascript theme={null}
{
  type: 'tooltip',
  target: '#feature-button',
  content: 'This feature helps you...',
  placement: 'right'
}
```

### Modals

Show modal dialogs for important information:

```javascript theme={null}
{
  type: 'modal',
  content: 'Welcome to our new feature!',
  title: 'New Feature',
  buttons: [
    {
      text: 'Got it',
      action: 'next'
    }
  ]
}
```

### Banners

Display announcements and notifications:

```javascript theme={null}
{
  type: 'banner',
  content: 'New features available!',
  style: 'info',
  duration: 5000
}
```

## Advanced Features

### Wait Steps

Wait for user actions before proceeding:

```javascript theme={null}
{
  type: 'wait',
  target: '#complete-profile',
  event: 'click',
  timeout: 30000
}
```

### Fork Steps

Create conditional paths based on user actions:

```javascript theme={null}
{
  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

<CardGroup cols={2}>
  <Card title="Tooltips" icon="comment" href="/tours/tooltip">
    Learn about tooltip steps
  </Card>

  <Card title="Modals" icon="window-maximize" href="/tours/modal">
    Learn about modal steps
  </Card>
</CardGroup>