Digioh Campaign Carousel Extension

Tactical Rundown

Purpose: Enable Digioh users to create rotating banner-style content that cycles through multiple pages in a single campaign, regardless of user interaction or idle time.

Use Cases:

• Promotional carousels
• Rotating featured products
• Multi-CTA banners

How it works: This extension uses metadata to control whether the carousel behavior is active, what pages are included, and how often the rotation should occur.

Configuration Steps

1. Add Metadata to the Campaign:
   • carousel_enabled: true
     • Activates the carousel behavior.
   • carousel_interval: number (in seconds)
     • Sets the interval between page changes.
   • 
   • carousel_page: true (add this on each page you want included)
     • Identifies which pages should be part of the rotation.
   • 
2. Ensure Pages Are Created:
   • Create all the pages you want included in the carousel within the same campaign (e.g., main, ep1, ep2).
   • Assign the carousel_page: true metadata to each one.
3. Script Behavior:
   • When carousel_enabled is true, the extension:
     • Gathers all pages with carousel_page: true
     • Sets a timer using carousel_interval
     • Automatically rotates through the listed pages
     • Loops back to the first page after the last one
4. Limitations:
   • This version only supports page transitions within a single campaign.
   • Cross-box transitions are not currently supported.

UI Controls and Dynamic Icons

You can enable interactive UI controls for your carousel (Next, Previous, Play, Pause) to help users navigate through the different pages in the campaign.

These controls are dynamically generated with JavaScript and can display emojis, icon font classes, or image URLs.

1. Add Metadata to the Campaign:
   • carousel_controls: true
     • Activates the carousel’s UI controls.
     • 
   • carousel_icon_prev: img source
   • carousel_icon_next: img source
   • carousel_icon_play: img source
   • carousel_icon_pause: img source
     • Defines the button icon for the control (Emoji, Font class, or Image URL).
     • Example:
       • carousel_icon_prev = ⬅️
       • carousel_icon_next = ➡️
       • carousel_icon_play = fas fa-play
       • carousel_icon_pause = https://example.com/pause.svg
     • 
2. Behavior:

• When the Next or Previous button is clicked, the carousel pauses automatically, and the pause icon switches to the play icon.
• If the carousel is paused and there is no user interaction for 20 seconds, it will resume playing automatically.
• If carousel_controls is not enabled, the carousel will operate as before (auto-rotation only, no UI controls).

Metadata Reference

Notes

• The rotation does not rely on user inactivity.
• You can stop rotation by setting carousel_enabled to false.
• Works great for passive promotional displays.