Creating a New Popup

Popups are an easy way to increase your lists subscribers - especially if a customer is just being introduced to your brand. Popups typically capture: new website visitors, existing customers revisiting the site to make a purchase, or shoppers seeking an incentive prior to making a purchase. You can create popups that cater to each of these groups of customers. 

NOTE: Legacy popups will still function as they were configured to and can be modified using the existing popup setup. If you'd like to update these to Popup Pro, please copy the HTML from the Sign up and Confirm sections and place them into Popup Pro. Please move any style sheets into the CSS tab. If you have any questions, please contact success@listrak.com.

Learn how to create a new popup by following the below steps. 

1. Navigate from the home menu to Contacts then Popup Pro.

When creating a new popup, there's a three step workflow on the left-hand side. Before getting started, be sure to enter a name for the popup. 

DESIGN

SELECT A TEMPLATE

First, select a template. 

• Lightbox
• Lightbox with an image
• Fullscreen
• Banner
• Scroll Box Left/Right
• Custom

NOTE: A mobile layout will automatically be inherited from desktop. This is the same design that was just configured above.

Lastly, select an animation. The animation options are only available if you've selected a template with animations, such as: lightbox and lightbox with an image.

When you've completed selecting a template/animation, click Apply Template.

After the template has been selected and loaded, you will notice that the HTML is now populated on the design page. If you are using custom HTML, this is where you'd insert the HTML for the popup.

CONFIRMATION

After the Sign Up portion of the popup has been designed, configure any confirmation design or settings you’d like to apply. 

The confirmation of a popup may include messaging thanking the customer for signing up or a URL redirect ushering subscribers to perform other actions, such as completing a preference center, beginning the account register process, or taking them to additional content.

A URL redirect encodes the email address from a submitted popup. Once submitted, the email address is encoded, prepopulating the email field of a form, while keeping user information private. 

CONFIGURATION

TRIGGER TYPE

Click here for a more in-depth explanation of triggers and targeting types.

• Entry: Displays when a visitor enters the website. Enter a delay time for the popup to be triggered.
• Exit: Displays when a visitor shows intent to exit the website.
• Scroll: Displays when a visitor scrolls down the page, the popup pops on depth.
• Button: Displays when a visitor clicks a button. Configure these styles here.

• Manual: 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

• <a onclick="_ltk.Modal.load('Popup Name')">SUBSCRIBE</a>
• <button onclick="_ltk.Modal.load('Popup Name')">SUBSCRIBE</button>
• <a onclick="_ltk.Modal.load('Popup Name')"><img src="Image URL"></a>

TARGETING

Target your popup by URL, device, or engagement and behavior. Click here to learn more about popup targeting.

SUBSCRIPTION SETTINGS

Before setting up a popup, be sure to have previously set up your subscription point integration. Click here to learn more about the different methods to setting up subscription points. Once your subscription points have been configured, select a Merchant (if applicable), then select a subscription point from the drop-down menu.

ADVANCED SETTINGS

Lastly, select if you'd like to close the popup when the user clicks the overlay.

Once you've configured the above, click Next.

CONFIRM

The last step is to review the popup. On the third step of the workflow, you will see at-a-glance confirmation including:

• Desktop Design
• Animation, if applicable

Click the Preview button to view a live, rendered popup for desktop and mobile.

Next, review the popup configurations: the trigger type and the selected subscription point. If you've selected a manual trigger type, the directions to apply this on-site will also appear here.

Lastly, test your popup by following the below steps.

1. Enable the popup test mode.
2. Test the display by adding the design parameter ?ltkpopupshow=Popup Name to the end of the page URL.
3. Test the configuration, such as trigger and targeting, by adding the configuration parameter ?ltkpopuptestmode=1 at the end of the page URL.

NOTE: If you're testing the popup configuration, you need to clear cookies each time to retest.

Page of Session can be tested using the ?ltkpopuptestmode=1 parameter. Test by navigating to the page the popup should appear on. For example, if you want to display the popup on page 2 of the session, then navigate 2 pages.

NOTE: The page count will only increase when navigating to a new page, not when refreshing or hitting the back or forward buttons.

If additional edits are required at this time, you can navigate through the workflow on the left-hand side. Click Save to save the popup.

ACTIVATING THE POPUP

After you've tested and saved your popup, you are now ready to activate your popup. Click the green activate button in the lower left-hand corner of the screen.

You will be prompted to confirm to activate the popup. Confirming activation makes the popup live on your site.

Congratulations, your popup is now live!

After activating or saving a popup, changes may take a few minutes to complete before being available on-site.