OM Documentation Extending

How to Dynamically Add MonsterLinks™

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.

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:

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