The Experience Builder enables users to customize the website experience for visitors through a powerful, user-friendly, drag-and-drop editor. Easily build a multi-step multi-channel acquisition popup, add coupons, and edit the design, all in one place. Additionally, you can add a spinner popup to gamify the acquisition experience, making it more engaging for visitors.
Experiences are built by configuring rules that determine when, where, and how often a popup will display on a desktop or mobile device.
Initial Setup
Navigate to Content > Content Web Content
Click Create New Experience (top right)
Select Popup Experience
Give your experience a name
💡 Naming recommendations:
(Brand Name)* | (Trigger Type) - Campaign/Offer Name/Channels
Ex. ToysRus | Entry 10% OFF Spring Sale
EX. ToysRus | Persistent Button + Spinner Email Only
EX. Exit 20% OFF Email Only
Note: *Brand name is recommended if an account has multiple brands under a shared Domain.
Configure the Trigger Event
The trigger event determines when and where a popup will appear on the site, for example, when exiting the site or on a specific page URL.
Click the Trigger Event on the canvas to open the property panel.
Configure the Trigger Type to determine how a popup appears.
Trigger on page load: Displays when a visitor enters the website. Enter a delay time, between 0-300 seconds, for the popup to be triggered.
Trigger on intent to exit the page: Displays when a visitor shows intent to exit the website.
Desktop: Displays when cursor leaves browser window.
Mobile: Displays when user scrolls down 30% of page threshold and then scrolls back to top.
Trigger on button click: Displays when a visitor clicks a button. Configure the button text, button color, text color, button size, button shape and button alignment.
💡 Helpful Tips
By default the button will appear above all content on a page so visitors can always see and interact with them. If you want to position the button behind specific elements on your site you can set a global override in your site’s CSS:
:root { --override-button-z-index: 100; /* Use a value lower than the element you want above it */ }You can also set or update this value dynamically via JavaScript:
document.documentElement.style.setProperty('--override-button-z-index', '10');
Trigger after scrolling: Displays when a visitor scrolls to the percentage (1-100%) set for the page.
Note: 100% is met when user gets within 200px of the bottom of the page. This ensures the trigger still occurs on pages where the very bottom might not be reachable or is dynamically sized.
Trigger manually: Displays when a visitor clicks an element on the site where the popup script has been manually added, such as a link, button, or image. To use a manual popup, enter a unique name, then apply the onclick event to an element on your site. Manual Popup examples:
Option 1 executes trigger regardless of display rules
onclick="_ltk.PopupFlow.ManualTrigger('UID');"
Option 2 executes trigger AND respects the display rules
onclick="_ltk.PopupFlow.ManualEvaluate('UID');"
Configure the Targeting conditions (optional).
The Display Frequency limits the amount of times an experience will trigger for a visitor.
Show again: (0-365) days after visitor exits the site.
Show after: (0-100) page visits.
Targeting Rules set a series of conditions to show or hide the content on the site. Learn more about setting targeting rules.
💡 Helpful Tips
The triggering methods and targeting rules are set for the entire journey NOT per popup.
Click here to check out different Experience examples.
Multiple trigger types can be set for a single experience. However, when multiple experiences compete with the same display conditions, Experience Builder uses trigger priority (Entry > Scroll > Exit) to determine which experience to show. The Persistent Button works independently and can coexist with other experiences.
When both a Manual and another other trigger events are configured for a single Experience the Manual trigger will initiate the experience:
Using ManualTrigger will show the experience regardless of display rules.
Using ManualEvaluate will show the experience only if it still passes all targeting and display conditions.
Other trigger types (Entry, Exit, Scroll, Persistent Button) will still run according to their own rules.
To reduce Google Lighthouse penalties from popups in Experience Builder configure your experience to use a Scroll trigger (for example, at 20–30% scroll) instead of an Entry trigger that shows on page load. By waiting until the visitor scrolls before displaying the popup, you avoid early layout shifts that can hurt Cumulative Layout Shift (CLS) and related UX metrics, while still engaging visitors after the main content has rendered.
Building the Experience
Configure the Experience
Now that you have determined where and when a visitor will see the popup Experiences, the next steps allow you to customize the subscription experience; subscribe visitor to multiple channels, collect additional personal information, add coupons directly inside the form and even create a multi-step experience.
Content and Action
Build and Design the Spinner Popup
Drag the Spinner Popup element from the Content section to the desired location on the canvas OR click the + and select the Spinner Popup from the content section.
Click the Spinner Popup element to open the properties menu.
Enter a name for the popup.
Click the Edit Design button to complete the 3 step Spinner Design.
Configure the Container section.
These settings control the overall size and appearance of the popup. By default this section is preconfigured, you can leave as is or update the setting to meet your creative goals.
Navigate to the Content tab to configure.
Add a title, spin button name and dismiss text.
Configure up to 7 popup incentives, including the winning incentive.
Click + to add, or the X to remove.
Navigate to the Design tab to create and complete the setup.
Select font family and colors for the base of the spinner, the incentives, title, spin button and dismiss text.
Clicking Apply to save the Spinner design.
💡 Clicking apply during any of the steps will save setting and exit you from design mode.
Configure optional Spinner settings:
Select Close popup when overlay is clicked to allow user to exit the popup when performing that action.
Select type of animation from the dropdown. By default the Fade In animation is selected.
💡 Helpful Incentive Tips
The winning incentive can be displayed by applying it to the subscription popup Experience, directly in the corresponding journey hub messages (like an automated Welcome Series) or adding it to both.
Option 1: Displaying the coupon code in the subscription popup
Displaying the coupon directly in the popup provides subscribers with immediate access to the incentive, potentially speeding up their purchase. However, this approach might reduce their engagement with the email content. Regardless, the attribution will go to the last touch-point, which in this case is the popup experience.
First, create a static coupon code pool.
Learn more about how to create a coupon pool.
A coupon step is required to display the 'winning' incentive. Follow these steps to add the coupon step.
Drag the Coupon from the Actions section OR click the + and select the Coupon from the action section.
⚠️ The coupon action step needs to be placed between the Spinner Popup and subscription Popup Experiences.
Learn more about adding coupons in an Experience.
Option 2: Displaying the coupon code in the message
On the other hand, one of the most common practices is to deliver the incentive through an automated Welcome Series message immediately after the user subscribes to your marketing program. This approach not only provides a timely reward but also encourages subscribers to engage with the welcome emails, setting the stage for higher open and click-through rates in future communications.
Option 3: Displaying the coupon code in both the popup and message
Combining both strategies can maximize the effectiveness of your marketing efforts. By leveraging both approaches, you can balance immediate conversions with sustained engagement, ensuring a comprehensive and effective marketing strategy.
First, create a static coupon code pool.
Learn more about how to create a coupon pool.
A coupon step is required to display the 'winning' incentive. Follow these steps to add the coupon step.
Drag the Coupon from the Actions section OR click the + and select the Coupon from the action section.
⚠️ The coupon action step needs to be placed between the Spinner Popup and subscription Popup Experiences.
Learn more about adding coupons in an Experience.
Follow the steps to add the coupon code to the Welcome Series Journey and Welcome Series messages by reading this article.
Build and Design the Popup
Each popup element added to the canvas represents a single screen a visitor sees when visiting the site. An experience may have one or more screen, based on the goal of the popup.
Drag the Popup element from the Content section to the desired location on the
canvas.Click the Popup element to open the properties menu.
Enter a name for the popup.
Click the Popup Design button.
Either Choose from one of the template options or click Start From Scratch to begin building.
💡 Helpful Tips
The template options will still allow you to update the form's creative, select
multiple channels, and modify the form fields. Follow the steps in the Make Creative Updates/Edits to an existing form.If starting from Scratch, you will need to configure default popup settings. These settings control the overall size and appearance of the popup. If you are satisfied with the preconfigured setting or make updates to them, click Next to begin designing the popup.
Design the popup.
The builder is broken into three components - Settings, Rows, and Content
blocks. Check out this article to learn more about how each component applies to the overall design of your popup.Build the Form. This is how you collect email addresses/phone numbers to
subscribe visitors to your marketing programs.
If desired, select a type of animation from the dropdown.
Click Apply to finish the form setup.
When finished designing the popup, click the Apply button.
Repeat steps 1-9 for any additional popup screens you would like to design.
💡 Click on the popup element on the canvas to use the duplicate feature to make edits based on your existing design.
Testing the Experience
Testing the Experience ensures that the design renders properly on the configured devices and functions according to the configured properties.
Click Start Test Mode at the top right and choose to test the design and configuration on mobile or desktop.
Design Mode - Displays the content, ignoring any rules for easy design testing.
Desktop Testing - Click Preview On Site to view the design on the desktop.
Mobile Testing - Scan the QR code to view the design on your mobile device.
Test Configuration Mode - Displays the content based on the rules and criteria configured for the content.
Desktop Testing - Click Preview On Site to view the design on the desktop.
Mobile Testing - Scan the QR code to view the design on your mobile device.
Click End Test Mode after completing your test to make any needed edits or activate the popup. You can re-enter test mode to test any updates.
💡 After making updates to a design make sure to close any previous test windows to see the updated design.
Activating the Experience
Activating the Experience will immediately launch the popup, allowing all visitors that meet the criteria to experience the popup.
Follow these step activate the experience:
Click Activate
Review the Confirmation popup then check the 'I have read & agree' box and click Activate
💡 Make sure to test all Popups prior to activating the Experience for accuracy.