What is Inline Content?
Inline Content is a feature in Experience Builder Premium that allows you to add or change an element on your website. Inline Content gives you full control over the appearance of the content and which contacts see the new content with powerful targeting tools.
What are some use cases for Inline Content?
Display a banner for existing loyalty members
Change the main site image based on if a user is currently subscribed to your marketing program
Display a coupon on the home page after sign up
Add a banner to the cart page based on cart total
Creating Inline Content
Initial Creation
Navigate to Content > Experience Builder.
Click New Experience.
In the popup, select Inline Experience.
If necessary, select the domain associated with the content.
Once the editor loads, name your inline experience.
Configure the Trigger Event
The trigger event controls who sees the content and how it is prioritized on the site.
Click on the Trigger step on the canvas.
Select a Trigger Type to determine how the content will display.
On Page Load: The banner element will appear without the user having to take any action.
Set a numerical value for the delay if you would like the element to display after the rest of the content.
Set the numerical value for the delay to 0 to load the element with the rest of the page.
Manual: The banner element will only appear when the user interacts with another element, such as clicking a button.
Copy the first code to show the element on click, regardless of anything known about the site visitor.
Copy the second code to restrict who can see the element by evaluating the targeting rules.
Select a Position. This controls how the new content displays in relation to the surrounding site components.
Above: Displays the new inline element directly above the selected element.
Below: Displays the new inline element directly below the selected element.
Inside: Insert the new inline element as a nested element within the selected element.
Replace: Swap the selected element with the new inline element.
Manual Embed: Copy the code generated by Listrak and put it in a location of your choice in your website code. Select a Priority. The priority helps determine which inline element should show if you have multiple enabled. Select from Low, Normal, or High priority in the drop-down.
You will select the HTML element onsite after you have designed the content.
Select a Display Priority, which determines which inline content experience a visitor will see if they are eligible for multiple active experience. Select from one of 3 priorities: Low, Normal, High.
💡 If multiple experiences have the same priority they will be sorted in alphabetical order based on the name to determine which experience a visitor will see onsite.
Configure the Targeting Options
If the inline element should only show for some contacts, you can use the targeting options to set the rules the contact must meet in order for the element to display.
Click on the Targeting tab at the top of the Trigger configuration.
Select the check box if you want to adjust the Display Frequency.
Show Again After X Days: Insert a numerical value if the contact should only see the configured element once every X number of days when visiting the site.
Show Again After Y Page Visits: Insert a numerical value if the element should be visible in the same session after the user visits Y number of web pages.
⚠️ The element must be present on the page a contact is visiting when they reach the threshold in order for the element to display.
Set the Targeting Conditions to evaluate the contact to determine if an element should display. Click Build Conditions to set the targeting rules.
A contact who meets criteria in the Show section will see the new element.
A contact who meets the criteria in the Hide section will not see the new element.
Click Apply to save the conditions.
Learn more about the types of criteria in the Targeting section.
Design the Inline Content
With the targeting in place, you can now design the element that will display inline on the webpage.
Drag an inline element onto the page.
Click on the step to edit the properties.
Give the inline element a name.
Select an animation from the drop-down, or select None to appear on load.
Click Start from Scratch to begin designing the content.
Configure the layout settings including:
Width: Insert a pixel value or set to auto to adjust as content is added to the element.
Height: Insert a pixel value or set to auto to adjust as content is added to the element.
Margin: Select a pixel margin for all sides, or enable to toggle to adjust separately.
Border: Apply a border by adjusting border style, weight, and color around the entire element.
Border Radius: Round the corners of the border by adding a radius.
Inline Background: Add a color and transparency for the entire element. Click Select Image to apply a background image.
Close Button: Use the toggle to enable contacts to close the element and style the button with a specific color. If the element is displaying critical information, you can toggle the close button off so that it will always display.
Custom CSS: If desired, you can add custom CSS to control how the element will display on the site.
Drag elements from the Row tab to create content with the desired layout.
Drag one or more element from the Content tab into each row to customize your design.
Configure each element to meet your design goals. Learn more about the available elements in the editor.
Enhancing Inline Content Experiences
In addition to the targeting that controls if an inline element is displayed in the trigger step, 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.
Determining the Location of the Content Element Onsite
Once you have designed your content, you will need to tell Listrak where to insert it on your website. This will also give you the opportunity to test how the content appears when combined with your other web elements.
📌 Use Listrak Workbench browser extension to determine the location. Haven't download the extension yet? Download now.
Click on the Trigger Event.
In the side panel, click Launch Selector to use the Listrak Workbench extension to help determine the position of the content.
⚠️ The button will only function if you have the Listrak Workbench extension installed and are using the Google Chrome browser.
Select the Custom Selector radio button to manually select the location onsite.
Open the Listrak Workbench extension.
Navigate to the Build tab, if needed.
💡 If the Build tab does not appear, click on the Settings gear in the top right and toggle on Always show Build Mode
Click the Select Element button to enable Build mode.
If needed, navigate to the page of your site where the inline content should appear.
Click Enable Element Selection Tool to begin the selection process.
Navigate to the selected element.
The element will appear surrounded by a dotted line until selected when the line will turn solid.
Click Clear Selected ID to start the process over.
Once you have selected the element, click Use Selected Element.
In the Position section, select the position that corresponds with Step 3 in the Trigger Event.
Click Preview to show the new content piece.
Click Save Selector.
You will be automatically taken back to the Listrak platform Inline editor.
💡 Click Change if you need to update the selector at any time.
You are now ready to place the content in test mode or activate the new inline content on the site.
To seamlessly test the experience you can use the Listrak Workbench Chrome extension. Learn more about testing using Listrak Workbench.
If you do not have Listrak Workbench installed, use the testing popup to view the content onsite.
⚠️ When using the Test Configuration option you must meet any targeting criteria applied to see the new experience.
Click Activate to launch the content for eligible contacts.
🧰 Listrak Workbench Extension Resources