PromoPopup Component Demo

This page demonstrates the redesigned PromoPopup component with various themes, animations, and trigger options. Click the buttons below to see different popup configurations.

Default Theme with Fade Animation

Theme: default

Animation: fade-scale

Position: center

Trigger: 3s delay

Dark Theme with Slide Animation

Theme: dark

Animation: slide-bottom

Position: center

Trigger: 50% scroll

Gradient Theme with Bounce Animation

Theme: gradient

Animation: bounce

Position: center

Trigger: 10s inactivity

Glass Theme with Background Image

Theme: glass

Animation: blur

Position: center

Trigger: Exit intent

Brand Theme Bottom Slide (No Scroll Lock)

Theme: brand

Animation: slide-up

Position: bottom

Trigger: 2s delay

Center Popup with Scroll Lock

Theme: default

Animation: fade-scale

Position: center

Trigger: 3s delay

Minimal Theme with Exit Intent

Theme: minimal

Animation: rotate

Position: center

Trigger: Exit intent

New Features

Visual Enhancements

  • ✓ 6 theme variants (Default, Dark, Gradient, Glass, Minimal, Bold)
  • ✓ 8 animation types (Fade, Slide, Bounce, Blur, Rotate)
  • ✓ Customizable shadows and backdrop blur
  • ✓ Mobile full-screen mode
  • ✓ Progress indicators for timed popups

Advanced Triggers

  • ✓ Time delay triggers
  • ✓ Scroll percentage triggers
  • ✓ Exit intent detection
  • ✓ Inactivity triggers
  • ✓ UTM parameter matching

Developer Features

  • ✓ TypeScript support
  • ✓ Component-based architecture
  • ✓ Analytics callbacks
  • ✓ Custom event dispatching
  • ✓ A/B testing support

Accessibility

  • ✓ ARIA attributes
  • ✓ Keyboard navigation
  • ✓ Focus management
  • ✓ Screen reader support
  • ✓ Reduced motion support

Usage Example

<PromoPopup
  content={{
    heading: "SPECIAL OFFER",
    subheading: "Limited Time Only",
    bodyText: "<p>Get exclusive access...</p>",
    ctaText: "Learn More",
    ctaHref: "/offer",
    icon: "mdi:star-four-points"
  }}
  imageSrc={offerImage}
  imagePosition={ImagePosition.Left}
  triggers={{
    delay: 5,
    scroll: 50,
    exitIntent: true
  }}
  styles={{
    theme: PopupTheme.Gradient,
    animation: PopupAnimation.SlideBottom,
    mobileFullScreen: true
  }}
  analytics={{
    onShow: () => console.log('Popup shown'),
    onDismiss: () => console.log('Popup dismissed'),
    onCTA: () => console.log('CTA clicked')
  }}
/>