OM Documentation Extending

How to Dynamically Add MonsterLinks™

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.

Remember to place your code in <script> tags, for example:
<script type="text/javascript">
   // Your JavaScript here..
</script>

 

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");
});
Learn more about adding MonsterLinks to your site for higher conversions.