Skip to content

Instantly share code, notes, and snippets.

@nrdobie
Last active December 22, 2020 19:50
Show Gist options
  • Save nrdobie/48f0c0438e7f6ecaf7b45105563abe41 to your computer and use it in GitHub Desktop.
Save nrdobie/48f0c0438e7f6ecaf7b45105563abe41 to your computer and use it in GitHub Desktop.
Custom Leadbox Links

Drag & Drop Leadbox

Start with the Plain Text Link and copy the code from the box.

<script src="//static.leadpages.net/leadboxes/current/embed.js" async defer></script> <a href="" data-leadbox-popup="1410f2073f72a2:1165b2d55f46dc">Click here to subscribe</a> 

You'll need to include the script tag somewhere on your page. When creating the Leadbox link you can use any HTML element by adding the data-leadbox-popup attribute from the generated code, if you need to use an href on an <a> tag you can convert the data-leadbox-popup to an href by adding //{{YOUR LP SUBDOMAIN}}.leadpages.co/leadboxes/{{DATA ATTRIBUTE VALUE}}. For example data-leadbox-popup="1410f2073f72a2:1165b2d55f46dc" becomes href="//nickdobie.leadpages.co/leadboxes/1410f2073f72a2:1165b2d55f46dc".

<script src="//static.leadpages.net/leadboxes/current/embed.js" async defer></script>
<!-- ... -->
<img src="promo.jpg" data-leadbox-popup="1410f2073f72a2:1165b2d55f46dc" />
<!-- or -->
<a class="my-custom-button" href="//nickdobie.leadpages.co/leadboxes/1410f2073f72a2:1165b2d55f46dc">Custom Button</a>

Standard Leadbox

Start with the Standard Leadbox and copy the code from box.

<a href="https://nickdobie.leadpages.co/leadbox/14735a773f72a2%3A1165b2d55f46dc/5738196700758016/" target="_blank" style="background: rgb(255, 0, 0); color: rgb(255, 255, 255); text-decoration: none; font-family: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 16px; line-height: 20px; padding: 10px; display: inline-block; max-width: 300px; border-radius: 5px; text-shadow: rgba(0, 0, 0, 0.247059) 0px -1px 1px; box-shadow: rgba(255, 255, 255, 0.498039) 0px 1px 3px inset, rgba(0, 0, 0, 0.498039) 0px 1px 3px;">Click Here to Subscribe</a><script data-leadbox="14735a773f72a2:1165b2d55f46dc" data-url="https://nickdobie.leadpages.co/leadbox/14735a773f72a2%3A1165b2d55f46dc/5738196700758016/" data-config="%7B%7D" type="text/javascript" src="https://nickdobie.leadpages.co/leadbox-1483995422.js"></script>

From the code you'll need the href from the <a> tag, and the entire <script> tag.

<a class="my-custom-button" href="https://nickdobie.leadpages.co/leadbox/14735a773f72a2%3A1165b2d55f46dc/5738196700758016/">Custom Button</a>
<!-- ... -->
<script data-leadbox="14735a773f72a2:1165b2d55f46dc" data-url="https://nickdobie.leadpages.co/leadbox/14735a773f72a2%3A1165b2d55f46dc/5738196700758016/" data-config="%7B%7D" type="text/javascript" src="https://nickdobie.leadpages.co/leadbox-1483995422.js"></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment