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

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

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

tour.start();

Banner with Options

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

Customization

Styling

Customize banner appearance:

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

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

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

{
  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

Tooltips

Learn about tooltip steps

Modals

Learn about modal steps