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

# 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

```bash theme={null}
npm install @oppla-ai/tours
```

### Import Package

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

## Basic Setup

### Initialize Tour Manager

```javascript theme={null}
// Create tour manager
const manager = new TourManager();

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

### Create a Tour

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

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

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

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

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