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!

In this article, you will learn how to trigger MonsterLinks when the visitor hovers over a page element.

Before You Start

Here are some things to know before you begin:

  • 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($){
	// Change 'rt78pcbzrddo1y7w0yq3' to match your specific campaign slug
	var campaignSlug = 'rt78pcbzrddo1y7w0yq3';

	$('body').on('mouseover', '[href="https://app.monstercampaigns.com/c/' + campaignSlug + '/"]', function() { 
		window['om' + campaignSlug].startShow();
	});
});

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($){
	// Change 'rt78pcbzrddo1y7w0yq3' to match your specific campaign slug
	var campaignSlug = 'rt78pcbzrddo1y7w0yq3';

	// When hovering over any element with the '.content' class - change as you require
	$('.content').on('mouseover', function() {
		window['om' + campaignSlug].startShow();
	});
});

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($){
	// Change 'rt78pcbzrddo1y7w0yq3' to match your specific campaign slug
	var campaignSlug = 'rt78pcbzrddo1y7w0yq3';

	// When any link contains 'external' in the rel attribute
	$('a[rel*=external]').on('mouseover', function() {
		window['om' + campaignSlug].startShow();
	});
});