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

# Banners

> Learn how to create and customize banners in Oppla tours

# Banners

Learn how to create and customize banners to display important announcements or notifications in your tours.

## Basic Usage

### Create a Banner

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

const tour = createTour({
  id: 'announcement-tour',
  steps: [
    {
      type: 'banner',
      content: 'New feature available!'
    }
  ]
});

tour.start();
```

### Banner with Options

```javascript theme={null}
{
  type: 'banner',
  content: 'New feature available!',
  position: 'top',
  duration: 5000,
  closable: true,
  type: 'info' // 'info', 'success', 'warning', 'error'
}
```

## Customization

### Styling

Customize banner appearance:

```javascript theme={null}
{
  type: 'banner',
  content: 'New feature available!',
  style: {
    backgroundColor: '#ffffff',
    color: '#000000',
    padding: '12px 24px',
    boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
    borderRadius: '4px'
  }
}
```

### Content

Add rich content to banners:

```javascript theme={null}
{
  type: 'banner',
  content: `
    <div>
      <h3>New Feature Available</h3>
      <p>Check out our latest update!</p>
      <button onclick="learnMore()">Learn More</button>
    </div>
  `,
  allowHTML: true
}
```

## Advanced Features

### Interactive Banners

Add interactive elements to banners:

```javascript theme={null}
{
  type: 'banner',
  content: `
    <div>
      <p>Would you like to enable notifications?</p>
      <button onclick="enableNotifications()">Enable</button>
      <button onclick="dismiss()">Dismiss</button>
    </div>
  `,
  allowHTML: true,
  onClose: () => {
    // Handle banner close
  }
}
```

### Conditional Banners

Show banners based on conditions:

```javascript theme={null}
{
  type: 'banner',
  content: 'Welcome to our premium features!',
  showIf: {
    type: 'user-property',
    property: 'plan',
    value: 'premium'
  }
}
```

## Best Practices

1. **Be Brief**: Keep banner content short and clear
2. **Be Visible**: Ensure banners are noticeable but not intrusive
3. **Be Timely**: Show banners at appropriate moments
4. **Be Dismissible**: Allow users to close banners

## Common Issues

### Banner Not Showing

* Check initialization
* Verify content is valid
* Check for z-index conflicts
* Ensure proper positioning

### Styling Issues

* Check CSS conflicts
* Verify responsive design
* Check for overflow issues
* Ensure proper positioning

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