Skip to main content
All CollectionsWeb ContentPopups
Custom Popup Editor Guide
Custom Popup Editor Guide

Learn how to create custom Email Acquisition Popups

Support avatar
Written by Support
Updated over 2 years ago

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.

⚠️ 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 [email protected].


Custom Popup Setup

To begin, click the New Web Content button > select Custom Popup as the type of web content.

⚠️ If a contact utilizes an ad blocker in their browser it may interfere with the appearance of the popup. You may want to include text on the page telling a contact to disable any ad blockers if they have issues viewing popups.

Design

  1. Enter a name for the popup.

  2. Click Edit in the Popup Design section to select one of the template options.

    πŸ’‘ A mobile layout will automatically be inherited from desktop. This is the same design that was just configured above.

    • Lightbox

    • Lightbox with an image

    • Fullscreen

    • Banner

    • Scroll Box Left/Right

    • Custom

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

  4. Click Apply Template to apply.

    πŸ’‘ If you are using custom HTML, this is where you'd insert the HTML for the popup. Configure the Signup form HTML/CSS

  5. Configure the Confirmation popup

    • 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.

  6. Click Next to Configure the popup.

Configuration

  1. Select the Trigger Type

    • 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 the button text, button color, text color, button size, button shape and button alignment.

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

      Option 1
      <a onclick="_ltk.Modal.load('Popup Name')">SUBSCRIBE</a>

      Option 2
      <button onclick="_ltk.Modal.load('Popup Name')">SUBSCRIBE</button>

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

  2. Targeting - configure the location and frequency the the popup will be displayed

    • URL rules: Choose to Show or Don't show the popup on a particular page(s).

    • Device: Choose to show the popup based on the device type of desktop or mobile.

    • Engagement & Behavior: Choose to show by the page session, if a visitor entered from a Listrak email or show again after X number of days, weeks, months or years.

  3. Subscription Settings

    • Select a Merchant (if applicable)

    • Select a subscription point from the drop-down menu.

      • 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.

  4. Advanced Settings (optional)

    • Select if you'd like to close the popup when the user clicks the overlay.

  5. Click Next to Confirm setup.

Confirm

  1. Confirm and preview the popup settings completed during the Design and Configuration steps.

  2. Test Popup (optional)

    • Test the display by adding the design parameter ?ltkpopupshow=Popup Name to the end of the page URL.

    • Test the configuration, such as trigger and targeting, by adding the configuration parameter ?ltkpopuptestmode=1 at the end of the page URL.

      1. πŸ’‘ 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.

      πŸ’‘ The page count will only increase when navigating to a new page, not when refreshing or hitting the back or forward buttons.

πŸ“Œ At anytime you can choose to Save, Activate or Close out of the builder.

  • Save: Will save the progress made on the setup of the popup - status will display as Draft.

  • Activate: Will publish the popup.

  • Close: Will exit you from the page, any changes made without saving first will be lost.


Popup Reporting

Learn more about Popup Reporting/Analytics


πŸ’‘ Helpful Resources

Did this answer your question?