Advanced Publishing Options For Pop-Ups – Leadpages Knowledge Base

Our standard publishing options make it easy to add pop-ups to your site as a link, button, a timed popup and more.

But some circumstances call for publishing your pop-up in other ways—such as when you don’t have direct access to your site’s code. In this article, you’ll learn how to use parts of your pop-up's publishing code to customize how you post.

Leadboxes®, Pop-Ups and URLs

You can link directly to a pop-up, but it will open in a new tab/page (rather than as a popup). Here’s how to set it up:

Open your pop-up's publishing options and select the “Plain Text Link” tab.
Click Get Code, then copy the entire code snippet.
Paste the code into a plain text editor like Text Edit or Notepad. Avoid using a word processor for this step.
Copy your pop-up's ID, found in between quotes after data-leadbox-popup= as shown below.

Then, use the the following URL structure with your own Leadpages Domain and Leadbox ID (from Step 3 above):

https://<YOUR DOMAIN>.leadpages.co/serve-leadbox/<YOUR LEADBOX ID>

So, if your Leadpages Domain were “xyz” and your Leadbox ID were “1234abcde”, your URL would look like this:

https://xyz.leadpages.co/serve-leadbox/1234abcde

The link you create will lead directly to your pop-up in a new tab or window. If you’re posting it on your site, you can add the script portion of your publishing code to make sure the pop-up appears as a popup (full instructions below).

Enable popup functionality

To make sure your pop-up appears as a popup on your site, you must add the JavaScript portion of its publishing code.

TIP: The script code described below doesn’t change between pop-ups—and only needs to be installed once per page. So you can have multiple pop-ups using the same JavaScript snippet on a single webpage.

Here’s how to add it to your pages… (If you’ve already created a URL for your pop-up, you can skip to Step 4 and use your existing code):

Open your pop-up's publishing options and select the “Plain Text Link” tab.
Click Get Code and copy the entire snippet.
Paste the code into a plain text editor such as Notepad. Avoid using a word processor for this step.
Copy the portion from <script src=… to </script>. Paste it on your webpage, preferably in the <head> section (though the beginning of the <body> section may work as well).

NOTE: Some website builders don’t allow JavaScript., which includes ours. If your site platform doesn’t allow for JavaScript code, you can still use your pop-up's URL, or link to a simple landing page instead.
While creating a link for a pop-up and placing that within an alert bar will open up a pop-up in a different browser, this will not function correctly on our landing pages/site templates if the URL is placed inside a button or html widget, or hyperlinked to an image or text.

If you use a site platform with themes/templates—or don’t have access to your page’s source code—look for a “code injection” or “code widget” option.

Use pop-ups with website widgets

Some page builders (including our own) provide customizable widgets or content “blocks” for adding elements like buttons, text, and more. If your site uses a widget-like system, you may not need to use your full pop-up URL when you create a link.

That’s because some sites automatically add http: or https:

Edit the element you’d like to turn into a trigger, turning it into a link if necessary.
For the link’s destination URL (i.e. its href value), paste in the following: //<YOUR LEADPAGES DOMAIN>.leadpages.co/leadboxes/<YOUR LEADBOX’S DATA ATTRIBUTE VALUE>.
Replace <YOUR LEADPAGES DOMAIN> with your actual Leadpages Domain, then find your pop-up's data attribute value and place it at the end of the URL (find details on those steps above).

You’ll find your pop-up's data attribute value in its publishing code. It’s the quoted string of characters immediately following data-leadbox-popup=.

Set up custom triggers

Our publishing options allow you to create a link, image, or button trigger. But you aren’t totally limited to the trigger options we provide.

In fact, using certain parts of your publishing code, nearly any element on your site can become a trigger (such as an existing button or menu item).

Heads up! Setting up custom triggers requires you to modify default code—but we’ll do our best to make it painless. That said, we aren’t able to troubleshoot issues specific to your site. If you do run into problems when implementing pop-ups on your site, you’ll need to contact your web developer or seek support from your site’s platform.

Add the pop-up JavaScript

First, you’ll need to add your pop-up's JavaScript to any page you’d like a pop-up on. You can use the same steps from the “Enable popup functionality” section above:

Open your pop-up's publishing options and select the “Plain Text Link” tab.
Click Get Code and copy the entire snippet.
Paste the code into a plain text editor such as Notepad. Avoid using a word processor for this step.
Copy the portion from <script src=… to </script>. Paste it on your webpage, preferably in the <head> section (though the beginning of the <body> section may work as well).

Configure a trigger

Once you’ve pasted the JavaScript snippet to your page, you can turn pretty much any HTML element into a trigger, so long as you can access your page’s source code.

The trick is to add your pop-up's data attribute value to existing elements. Any content with that data attribute should turn into a trigger—as long as the page also contains the pop-up JavaScript.

For instance, let’s say you have an image in your sidebar, whose code looks like this:

<img src="author_portrait.jpg" alt="Author Portrait" style="width:200px;height:280px;">

You could add data-leadbox-popup="…" to that image, like so:

<img src="author_portrait.jpg" alt="Author Portrait" style="width: 200px; height: 280px; cursor: pointer; data-leadbox-popup="9898a7676b5454c:1212z3434">

Be sure to copy your pop-up's data-leadbox-popup snippet in full—the code above is only used as an example. You can then paste it at the end with the one specific to your pop-up, as described above. Your image would then turn into a trigger, so visitors who click it would see your pop-up.

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 ↗