The Experience Builder enable 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.
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 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, the next steps allow you to customize the subscription experience. You can enhance the experience by showing different content to subgroups of the larger group.
The following enhancements are available:
Coupon: Configure and display a coupon directly within the inline element. The action generates a coupon tag that can be inserted in the inline editor.
Set Cookie: Create a custom cookie that can be set when a contact qualifies for the experience and sees the inline element. These cookies can be used as targeting for additional inline elements or popups.
Random Split: Test your hypothesis about how the inline content influences viewer behavior by setting up A/B split tests to display different inline elements.
Conditional Split: Evaluate the information you know about the viewer — including subscription status, cookie values, and more — to present them with different inline experiences.
⚠️ Enhancements vary by Experience packages. Please contact your Account team if you would like to discuss upgrading your package.
Content
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.
If users need to navigate back to the previous popup screens, you can add a back button or link to a popup screen.
Drag a button or text element onto the canvas.
If creating a text link:
Highlight the text you would like to link.
Click the Add Action option.
Select Go to Previous Step and click Apply.
If creating a button:
Click on the button to edit properties.
Click Add Action in the side panel.
Select Go to Previous Step and click Apply.
Apply any additional styling to the button or link to fit your branding.
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.
Experience Examples
In the following examples, we will explore several effective popup configuration strategies along with abbreviated setup instructions. These insights are designed to help you optimize your popups for better user engagement, higher conversion rates, and seamless integration across various devices. Whether you're looking to capture leads, promote offers, or enhance user experience, these strategies will provide the guidance you need to set up your popups successfully.
Email & SMS Multi-step Desktop/Mobile Popup with Offer Experience
A multi-step email and SMS acquisition popup that displays a coupon upon confirmation.
Once the email is submitted, prompt the user to enter their phone number. After the phone number is submitted, show a confirmation popup that includes a coupon code or offer as a reward. This popup should be visually appealing, with clear instructions on how to redeem the coupon. Configure the content to display on both desktop and mobile devices. Use additional targeting conditions to further manage the popups should be hidden, like if the visitor is coming to your site via a link from opted in Listrak content (an email or SMS message). This approach not only captures essential contact information but also immediately rewards users, increasing engagement and conversion rates.
Setup Configurations:
Trigger Event:
Rules: Trigger on page load > Delay 5 second
Targeting Conditions:
Show on both desktop and mobile device
Hide when visitor is coming from a Listrak email or SMS message
💡 Suggestion - Also hide on specific pages that may be displaying other offers, incentives or contests.
Coupon Action Step: Coupon pool selection and attribute configurations
💡 The coupon action step must precede the content steps that are using tags.
Content: Popup 1 - Email Signup
Content: Popup 2 - SMS Signup
Content: Popup 3 - Thank you confirmation displaying the Coupon Code
Exit Step
Email & SMS Multi-step Desktop/Mobile Popup Experience
This is similar to the above example, a multi-step email and SMS acquisition popup, but with a few exceptions. To help drive traffic through the subscribed channels, the offer will not be displayed in the confirmation popup. In addition, manage the frequency in which the popup displays to increase subscription rate.
Setup Configurations:
Trigger Event:
Rules: Trigger on page load > Delay 5 second
Targeting Conditions:
Limit the number of times to show again 7 days after visitor exits
Show on both desktop and mobile device
Hide when visitor is coming from a Listrak email or SMS message
💡 Suggestion - Also hide on specific pages that may be displaying other offers, incentives or contests.
Content: Popup 1 - Email Signup
Content: Popup 2 - SMS Signup
Content: Popup 3 - Thank you confirmation with CTA to specific landing page
Exit Step
Email Entry Popup and SMS Exit Popup Experience
In this example you will see how to build a two-phased popup acquisition experience, an effective strategy to engage visitors at different touchpoints during their Experience.
When a visitor first enters the website, they are greeted with an email capture popup. This popup appears shortly after they begin browsing, offering an incentive like a discount or exclusive content in exchange for their email address. Then as the visitor prepares to leave the website, an exit-intent popup appears, prompting them to enter their phone number to receive additional benefits, such as real-time alerts, special offers, or a more significant discount. This SMS capture popup leverages the user’s exit intent, offering a final opportunity to engage them before they leave. The two-phased approach ensures that the visitor has multiple opportunities to connect, increasing the likelihood of capturing both email and SMS information.
⚠️ Due to different configurations, this type of acquisition strategy will require building two separate Experiences.
Experience 1 Setup Configurations:
Trigger Event:
Rules: Trigger on page load > Delay 3 second
Targeting Conditions:
Limit the number of times to show again after 3 page visits
Show on both desktop and mobile device
Hide when visitor is coming from a Listrak email or SMS message OR when subscribed Channel is Email
Content: Popup 1 - Email Signup
Content: Popup 2 - Thank you confirmation
Exit Step
Experience 2 Setup Configurations:
Trigger Event:
Rules: Trigger on intent to exit the page
Targeting Conditions:
Limit the number of times to show again 7 days after visitor exits
Show on both desktop and mobile device
Hide when visitor is coming from a Listrak email or SMS message OR when subscribed Channel is SMS
Content: Popup 1 - SMS Signup
Content: Popup 2 - Thank you confirmation
Exit Step