ConvertedU Marketing Library Webinar Blog

Need help? You've come to the right place

What's New Getting Started Drag and Drop Standard Builder Integrations Center

Advanced Publishing Options for Drag & Drop Leadboxes

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

But some circumstances call for publishing your Leadbox 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 Leadbox’s publishing code to customize how you post.

In this article

Leadboxes and URLs

    Enable popup functionality

    Use Leadboxes with website widgets

Set up custom triggers

    Add the Leadbox JavaScript

    Configure a trigger

Leadboxes and URLs

Unlike our Standard Leadboxes, Drag & Drop Leadboxes don’t expose a URL in their publishing code. However, you can link directly to a Drag & Drop Leadbox. It just requires a few extra steps—here’s how to set it up:

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

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

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

So, if your subdomain 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 Leadbox 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 Leadbox appears as a popup (full instructions below).

Enable popup functionality

To make sure your Leadbox 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 Leadboxes—and only needs to be installed once per page. So you can have multiple Leadboxes 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 Leadbox, you can skip to Step 4 and use your existing code):

  1. Open your Leadbox’s publishing options and select the “Plain Text Link” tab.
  2. Click Get Code and copy the entire snippet.
  3. Paste the code into a plain text editor such as Notepad or AtomAvoid using a word processor for this step
  4. 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. If your site platform doesn’t allow for JavaScript code, you can still use your Leadbox’s URL, or link to a simple Leadpage instead.

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 Leadboxes 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 Leadbox URL when you create a link. 

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

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

You’ll find your Leadbox’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 Leadboxes on your site, you’ll need to contact your web developer or seek support from your site’s platform. 

Add the Leadbox JavaScript

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

  1. Open your Leadbox’s publishing options and select the “Plain Text Link” tab.
  2. Click Get Code and copy the entire snippet.
  3. Paste the code into a plain text editor such as Notepad or AtomAvoid using a word processor for this step
  4. 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 Leadbox’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 Leadbox 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 Leadbox’s data-leadbox-popup snippet in full—the code above is only used as an example. at the end with the one specific to your Leadbox, as described above. Your image would then turn into a trigger, so visitors who click it would see your Leadbox.

(Updated May 15, 2017)


Please let us know if you have additional questions.

You can always file a support ticket if you have additional questions by clicking the Support button in your dashboard shown here or clicking here to file a support ticket.

Was this article helpful?
Powered by Zendesk