MonsterLinks is a great way to create two-step campaigns, further leveraging site conversions. In this documentation, we’ll cover how to add MonsterLinks to your site dynamically.
You may need this more advanced method of adding MonsterLinks if you cannot directly add the required HTML link attributes as described in our How to Use MonsterLinks™ to Load Your Popup with Click of a Button doc.
Dynamically adding MonsterLinks can also speed up adding and maintaining multiple instances of identical MonsterLinks on a single page or across your site.
Two required link attributes must be present before any link on your site can manually trigger a campaign to appear: the manual-optin-trigger
class, and the data-optin-slug
attribute containing the slug of the campaign the link should trigger.
Any Javascript can be added to the <head>
or the footer of your site.
<script>
tags, for example:<script type="text/javascript"> // Your JavaScript here.. </script>
- Dynamically add MonsterLinks based on link href
- Dynamically add MonsterLinks based on link class
- Dynamically add MonsterLinks based on link container
Dynamically add MonsterLinks based on link href
You can turn any link on your page into a MonsterLink based on the link’s href
value, in this example, we’ll make all links on the page MonsterLinks where the href
value matches "#"
.
Note: be sure to replace pm6fnflhiocj7cge
in the example below with your campaign’s unique slug.
Your HTML link may look something like this:
<a href="#">Some link on your site.</a>
And the Javascript to turn your HTML link into a MonsterLink:
jQuery(document).ready(function($){ $('a[href="#"]').addClass("manual-optin-trigger"); $('a[href="#"]').attr("data-optin-slug", "pm6fnflhiocj7cge"); });
Dynamically add MonsterLinks based on the link class
You can turn any link on your page into a MonsterLink based on the link’s class
value, in this example, we’ll make all links on the page MonsterLinks where the class
value includes "campaign"
.
Note: be sure to replace pm6fnflhiocj7cge
in the example below with your campaign’s unique slug.
Your HTML link may look something like this:
<a href="#" class="campaign">Some link on your site.</a>
And the Javascript to turn your HTML link into a MonsterLink:
jQuery(document).ready(function($){ $('a[class*="campaign"]').addClass("manual-optin-trigger"); $('a[class*="campaign"]').attr("data-optin-slug", "pm6fnflhiocj7cge"); });
Dynamically add MonsterLinks based on the link container
You can turn any link on your page into a MonsterLink based on the link’s container; in this example, we’ll make all links on the page MonsterLinks where the link exists inside the .monsterlink-container
div.
Note: be sure to replace pm6fnflhiocj7cge
in the example below with your campaign’s unique slug.
Your HTML link may look something like this:
<div class="monsterlink-container"> <a href="#">Some link on your site.</a> </div>
And the Javascript to turn your HTML link into a MonsterLink:
jQuery(document).ready(function($){ $('.monsterlink-container a').addClass("manual-optin-trigger"); $('.monsterlink-container a').attr("data-optin-slug", "pm6fnflhiocj7cge"); });