Publish your pop-up

Now that you’ve created a pop-up, it’s time to publish it! In this article, we’ll cover all the basics of publishing pop-ups so you can put them on your site.

The fine print

• Publishing is available on paid plans. If you are in your free trial, you can end your trial early to gain access.
• You’ll need at least one standalone pop-up. If you haven’t created one, check out our guide here.
• This article details the publishing of standalone pop-ups, created under Pop-Ups within Conversion Tools in your navigation menu and meant to be used on websites and blog posts. If you intend to use a pop-up on a landing page or site, you will create an on-page pop-up and publish it with your page or site simultaneously. Learn more here.
• Publishing pop-ups involves copying and pasting code. You don’t need to edit this code, but you’ll need to have access to your site’s code—or some way of injecting code into the webpages where you plan on publishing your pop-ups.
• Timed pop-ups and exit pop-ups do not work on mobile devices. Learn more here.
• We can provide limited support for issues you may encounter when publishing your pop-up. For troubleshooting problems specific to your site, you’ll need to consult your web developer (or site platform’s support options).

3 types of pop-ups

Each type of pop-up is triggered by a unique set of conditions. You can publish a pop-up as any of these three types:

Standard pop-up

Standard pop-ups are triggered by clicking on a link, image or button. In other words, a standard pop-up is triggered manually by a visitor.

Timed pop-up

Timed pop-ups are triggered after a certain amount of time has passed or a certain number of page views have occurred. Timed pop-ups have options to determine how long to wait, or how many times a visitor must view a page, before the pop-up appears. There is also an option to force the pop-up to wait a number of days before it pops up again.

Exit pop-up

Exit pop-ups are triggered when a user on a given page moves their mouse in a fashion that indicates an intent to exit the page. Normally, this is a rapid movement toward one of the topmost corners of the browser window. Exit pop-ups also have an option to force the pop-up to wait a number of days before being triggered again.

Configuring your publishing options

Access publishing options by navigating to Conversion Tools > Pop-Ups in your navigation menu.

Then click the actions menu moreand Publishing Options.

Choosing a trigger

Each pop-up you publish must have a trigger associated with it. Your pop-up will only appear when its trigger is activated. You can choose between five different options:

• a plain text link
• a button
• an image
• a time delay
• exit intent

The first three activate your pop-up when visitors take a specific action—that is, they click a link, button, or image that causes your pop-up to appear.

Timed pop-ups activate after a designated period of time (that you set), and exit pop-ups appear when a visitor moves their cursor near the top of your page (signaling they’re about to leave).

Each trigger provides its own customization options. The button link option, for example, lets you customize the button colors, roundness, and drop shadow.

You can explore other triggers’ options in the publishing modal. Keep in mind, any time you adjust a trigger’s options, it will change the publishing code for your pop-up—so you’ll need to re-paste the snippet to your pages.

Copying and pasting your code

Once you’ve customized your pop-up's trigger, it’s time to put its code on your site. For the steps below, we recommend having your site’s code (for whichever page you’re publishing your pop-up to) open while you work.

1. Navigate to Conversion Tools in your navigation menu.
2. Click the actions menu more for the pop-up you'd like to publish, then Publishing Options.
3. Select your chosen pop-up trigger and click Get Code.
4. Copy the entire code snippet. 
5. Paste the snippet in your webpage’s source code wherever you’d like your pop-up's trigger to appear.

Notice the code snippet will always contain two parts: the pop-up JavaScript loader, and the trigger code.

You don’t need to worry too much about this, but it can be helpful to know how the code is composed. The first part (shown below) only needs to be included once on each webpage. So, if you have multiple pop-ups on the same page, you’ll only need the JavaScript loader for the first one.

<script src="//static.leadpages.net/leadboxes/current/embed.js" async defer></script>

The second part of the code is your pop-up's trigger. You can paste it wherever you’d like it to appear on your page, such as within a blog post or perhaps in your site’s sidebar. That said, in most cases you can absolutely keep the code together, and paste the entire snippet where you’d like your pop-up's trigger.

Keep in mind that timed and exit triggers are invisible—so you can paste your code pretty much anywhere on the page.

Once you’ve pasted your code, we recommend updating your site and testing out your pop-up to make sure everything’s running smoothly!

Publishing timed/exit pop-ups to a landing page or site

While the Leadpages landing page and site builder includes on-page link, button and image pop-ups, you may want to publish a timed or exit intent standalone pop-up from your Conversion Tools on your landing page or site.

