Interactive Elements are available in the Experience Builder Premium Package. Contact your Account team to learn more about the available packages.
Interactive Elements can be added to Popup or Inline Content Experiences. Once you have configured the basic setup of your experience, you can add any of these elements from the Content tab of the designer.
Timer
The countdown timer creates a sense of urgency by counting down to a specific day and time, for example the end of the annual sale, or set a counter for a set duration, for example a timer counting down from 10 minutes to incentivize checkout.
The following settings are available when configuring a timer.
Timer Type: Select the type of timer.
Countdown to a Day/Time: Calculates how much time is remaining until a specific day or time.
Fixed Countdown: Starts the countdown with a set timeframe (e.g. 15 minutes).
Configuration: Set the date the timer should end of the fixed number of days, minutes etc. For the Day/Time type, you also have the following options:
Browser Value: The end time is set based on the value stored in a cookie or local browser storage. You can also select the date format for the browser values.
Coupons: Counts down to the expiration of a Listrak Coupon [[link]] expiration (if provided) set in a coupon step of an experience or based on the user's link click. You can count down based on the newest coupon sent to the customer contact or to the coupon that expires soonest.
Display Settings: Enable or disable labels such as days, minutes etc.
Completion Action: When the timer reaches the end of the countdown choose to close the experience step, go to the next experience step, or send the user to another URL. You can also configure a cookie that is set for the user.
After setup, style the following components in the Style tab.
Container: Configure the background color, padding, and alignment of the timer element.
Timer Style: Select one of the preset styles including LCD, Modern, and Flip Card, as well as card color and mobile layout.
Typography: Set the font family, color, size and other properties for the timer and any labels you have enabled.
Reveal
Capture a sense of mystery by requiring a contact to interact with an element to reveal their offer. Animate the experience by scratching to reveal or opening an envelop to show the available discount or offer.
The following settings are available when configuring the Reveal element:
Reveal Type: Choose the animation type.
Scratch Off: The user can use their cursor to 'scratch' the cover to reveal the offer.
Envelop: The user can open the envelop to reveal the deal.
Blur: The user can click to un-blur an area to reveal the deal.
Label: For each reveal time, select the message that guides the user to take the desired action.
Incentive Text: The offer that a user reveals after taking the action.
Post-reveal Message: Enable the optional toggle to set up a message that will appear after the offer is shown. You can set a duration for the message appearance.
Completion Action: Determine what occurs after the offer is revealed, such as going to the next step in the configured experience, navigating to a URL, or taking no action.
After setup, style the following components in the Style tab.
Container: Configure the background color, padding, and alignment of the animated element.
Overlay: A scratch off-specific setting that sets the colors used in the scratch-able experience.
Envelop: An envelop-specific setting that sets the colors used in the envelop and paper that displays the offer.
Blur: A blur-specific setting that sets the blur percentage and styling of the label.
Incentive: Set the text color and font family of the incentive text.
Post-reveal Message: Set the text color and font family of the message.
Inner Border & Shape: A scratch off-specific setting that allows you to set an inner border type and color.
Coupon
The coupon element displays a coupon code in an experience on the site with an element enabling users to easily copy the coupon code. You can display dynamic coupons using a coupon tag from the current or another experience or a static code.
The following settings are available when configuring the Coupon:
Layout: Overall display settings
Offer Layout: The way a coupon is displayed in the element.
Pill: A simple display of the coupon code and a copy icon.
Card: A stylized element instructing user to use the code at checkout.
Barcode: The coupon is displayed in both a text and barcode format.
Orientation: Display the entire offer layout in a horizontal, vertical left facing, or vertical right facing orientation.
Card Style: A card-only setting that sets the display style to coupon, voucher, ticket, or gift.
Barcode Type: A barcode-only setting that formats the coupon as a QR code or using Code 128.
Barcode Dimensions: A barcode-only setting to format the height and width of the barcode.
Offer Details: Set the tagline and type of coupon or offer.
Offer Code Type
Manual: Input a specific coupon code tag configured in the a coupon step of any experience or set a hard-coded offer in the text input.
Dynamic: Select from the coupons in experiences and a fallback if no coupons have been set or no coupons are available.
Coupon Pool UID: Allows you to add a specific coupon pool UID for a coupon pool to only use codes from an explicit coupon pool.
Active Coupon - Expires Soonest: If a user has passed through multiple coupon steps in experiences, the coupon that expires the soonest.
Active Coupon - Expires Latest: If a user has passed through multiple coupon steps in experiences, the coupon that expires the latest.
Card Content: Displays additional details beyond the coupon code.
Offer Title: A card-only setting that announces the offer to users up to 15 characters (e.g. Exclusive Code).
Offer Description: A card-only setting that offers additional details about the code (e.g. An offer for you).
Disclaimer: Include any details a user may need to know about the code (e.g. Only one coupon per order). This does not display for the Pill layout.
Fallback Offer Prefix Text: Text added before the expiration date (e.g. Expires at).
Expiration Date Type: How the date is formatted which is set in the Fallback Expiration Date field.
Text: Input a text string to display the expiration (e.g. Today).
Static: Set a specific calendar date for expiration.
Dynamic: Set an offset that sets expiration at X number of days after the experience is displayed (e.g. 7 for a week after viewing).
Expiration Date Format: Display the expiration date in one of six formats (e.g. MM/DD/YYYY or September 1, 2026).
Click to Copy
Disable the Click to Copy functionality using the toggle.
Set a HEX color for the checkmark that replaces the copy icon when a user copies the coupon.
After setup, style the following components in the Style tab.
Container: Configure the background color, padding, and alignment of the animated element.
Drop Shadow: Use the toggle to enable a drop shadow for the Pill or Card type by customizing the shadow offset and color.
Typography: Set the font family, color, size and other properties for the code, description, and disclaimer text (if enabled).
Badging: A card-specific element that adds a graphic to the card to draw attention to the offer.
Badge Type
None
Stamp: Select from one of five round-styled badges.
Stamp Style: Select from circle, stamp, square, sun, and star styles.
Size: Select the pixel size of the badge.
Banner: A graphic that crosses the corner of the card design.
Badge Text: The text included in the badge (e.g. Save). The banner will display approximately 10 characters while the stamp will vary by size.
Position: Display the badge at the top left or top right of the card.
Background Color: Input a HEX value for the badge color.
Text Color: Input a HEX value for the text of the badge.
Font: Select the font family, font size, and font weight for the text of the badge.
Shopify customers can automatically apply the coupon when clicked by enabling the toggle in the Advanced tab.
Progress Bar
The progress bar displays the contact's progress towards a threshold, for example, cart total over a specific value. With the progress bar, you can nudge contacts towards higher order values by showing how close they are to unlocking free shipping.
The following settings are available when configuring the Progress Bar:
Layout: Select the Progress Bar option or a Text only option, which changes the text based on the progress.
Behavior: Select what is being measured (e.g. number of items in the cart) and the threshold (e.g. 3).
Animation Settings: Select the animation style and duration when using the Progress Bar layout.
Offer Text: Customize the text that displays for either layout including displaying the remaining amount to meet progress, currency, and message positioning.
Additional Progress Label configurations include:
Amount Remaining - label positioning and label text.
Threshold Progress X/Y with label positioning.
Success Message: Determine what appears when the user meets the goal including the option to add animated confetti.
Call to Action Button: Enable this setting to display a button when the user meets the success threshold. Select a URL for button, it's display location and more.
Completion Action: When the reaches 100% choose to do nothing, close step, go to the next experience step, or send the user to another URL. After setup, style the following components in the Style tab. Configure delay before completion ranging from 0-30 sec.
After setup, style the following components in the Style tab.
Container: Configure the background color, padding, and alignment of the animated element.
Progress Bar Appearance: Configure the progress bar style, color, and border.
Offer Text: Set the font family, color, size and other properties for the message text.
Success Message: Set the font family, color, size and other properties for the message text.
Call to Action Button: Set the hover color, font family, and other properties for the call to action button.
Next, configure the Advanced options:
Reward Tiers: Show unique offer text when predefined threshold values are met in the progress bar.
Milestone Markers: Add a line to the progress bar that highlight a mid bar threshold that can be used to highlight incremental offers or thresholds that are achieved.
Spin to Win
Add gamification to any experience by displaying a clickable element that cycles through 3-10 different offers before landing on your predetermined winning offer. Gamification can increase acquisition rates by causing the user to become invested in the offer they will receive.
The following settings are available when configuring the Spin to Win element:
Spin Type: Determines the style and layout of the spin to win element.
Single: One single line of text spins through the offers before landing on the winner.
Three Column: A slot machine-style layout with 3 columns of offers that spin in various directions before landing on the winner.
Wheel: All offers are displayed on a wheel that spins through offers before landing on the winner.
Wheel Type: Determine percentage of the wheel that is displayed: Full Wheel or Half Wheel.
Wheel Position: Display the half of the wheel on the Left or Right of the element.
Incentive: The offers displayed on the spin to win element.
Winning Element: Select a specific element from the configured list or random to allow users to land on any incentive.
Incentives: List between 2-10 different incentives. Add a new incentive by clicking the plus sign or add emojis by clicking the smile icon.
Show Confetti: Enable the toggle to display confetti once a winning incentive is chosen.
Animation: Enable the autospin on open toggle to start animation as the page loads or on a delay. If the toggle is not selected the user must click on the spinner to start the animation.
Spin Button: Display a button that triggers the spinner animation rather than requiring a user to click on the spinner. Configure the text of the button when toggled on.
Completion Action: Determine what occurs when an incentive is selected.
Delay: Set a delay in second between the end of the animation and the completion action.
Action: Select from: Do Nothing, Close, Go to the Next Step in the Experience, or Go to a URL.
After setup, style the following components in the Style tab.
Container: Configure the background color, padding, and alignment of the animated element.
Column Design: A three-column specific design option where you can add a background color, border, and change the radius of the three spinning columns.
Wheel: A wheel-specific design option where you can customize the color of each slice that contains an incentive and set the color of the dividers and inner circle.
Arrow: A wheel-specific design option where you can change the appearance and color of the offer selector.
Typography: Set the font family, color, size and other properties for the incentive text.
Spin Button: If enabled, set the font family, color, button width and other properties.
In the Advanced tab, you can set a manual trigger to use an element on your site to start the wheel animation and enable console logging for troubleshooting.
Pick a Prize
The Pick a Prize element displays a series of icons which allows a contact to select one and then move on to the next step in an experience to reveal their winning offer.
The following settings are available when configuring the Pick a Prize element:
Prize Icon: Select between 2-4 different icons that will appear for a user to pick from. Select from the predetermined icon list or upload a custom icon.
Animation: Choose to leave the icons static of their animation direction. You can also set the animation that occurs when a user hovers of their selected prize and the speed of the animation effects.
Reveal: Choose to add an animation once a user has selected their winning icon, for example add confetti to the selection reveal.
Completion Action: Choose the action that occurs once the user picks a winner, for example going to the next step in an experience or going to a unique URL.
After setup, style the following components in the Style tab.
Container: Configure the background color, padding, and alignment of the animated element.
Icons: Set the pixel size, color, and background color for the icons.
Layout: Set the spacing between icons.
Cursor: Customize the appearance of the cursor when the user hovers over a prize from the list or upload your own custom design.
Animated Text
The animated text element allows you to display a short message using engaging animated styles such as typewriter or scrolling ticker to draw attention.
The following settings are available when configuring Animated Text.
Animation Type: The animation treatment applied to the text.
Scrolling Ticker: An animation the creates a vertical scrolling text bars similar to news tickers. Choose to scroll from left to right or right to left.
Typewriter: Reveal the text one letter at a time.
Word Pop: Reveal one word at a time with a pop effect.
Line Slide: Reveal one row of text a a time from any direction.
Highlight Reveal: One word at a time is highlighted with an overlay of your selected color.
Flip Text: Display one row of text at a time with a flip animation between lines.
⚠️ Your content must have multiple lines of text for the animation to display.
Speed: Control the pace of the animation with a drag bar controlling the speed on a scale of 1 (slowest) to 10 (fastest).
Message Text: The text that will appear as animated text. Click Enter to create multiple lines of text within the textbox. Click on the smiley icon to add emojis.
Completion Action: Specify what occurs when the user clicks on the animated text. Select from: Do Nothing, Close Step, Go to Next Step (must have additional steps in your experience), or Go to URL.
After setup, style the following components in the Style tab.
Container: Configure the background color, padding, and alignment of the animated element.
Typography: Set the font family, color, size and other properties for the message text.