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 Experience Builder
Click Create New Experience (top right)
Select Popup Experience
Give your experience a name
Configure the Trigger Event
The trigger event determines when and where a popup Experiences 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 Rules
Configure the Targeting conditions (optional)
💡 Helpful Tips
The triggering methods and targeting rules are set for the entire journey NOT per popup.
Check out this article to learn more about the different Targeting configurations.
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.