Listrak's Experience Builder allows you to add an age gate, restricting contacts who are not above a certain threshold, from accessing the site. Age gates can be displayed using Inline Content, or, more commonly, displayed using a popup.
Listrak can set a browser cookie to remember the previous selection of repeat site visitors.
⚠️ Listrak recommends consulting with your legal team to determine if this setting is compatible with compliance regulations in your industry or local.
Initial Setup
Navigate to Content > Experience Builder.
Click Create New and select the type of Experience where the age gate will appear (e.g. Popup).
Select the Merchant associated with the Experience.
Drag the content element on to the canvas.
Use a template or start from scratch to set the main layout.
Drag an age gate content element onto the design canvas in the desired location.
Configuring the Age Gate
Once the age gate is on your canvas you can configure the required age as well as the appearance of the age input.
Click Configure Age Gate on the canvas.
In the Content tab, open each dropdown to configure the settings.
Age Requirement
Minimum Age: The age someone must be to access the content. Match this age with compliance regulations in your region or industry.
Age Retention Timeframe: The number of days the site can remember a user's age input. If a user should confirm their age on each site visit, set the counter to 0.
Age Verification
Native: Use the default date input for the browser or system a contact is using to view the content.
Dropdown: Displays the date input as 3 separate dropdowns for Month, Day, and Year.
Button: Displays two buttons asking a user to confirm they are of legal age or not of legal age, rather than inputting a specific date. The two buttons can displayed vertically (stacked) or horizontally(side-by-side) and can differ on desktop and mobile.
Date Format: For the native and dropdown options, select the order of the fields as well as how the data is separated (e.g. MM/DD/YYYY or DD.MM.YYYY).
Submit Button
Submit Button Label: Add the text that will appear in the submit button or the text of the of the button asking the user to confirm if they are of legal age (button age verification only).
Button Location: Choose the location of the button in relation to the age verification form: right or bottom.
Stack on Mobile: Enable the toggle to display the button under the age verification form on mobile, regardless of the button location set above.
Remember Me
Show Checkbox: Display a checkbox allowing the user to enable a cookie that lasts for the age retention timeframe set in step 3B.
Checkbox Label: Set the display text that appears next to the checkbox. You can include HTML code to format clickable links.
Checked by Default: Autochecks the Remember Me checkbox.
Completion Action
On Pass: If a contact meets the age requirement, choose to close the age input, send the contact to the next step in an experience, or send the contact to a specific URL.
Show Message Before Action: Set the text that will display to a user before taking the next action.
Display Duration: The number of seconds the message will appear before taking the action.
On Fail: If a contact does not meet the age requirement, choose to close the age input, send the contact to the next step in an experience, or send the contact to a specific URL.
Show Message Before Action: Set the text that will display to a user before taking the next action.
Display Duration: The number of seconds the message will appear before taking the action.
Style the Age Gate Element
In the styling tab you can set properties such as text colors, button colors, and popup background colors around the age input. Each card controls an element of the styling and is outlined below.
Container: Controls the background behind the age gate input. You can add a background color, change transparency, and adjust the padding.
Input Fields: Adjust the appearance of the date input field including font family, font size, and borders. This card does not appear if you selected the button age verification option.
Submit Button: Adjust the button used to submit the date input including font family, button background color, and padding. This card does not appear if you selected the button age verification option.
Remember Me: Adjust the font family, font size, and checkbox size if you have enabled the remember me function.
Completion Message: Adjust the font family, font size, and font color if you have the Show Message Before Action enabled.
Pass Button Style: When using the button age verification option, adjust the appearance of the button that confirms someone is over the age limit, including text size, font family, and hover background color.
Fail Button Style: When using the button age verification option, adjust the appearance of the button that confirms someone is under the age limit, including text size, font family, and hover background color.
Advanced Settings
In the Advanced tab, you can turn on the Enable Console Logs tab. This allows you to track the logging of your age gate and troubleshoot potential issues.
Creating an Age Gate + Acquisition Popup Flow
If you want to collect subscriber information after the user confirms they are of legal age, you can build a single flow that first shows the age gate and then shows additional acquisition forms to users who are of legal age.
💡 The flow below outlines the steps you should add to the experience. Configure each step, such as the trigger step, to meet your brand needs. New to Experience Builder? Learn more about the available components.
Navigate to Content > Experience Builder.
Click Create New Experience.
Give your experience an identifiable name.
Add 3 popup steps to the canvas.
If desired, updated the properties of the Trigger Step.
Name the first popup Age Gate.
Click on the first popup to edit the properties. You can start from scratch or use a template.
Drag an age gate element into the popup.
Configure the age gate to meet your compliance regulations.
Add any additional design elements (e.g. logo).
Set the following settings for the completion action of the popup.
On Pass: Go to Next Step.
On Fail: Go to URL
💡 Add a URL that removes the contact from your main e-commerce site. For example, direct them to educational content or a search engine. You can also direct contacts to a Listrak landing page.
Click on the second popup and name it [[Marketing Channel]] Acquisition.
Select start from scratch of template to design the popup.
Configure the form to collect contact information.
Learn more about configuring an acquisition popup.
💡 Add additional popup steps on the canvas to collect multiple identifiers (e.g. email address and phone number) on separate screens.
Click on the third popup and name it Confirmation.
Select start from scratch of template to design the popup.
Configure confirmation popup.
In this example flow, contacts will see the age gate 2 seconds after landing on any page of the site. Contacts who meet the age requirement will then see a second screen where they can sign up for email or SMS marketing. Lastly, after submitting the form, subscribers will see a confirmation screen letting them know they have successfully submitted their information.