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 Specific MonsterLink on Hover of an External Link
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();
});
});
