MonsterLinks are a great way to create two-step campaigns, further leveraging site conversions. In this documentation we’ll cover how to dynamically add MonsterLinks to your site.
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 the process of adding and maintaining multiple instances of identical MonsterLinks on a single page, or across your site.
There are two required link attributes that 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 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:
<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 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:
<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 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:
<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"); });