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 (slug) for Your Campaign
  3. Copy and Paste the JavaScript Example Code to Your Site
  4. Update the Code with Your MonsterLink’s Unique 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 (slug) 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 the Unique 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.

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.

(function(window, document) {
	// Your campaign's UNIQUE ID
	var campaignSlug = 'YOUR-UNIQUE-ID';

	// Helper to get an anchor element.
	var getLink = function(element) {
		var parent = element;
		while (parent && 'A' !== parent.tagName) {
			parent = parent.parentNode;
		}

		return parent && 'A' === parent.tagName ? parent : null;
	}

	document.documentElement.addEventListener('click', function(evt) {
		evt = evt || window.event;

		var el = getLink(evt.target || evt.srcElement);
		if (!el) {
			// Not an anchor link
			return;
		}

		// Internal link, so Nothing to do here.
		if (el.hostname === location.hostname) {
			return;
		}

		var url = el.href;

		// if the link is ALREADY a MonsterLink, then original MonsterLink logic will be used.
		if ( (' ' + el.className + ' ').indexOf(' manual-optin-trigger ') > -1 || url.indexOf('https://app.monstercampaigns.com/c/') > -1) {
			return;
		}

		// Check if user has already completed this campaign.
		if ( document.cookie.indexOf('omSuccess-' + campaignSlug +'=') > -1) {
			return;
		}

		evt.preventDefault();

		window['om' + campaignSlug].startShow();
		
		// If the MonsterLink is CLOSED, then redirect to original href location of the link that is clicked.
		document.addEventListener('om.Campaign.cleanup', function(evt) {
			if ( evt.detail.Campaign.id === campaignSlug ) {
				setTimeout( function() {
					window.location.href = url;
				}, 200 );
			}
		});
	});
})(window, document);

Keep in mind, if you are pasting this in the html, you will need to wrap this code in <script> tags.

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

For the last step, you need to update to your example code that you pasted in Step 3. You only need to replace the YOUR-UNIQUE-ID value in 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 value of your Unique ID that you copied earlier.

Remember, for this example, the value for my Unique ID is: qcqzpnxjnp1v17dzcdov

Your Unique ID will be different.

<script>
(function(window, document) {
	// Your campaign's UNIQUE ID
	var campaignSlug = 'qcqzpnxjnp1v17dzcdov';

	// ... the rest of the code, omitted for clarity

})(window, document);
</script>

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