All Collections
Web Content
Popups
Migrating Legacy Popups to a Custom Popup
Migrating Legacy Popups to a Custom Popup

Learn more about how to move your legacy popups to a custom popup.

Support avatar
Written by Support
Updated over a week ago

Legacy popups will still function as they were configured to and can be modified using the existing popup setup. 

Access and edit your legacy popups by navigating to Solutions > On-site Acquisition Settings

MOVING THE HTML AND CSS

When moving legacy popups to custom popup, you must copy the HTML from the Sign up and Confirm sections and place them into a custom popup, along with any style sheets into the CSS tab. Follow the below steps to begin moving the legacy popup.

1. Navigate to the bottom of a legacy popup.
2. Copy the code from the Form HTML section.

3. Navigate to a text editor.
4. Paste the code into the text editor.
5. Navigate back to the legacy popup.
6. Copy the Confirmation HTML.
7. Navigate to a text editor.

8. Paste the code.

EDITING THE HTML AND STYLE

1. Navigate to the Form HTML.
2. Locate the <style> tag located toward the bottom of the HTML.

3. Cut all of the style formatting up until the </style> tag.
4. Paste this in a new tab of the text editor.

5. Remove the opening and closing style tags from the text (<style type=""> and </style>).
6. Next, open a find and replace in the text editor.
7. First, find ltkmodal-overlay, and replace with ltkpopup-overlay.

8. Then, find ltkmodal-container, and replace with ltkpopup-container.

9. Navigate to the Confirmation HTML.
10. Locate the <style> tag located toward the bottom of the HTML.
11. Delete all of the style formatting, as the style inherits from the form HTML.

DISABLING A LEGACY POPUP

Before configuring your new custom popup, be sure to disable the legacy popup after you've completed the above steps. Disable your popup by following the below steps.

  1. Navigate to Solutions > On-site Acquisition Settings.

  2. Navigate to the basic setup section.

  3. Check No next to Enabled.

  4. Navigate to the bottom.

  5. Click Save Popup.

Your legacy popup is now disabled.

Configure the popup using the custom web content popup editor

Now that the HTML and CSS have been copied from the legacy popup, you can now configure this in popup.

1. Navigate to Content > Content Web Content.
2. Click New Web Content.
4. Click Custom Popup.
5. Navigate to your text editor.
6. Copy the HTML for the Form (the HTML without the style).
7. Navigate back to the popup editor.
8. Paste this HTML on the HTML tab for Sign Up.

9. Click the CSS tab.
10. Navigate to the text editor.
11. Copy the style formatting, without the <style> tags.
12. Navigate back to the popup editor.
13. Paste the style formatting.

14. Navigate to the Confirmation section on the bottom of the page.
15. Navigate to the text editor.
16. Copy the Confirmation HTML.
17. Navigate back to the popup editor.
18. Paste the HTML on the Confirmation HTML tab.

Be sure to enter a name and save your popup!

ADDITIONAL CONSIDERATIONS

  • Please preview and test your new popup using the query strings on the confirmation page. Click here to learn more about testing your popup. Using the preview on the configuration page may not interpret the old popup correctly.

  • If you've requested additional features on your popup such as segmentation being captured on the confirmation page or subscribing to multiple lists, please reach out to your Account Manager before moving to a custom popup.

  • Any URL rules that contain Listrak in the URL, do not need to be copied over, as they are already pre-configured with a custom popup.

  • You will need to reconfigure your Hide/Show rules from legacy popups. However, these are configured as Show/Don't Show rules within a custom popup.

  • For legacy rules containing an * at the end of the URL rule, be sure to remove the * when configuring with a custom popup, and configure this rule with URL contains.

Did this answer your question?