OM Documentation Extending

How to Trigger MonsterLinks on Hover

Do you want to extend the functionality of MonsterLinks so they trigger the appearance of a campaign on hover instead of click? It’s easy with our JavaScript events API! Use this guide for examples on how to trigger MonsterLinks when the visitor hovers over a page element.

NOTE: All examples in this guide require that you add both the MonsterLink and related campaign embed code to your page before they can function.

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>

Trigger MonsterLink on Hover

Trigger the appearance of a campaign when hovering over it’s MonsterLink.

jQuery(document).ready(function($){
  $('.manual-optin-trigger').live('mouseover', function() { 
    $(this).trigger('click'); 
  });
});

Trigger Specific MonsterLink on Hover of a Specific Element

Trigger the appearance of a campaign when hovering over a specific element on the page that is not a MonsterLink.

Replace .content in the following example with the class of the element you want to trigger a MonsterLink on when hovered over.

Also, replace u6mkwuqm0xf6g94d with your own campaigns unique slug you used when creating the MonsterLink.

jQuery(document).ready(function($){
  $('.content').live('mouseover', function() { // When hovering over any element with the '.content' class - change as you require
    $('.manual-optin-trigger[data-optin-slug=u6mkwuqm0xf6g94d]').trigger('click'); // Change 'u6mkwuqm0xf6g94d' to match your specific optin slug
  });
});

Trigger the appearance of a campaign when hovering over any link containing the rel attribute external.

Replace u6mkwuqm0xf6g94d with your own campaign’s unique slug you used when creating the MonsterLink.

jQuery(document).ready(function($){
  $('a[rel*=external]').live('mouseover', function() { // When any link contains 'external' in the rel attribute
    $('.manual-optin-trigger[data-optin-slug=u6mkwuqm0xf6g94d]').trigger('click'); // Change 'u6mkwuqm0xf6g94d' to match your specific optin slug
  });
});

Looking for more ways to extend the functionality of OptinMonster? Check out our JavaScript events API reference guide!