Skip to content
KOVEXON Docs

Promo Banner

Overview

Section titled “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.

Fields

Section titled “Fields”

Enable Banner

Section titled “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

Section titled “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

Section titled “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

Section titled “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

Section titled “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
Section titled “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
Section titled “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
Section titled “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)

Section titled “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

Section titled “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

Section titled “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

Section titled “Usage Example”

Typical Configuration

Section titled “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

Section titled “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

Section titled “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

Section titled “Where It’s Used”
  • All Pages
    The promo banner appears at the top of all website pages when enabled

Technical Notes

Section titled “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