Promo Banner

Overview

The Promo Banner allows you to display promotional messages, announcements, or important notices at the top of your website pages. This banner is typically used for time-sensitive promotions, special offers, or important announcements that you want visitors to see immediately.

Note

Best for: Special offers, limited-time promotions, important announcements, seasonal campaigns, and urgent notifications.

---

Fields

Enable Banner

• Type: Boolean
• Required: No
• Default Value: true
• Purpose: Toggle to show or hide the promo banner
• Note: When disabled, the banner will not appear on any page

---

Main Text

• Type: String
• Required: Yes
• Purpose: Main promotional text displayed in the banner
• Example:
  Special offer: 20% off all services this month!

---

CTA Button Text

• Type: String
• Required: No
• Default Value: Get offer
• Purpose: Text displayed on the call-to-action button in the banner
• Note: If empty, the button will not be displayed
• Example:
  Learn more or Shop now

---

Background Color

• Type: String
• Required: No
• Default Value: green
• Purpose: Background color of the banner
• Options:
  • green – Green
  • orange – Orange
  • purple – Purple
  • blue – Blue
  • red – Red
  • pink – Pink
  • yellow – Yellow
  • gray – Gray

---

Show Modal

• Type: Boolean
• Required: No
• Default Value: true
• Purpose: Whether to show a modal when the CTA button is clicked
• Note: When enabled, clicking the CTA button opens a modal with additional details

---

Modal Title

• Type: String
• Required: No
• Default Value: Special offer
• Purpose: Title displayed in the modal
• Note: Only visible when Show Modal is enabled
• Example:
  Special offer or Limited time offer

---

Modal Image

• Type: Image
• Required: No
• Purpose: Optional image to display in the modal
• Options:
  Supports hotspot for responsive cropping
• Note: Only visible when Show Modal is enabled

---

Modal Description

• Type: Rich Text Section
• Required: No
• Purpose: Description text displayed in the modal
• Note: Only visible when Show Modal is enabled
• Example:
  Detailed information about the promotion, terms and conditions, etc.

---

CTA Button (Modal)

• Type: CTA Button Object
• Required: No
• Purpose: Configuration of the main CTA button in the modal (text, link, and role). If the button text is empty, the button will not be displayed.
• Note: Only visible when Show Modal is enabled
• Subfields:
  • Button Text: Text of the button
  • Link (Internal/External): Object for link configuration (internalExternalLink):
    • Link Type: Internal (page on this website) or External (URL); required once a target is set.
    • For Internal: Choose Link to (Page or Blog (article)), then select Page (reference to page/legal page) or Blog article (reference to article).
    • For External: Provide URL (full URL; allowed schemes: http, https, mailto, tel).
  • Button Role: Primary or Secondary (dropdown); hidden when no button text is set

---

Start Date

• Type: DateTime
• Required: No
• Purpose: Date and time when the banner should appear
• Note: If not set, the banner appears immediately when enabled
• Example:
  2025-01-01T09:00:00Z

---

End Date

• Type: DateTime
• Required: No
• Purpose: Date and time when the banner should no longer be displayed
• Note: The banner will automatically be hidden after this date
• Example:
  2025-01-31T23:59:59Z

---

Usage Example

Typical Configuration

• Enable Banner: true
• Main Text: Special offer: 20% off all services this month!
• CTA Button Text: Learn more
• Background Color: orange
• Show Modal: true
• Modal Title: Special offer
• Modal Image: (Optional promotional image)
• Modal Description: Get 20% off all services this month. Limited time only!
• CTA Button (Modal): Button text Get started, link of your choice, role Primary
• Start Date: 2025-01-01T09:00:00Z
• End Date: 2025-01-31T23:59:59Z

---

Best Practices

• Timing: Use start and end dates to automatically show/hide time-sensitive promotions
• Clarity: Keep the main text short and clear to grab attention quickly
• Visibility: Choose background colors that stand out and match your brand
• Relevance: Only enable banners for important messages to avoid banner fatigue
• Modal content: Use the modal to provide detailed information without cluttering the banner
• CTA buttons: Make CTA button text action-oriented and compelling
• Frequency: Don’t leave banners active indefinitely—update or remove them regularly

---

Key Features

• Easy toggling: Enable or disable the banner with a single switch
• Automatic scheduling: Start and end dates for automatic display control
• Customizable styling: Multiple background color options
• Modal support: Optional modal popup with rich content for detailed promotions
• Rich content: Modal supports rich text and images for comprehensive messaging
• CTA buttons: Configurable call-to-action buttons in both banner and modal
• Global display: Appears on all pages when enabled

---

Where It’s Used

• All Pages
  The promo banner appears at the top of all website pages when enabled

---

Technical Notes

• The banner appears above the header on all pages
• Banner visibility is controlled by the Enable Banner toggle
• Start and end dates use DateTime format and respect the website’s timezone setting
• The banner is responsive and adapts to different screen sizes
• When Show Modal is enabled, clicking the CTA button opens a modal instead of navigating directly
• Modal fields are conditionally visible based on the Show Modal setting
• Modal images support hotspot cropping for responsive display
• Banner settings are stored globally and affect the entire website