Legacy popups will still function as they were configured to and can be modified using the existing popup setup.
- NOTE: When creating new popups or migrating a legacy popup to Popup Pro, site visitors will see newly created popups, unless they had previously subscribed to a popup via the selected subscription point. If a site visitor previously closed a popup without subscribing, they will be shown new popups.
In addition to this article, watch the supplemental video below to see the steps in action for migrating a legacy Popup to the new Popup Pro.
Access and edit your legacy popups by navigating from the home menu to Solutions > On-site Acquisition > Settings.
MOVING THE HTML AND CSS
When moving legacy popups to Popup pro, you must copy the HTML from the Sign up and Confirm sections and place them into Popup Pro, along with any style sheets into the CSS tab. Follow the below steps to begin moving legacy popups to Popup Pro.
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 popup with Popup Pro, be sure to disable the legacy popup after you've completed the above steps. Disable your popup by following the below steps.
1. Navigate from the home menu to Solutions.
2. Go to On-site Acquisition.
3. Then Settings.
4. Navigate to the basic setup section.
5. Check No next to Enabled.
6. Navigate to the bottom.
7. Click Save Popup.
Your legacy popup is now disabled.
CONFIGURING YOUR POPUP WITH POPUP PRO
Now that the HTML and CSS have been copied from the legacy popup, you can now configure this in Popup Pro.
1. Navigate from the home menu to Contacts.
2. Go to Popup Pro.
3. Click New Popup.
4. Navigate to the HTML section of the Sign Up form.
5. Navigate to your text editor.
6. Copy the HTML for the Form (the HTML without the style).
7. Navigate back to Popup Pro.
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 Popup Pro.
13. Paste the style formatting.
14. Navigate to the Confirmation section.
15. Navigate to the text editor.
16. Copy the Confirmation HTML.
17. Navigate back to Popup Pro.
18. Paste the HTML on the Confirmation HTML tab.
Be sure to enter a name and save your popup!
- 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 or the Listrak Client Success team before moving to Popup Pro.
- Any URL rules that contain Listrak in the URL, do not need to be copied over, as they are already pre-configured with Popup Pro.
- Be sure to reconfigure your Hide/Show rules from legacy popups. However, these are configured as Show/Don't Show rules within Popup Pro.
- For legacy rules containing an * at the end of the URL rule, be sure to remove the * when configuring with Popup Pro, and configure this rule with URL contains.