How to Make Every External Link a MonsterLink

Would you like to add even more opportunities for your visitors to convert before leaving your site forever? One way to do so is by turning every external link on your site into a MonsterLink.

With our walkthrough below, you can copy and paste the JavaScript into your site, with only a couple modifications.

  1. Create a MonsterLink Campaign
  2. Copy the Unique ID and Numeric ID for Your Campaign
  3. Copy and Paste the JavaScript Example Code to Your Site
  4. Update the Code with Your MonsterLink’s Unique ID and Numeric ID
NOTE: This guide is for advanced users only and is to serve as an example of what you can do with OptinMonster. No support will be provided for this implementation on your site.

The first thing you need to do is to create a MonsterLink on OptinMonster and confirm the campaign is live. In addition, you also need to confirm your site-wide embed code is added to your site.

Step 2 – Copy the Unique ID and Numeric ID for Your Campaign

Go to your campaign dashboard.

Next, find your MonsterLink campaign that you will use as your Global MonsterLink. You will see three dots, that on hover says “more options”. Click that button.

Click-the-More-Options-Button

A floating menu will appear. Copy both the Unique ID and the Numeric ID some place for use later.

unique-and-numeric-id-of-an-OptinMonster-Campaign

From the image above, you can see the Unique ID for this particular campaign is qcqzpnxjnp1v17dzcdov and the Numeric ID is 606830

Step 3 – Copy and Paste the JavaScript Example Code to Your Site

Next, you need to add the following JavaScript onto your site. Preferably, this JavaScript should be added to template file used by all the pages on your site, in a similar location where you pasted the OptinMonster embed code.

If you’re using WordPress, you can follow this guide to add JavaScript to your WordPress site.

<script>
// Wait until the document has loaded and is ready
jQuery(document).ready( function($){
	// end the NUMERIC ID of your MonsterLink
	var numericIdOfMonsterLink = 'YOUR-NUMERIC-ID';
	function showMonsterLinkPopup () {
		// your campaign's UNIQUE ID goes before the .show();
		YOUR-UNIQUE-ID.show();
	}
	
	// when any Link is Clicked on the page
	$("a").click(function(e) {
		// cache 'this' in a variable for speed purposes
		var $this = $(this)
		
		// create 'flags' for determining if MonsterLink popup should show.
		var isMonsterLink = false;
		var alreadyAMonsterLink = false;
		var isOMSuccessCookieSet = false;
		var isLinkInternal = false;
		
		// check to see if the Clicked Link is to an internal page or external
	    if (e.target.hostname === location.hostname) {
	    	isLinkInternal = true; 
	    } else {
	    	isLinkInternal = false;
	    }
			
		// function used to parse all cookies and search for the cookie name given as the 'cname' value
		function getCookie(cname) {
		    var name = cname + "=";
		    var ca = document.cookie.split(';');
		    for(var i = 0; i < ca.length; i++) {
		        var c = ca[i];
		        while (c.charAt(0) == ' ') {
		            c = c.substring(1);
		        }
		        if (c.indexOf(name) == 0) {
		            return c.substring(name.length, c.length);
		        }
		    }
		    return "";
		}
		
		// function that utilizes the above 'getCookie' function. If a cookie (determined by the argument sent) is present, return true. Else, return false.
		function checkCookie(nameOfCookie) {
		    var cookieValue = getCookie(nameOfCookie);
		    if (cookieValue != "") {
		        return true;
		    } else {
		       return false;
		    }
		}
	
		// function will look for BOTH the MonsterLink's Success Cookie and the Global Success Cookie.	
		function checkForSuccessCookies () {
			// the global cookie name DOES NOT change.
	    	var omGlobalSuccessCookie = "om-success-cookie";
	    	// a flag for easy testing.
	    	var omGlobalSuccessFlag;
	    	// the value for the globalMonsterLinkSuccessCookie should be "om-success-YOUR CAMPAIGNS NUMERIC ID"
	    	var globalMonsterLinkSuccessCookie = "om-success-" + numericIdOfMonsterLink;
	    	// a flag for easy testing.
	    	var globalMonsterLinkSuccessflag;
	    	
	    	// the function checkCookie will send the global success cookie's title and set its return Value as the flag's Value. Either True or False.
	    	omGlobalSuccessFlag = checkCookie(omGlobalSuccessCookie);
	    	// the function checkCookie will send the global success cookie's title and set its return Value as the flag's Value. Either True or False.
	    	globalMonsterLinkSuccessflag = checkCookie(globalMonsterLinkSuccessCookie);
	    	
	    	// testing to see if the Global Success Cookie OR the MonsterLink's SUCCESS Cookie has been set.
	    	if ((omGlobalSuccessFlag === true) || (omGlobalSuccessFlag === true)) {
		    	// if either success cookie is present, set flag to true
		    	isOMSuccessCookieSet = true;
	    	}
		}
		
		// run the functions listed above, by running checkForSuccessCookies();
		checkForSuccessCookies();
		
		// if the link is ALREADY a MonsterLink, then ignore and show original MonsterLink. 
		if ( $this.hasClass("manual-optin-trigger")) {
			isMonsterLink = true;
		}
		

		// Presuming the link that is clicked is NOT already a MonsterLink, AND no success cookies have been set, then show the Global MonsterLink
		if ((isMonsterLink == false) && (isOMSuccessCookieSet == false) && (isLinkInternal == false)) {
			// prevents the normal redirecting of the page to the Clicked Link's href. 
			e.preventDefault();
			e.stopPropagation();
		
			// MUST add your campaign's slug. Campaign Slug goes before the .show();
				showMonsterLinkPopup();
				  
			// If the MonsterLink is CLOSED, then redirect to original href location of the link that is clicked.		
		    $(document).on('OptinMonsterBeforeClose', function( event, data, object ){
		      var url = $this.attr('href');
		      $(location).attr('href',url);
		    });
		} else {
			// if the person is using another MonsterLink OR if they have success cookies set, then send them to the original href value of the original link clicked.
			return true;
		}
	});
});
</script>

Step 4 – Update the Code with Your MonsterLink’s Unique ID and Numeric ID

For the last step, you need to update to your example code that you pasted in Step 3. The two edits occur only at the very beginning of all of the code you pasted.

In the code example below, you’re seeing just the beginning of what you pasted earlier. Go ahead and update the values of your Numeric ID and Unique ID that you copied earlier.

Remember, for this example, my values were:

  • Unique ID: qcqzpnxjnp1v17dzcdov
  • Numeric ID: 606830

Your values will be different.

<script>
// Wait until the document has loaded and is ready
jQuery(document).ready( function($){
	// end the NUMERIC ID of your MonsterLink
	var numericIdOfMonsterLink = '606830';
	function showMonsterLinkPopup () {
		// your campaign's UNIQUE ID goes before the .show();
		qcqzpnxjnp1v17dzcdov.show();
	}

Congratulations! You’ve successfully added the MonsterLink across your site! Go ahead and test out your OptinMonster campaign!