1. After copying your pop-ups code as laid out above, edit the landing page or site where you'd like to publish your pop-up, then select the Settings tab.
2. Navigate to the Analytics section within the settings.
3. Paste your pop-up code in the "Head Section Tracking Code" area.
4. Save your changes and make sure to update your page or site.

This can also be accomplished using the HTML widget. The widget will not appear on your landing page or site once you've pasted your pop-up code, as the timed and exit intent pop-ups have invisible triggers.

Troubleshooting your pop-up

If your pop-up doesn’t show up on your page, you can take the following troubleshooting steps:

1. Open your page’s source code (using your browser or site editor).
2. Check to ensure your entire pop-up publishing snippet is within your page’s code.
3. Confirm that your site’s platform supports JavaScript code. (You may need to consult their documentation.)
4. For timed and exit pop-ups, open your publishing options. Make sure you haven’t set any options that prevent your pop-up from appearing (such as an extremely long time delay before launch setting). If you have, adjust the settings temporarily and try viewing it again.
5. If you continue running into problems, try viewing your pop-up in another browser or on another device.
6. Try clearing your cache—especially if your pop-up appears in some browsers but not others.

Still having trouble? Reach out to our support team, and we’ll be happy to help troubleshoot with you.

Updating your pop-up

You can make any changes as needed even after you publish your pop-up. If you make changes to your pop-up itself, you can simply click Update—your published pop-ups should reflect any changes you’ve made anywhere you've published them.

However, if you adjust your pop-up's trigger settings, you’ll need to go back through publishing steps above.

That’s it! Your pop-up should be on your page and you can start collecting opt-ins.

Unpublish your pop-up

Because most publishing of your pop-ups includes inserting its publishing code onto your site or blog, that code must be removed from where it was placed in order to unpublish your pop-up. Simply deleting the pop-up from within Leadpages will not unpublish the pop-up.

If you're struggling to find where you embedded the pop-up embed code on your site or blog, when working in the Google Chrome browser, you can right-click on a page, click View Page Source, then you can hold command+F on your keyboard to search for "leadbox". All pop-up code looks similar and contains the word "leadbox."

Once you've detected the pop-up code on your page, simply delete the code to unpublish the pop-up.

Frequently asked questions

Why does my pop-up open up in a new browser tab/window instead of overlaying the page?

When you only use the pop-up URL (and not the entire code) your pop-up will open in a new tab/window. If you want to have the overlay effect on your page, you must embed the entire code produced under Publishing Options.

The pop-up's JavaScript (the portion of the code that begins with <script> and ends with </script>) does not have to be in the exact same spot as the rest of your embed code, but it must be present on the page.

We typically see pop-ups (embedded using the entire code) opening in a new window or misplaced on your page if:

• Your embed code has been corrupted by other code on the page.
• You have inserted the embed code in the Visual Editor of the page instead of the Text Editor.
• Your pop-up is published using a website creation tool that does not allow for JavaScript code.

If this happens, please save any changes and re-publish your pop-up to get a new copy of the code.

Why does the video on my page restart when my pop-up opens?

In some cases, embedded video code can tangle with pop-up code and cause certain issues. If your video restarts when your pop-up opens, another option you can try is to add the following code to your page:

<script>
window.addEventListener('LpLeadboxesReady', function () {
LpLeadboxes.forceBodyWrap();
});
</script>

The script should ensure your video does not restart when someone opens your pop-up.

How do pop-ups work on mobile devices?

Pop-ups are designed to work normally on mobile devices. However, timed pop-ups won’t appear to comply with best practices (and prevent your pages from receiving higher rankings from search engines like Google).

Similarly, exit pop-ups do not appear on mobile devices, as there’s no consistent way to predict exit intent like there is for desktops. As exit pop-ups are triggered by mouse movement, it will be unlikely that an exit-intent pop-up would work on tablet or mobile, as many use just the touchscreen feature on both. Unless visitors use a mouse or trackpad on a tablet or phone, the exit-intent pop-up will not be triggered. Additionally, most mobile browsers will automatically block pop-ups, therefore disabling timed and exit pop-ups.

Can I use standalone pop-ups on my pages?

You can paste any pop-up's code into an HTML widget on your page. At this time, we don’t have a way to connect standalone pop-ups to existing buttons or elements on landing pages or sites.

Need more help?

You can always get in touch with our support team—just click Support in your Leadpages navigation menu, or submit a ticket ↗