Popup

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

1. Drag the PopupBanner component onto your canvas

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

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

2. Frequency: Set an appropriate frequency to avoid annoying users

   • For important announcements: 24 hours

   • For promotions: 12 hours

   • For general updates: 6 hours

3. Delay: Add a small delay (2-5 seconds) to ensure the page has loaded before showing the popup

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