Example BannerFlex Banner 🚀
PopupBanner Component
A customizable popup banner component that can be used to display announcements, promotions, or calls-to-action.
Features
Customizable title, subtitle, and button text
Adjustable font styles for all text elements
Customizable button color
Configurable display frequency and delay
Optional z-index warning message
Smooth open/close animations
Usage
Drag the PopupBanner component onto your canvas
Configure the properties in the right sidebar:
Basic Properties
Show in editor: Toggle whether the popup is visible in the editor
Title: The main heading text
Subtitle: The supporting text below the title
Button Text: The text displayed on the call-to-action button
Button Link: The URL the button will navigate to when clicked
Button Color: The background color of the button
Font Styling
Title Font: Customize the font style for the title
Subtitle Font: Customize the font style for the subtitle
Button Font: Customize the font style for the button text
Timing Controls
Frequency to show (hrs): How often the popup should appear (in hours)
Delay to show (secs): How long to wait before showing the popup (in seconds)
Z-Index Settings
Show Z-Index Message: Toggle the visibility of the z-index warning message
The component will show a warning if the parent container's z-index is less than 10
Best Practices
Z-Index: For proper layering, set the parent container's z-index to 10 or higher
Right sidebar -> Styles -> Add new -> Z index -> Set to 10
Frequency: Set an appropriate frequency to avoid annoying users
For important announcements: 24 hours
For promotions: 12 hours
For general updates: 6 hours
Delay: Add a small delay (2-5 seconds) to ensure the page has loaded before showing the popup
If you are using on a Template to apply to multiple screens, try and put the component at the bottom of the layers to avoid overlapping
Technical notes
The popup uses localStorage to track when it was last shown