How to Use MonsterLinks™ to Load Your Popup with the Click of a Button

Do you want to trigger a pop up campaign with the click of button? It’s easy with our MonsterLinks! Follow this guide to set up and MonsterLink and load a campaign of your choice with the click on a button.

NOTE: This guide will show you how to effectively use the Display Rule: MonsterLink (On Click).

What are Monster Links

MonsterLink is a link on your site that loads a pop-up campaign instead of sending the user to a new page.

You can use MonsterLinks to create a better viewing experience for your users by using a Call to Action button that prompts them to trigger the campaign instead of triggering a pop-up automatically and potentially interrupting their browsing experience. You can also use MonsterLinks to show campaigns on mobile devices in a non-intrusive way.

NOTE: MonsterLinks require that you add an extra line of code to your page for the link.

How to Create a MonsterLink

Step 1 – Set Display Rule

Select the Display Rules tab in the campaign builder.

You can edit the display rules for your campaign by first selecting the Display Rules menu item in the optin builder.

In the Display Rules panel select the MonsterLink (On Click) option, and change the Status to Active.

Activate the MonsterLink Display Rule in the campaign builder to begin configuring your campaign for manual trigger appearance.

IMPORTANT:  When the MonsterLink rule is activated, all of your other rules will be turned off, such as page-targeting, time delay, exit-intent, etc. This is because the MonsterLink popup will only show if the MonsterLink is clicked. If you want to trigger the campaign via something else, like Exit-Intent, as well as the MonsterLink, you’ll need to create and configure a second Ruleset.
Step 2 – WordPress Settings (WordPress Plugin Users Only)

If you are using the WordPress OptinMonster API plugin, you will need to update your WordPress output settings to make sure your MonsterLink campaign loads everywhere.

  1. Go to your WordPress Dashboard > OptinMonster Menu > Output Settings (for your specific campaign).
  2. Enable your campaign. In the Campaigns tab this means your campaign will appear with the status Live instead of Disabled.
  3. Ensure all Advanced Output Settings are Disabled – This will ensure the MonsterLink™ Campaign Embed code is loaded globally so that you can add a MonsterLink™ anywhere and it will work.
NOTE: See our page targeting documentation for a walk-through of the output settings.
Did you know?: With OptinMonster’s Plugin, you can use our Advanced Targeting Rules to target WordPress Categories, Tags, and more. Learn how our WordPress Plugin and Display Rules work together.
Step 3 – Add MonsterLink Code to Site
IMPORTANT: Before the MonsterLink campaign can work properly, the campaign must have its embed code loaded on the page(s) where your link will be placed so that your MonsterLink actually has something to load. Otherwise, the trigger won’t load anything. If you are not using the OptinMonster plugin, and have not already added the embed code to your site, see our documentation on how to embed your campaigns on your site.

To get your actual MonsterLinks™ on your page, you need to embed some HTML. Instead of having to type this in yourself, you can get the basic link by clicking the “Click to Copy” button located in the MonsterLink rule area.

Click to Copy OptinMonster's MonsterLinks™

After you click to copy, the HTML will be copied to your computer and the button will change.

OptinMonster MonsterLinks™ Copied

Next, you can paste your link somewhere on your site. It will paste something like the following (although your slug will be different).

<a href="#" class="manual-optin-trigger" data-optin-slug="mx88jxu0cogbsl1p">Click Me!</a>
IMPORTANT: The link that is copied is an entire HTML anchor, or ‘link’, element, not a URL. The code needs to copied into an HTML editor, not a visual editor or page building URL field.

Examples

NOTE: These are examples. For your campaign, you must change the value for the data-optin-slug attribute to your own campaign’s specific slug. If you only copy and paste the code below but neglect to update the campaign’s slug attribute, then it will not work.
Default Text Link

This text MonsterLink is an example of adding the MonsterLink as text on your page and uses the default MonsterLink code. In WordPress, this is done by editing in the Text Editor NOT the Visual Editor for a page/post.

<a href="#" class="manual-optin-trigger" data-optin-slug="mx88jxu0cogbsl1p">Click Me!</a>
Button MonsterLink

Very similar implementation to the text link, but this time you use it to make a button. Your default button design depends on your CSS on your site.

<a href="#" class="button manual-optin-trigger" data-optin-slug="mx88jxu0cogbsl1p">Click Me!</a>
NOTE: You may need to replace the class “button” with your own theme-specific class. Some themes use button as a class while others use alternative naming conventions. Refer to your theme’s documentation for information about button classes.
Image MonsterLink

This option, once more, is very similar to the text implementation. Only this time, the a tags are wrapping around an image you have instead of text like “Click Me”. This allows you to create an advertisement of sorts that is clickable and will load your campaign.

<a href="#" class="manual-optin-trigger" data-optin-slug="ta23jbq7blxq8ylg"><img src="http://www.example.com/image.jpg" alt="Call to action text in case your image doesn't load." height="" width=""></a>

Frequently Asked Questions

Q: How can I Manually Create a MonsterLink™?

A: For this method, you will actually write out the very simple HTML yourself. This allows you to do more customization, such as wrapping the link around an image, or adding button classes.

Step 1: Find your Campaign’s Slug

From your OptinMonster Dashboard your campaign’s slug can be found by clicking the More Actions dots for the campaign. You can then copy the slug to use in your MonsterLink™. The slug is the Unique ID.

dashboard-unique-slug-id

Step 2: Create Your MonsterLink

The next step requires just two things: a custom class and data attribute. Don’t let those words intimidate you, it’s actually pretty simple.

The custom class required to make the campaign trigger is manual-optin-trigger. It needs to be added to the class attribute for your element. The data attribute required is data-optin-slug, which will take the slug value you gathered in step one.

The result should look similar to the following:

<a href="#" class="manual-optin-trigger button" data-optin-slug="mx88jxu0cogbsl1p">Click Me!</a>

Q: I’m using WordPress, how do I turn my theme’s shortcode link into a MonsterLink?

A: Unfortunately it’s not possible to configure a theme or plugin’s shortcode link to become a MonsterLink. You’ll need to create an HTML link as demonstrated above.


Q: Can I split-test a MonsterLink?

A: Yes, you can Split-Test a MonsterLink. In these situations, the split-tested version will show up using the primary campaign’s slug in the MonsterLink. You do not need 2 links.


Q: Can I have a Lightbox Campaign for Desktop Users and a Mobile Campaign for Mobile/Tablet Users on the same MonsterLink?

A: You can achieve a functionality like this via Media Queries. You can do this by adding two MonsterLinks, one that is set to load the Lightbox campaign and the second to load your Mobile campaign. Each MonsterLink should have one additional class added to them so they might look like:

<a href="#" class="manual-optin-trigger desktop-monsterlink" data-optin-slug="ta23jbq7blxq8ylg">Click Me!</a>
<a href="#" class="manual-optin-trigger mobile-monsterlink" data-optin-slug="ta23jbq7blxq8ylg">Click Me!</a>

In this example I used the classes desktop-monsterlink and mobile-monsterlink to indicate which MonsterLink should be available for a user to select from various devices.

Then, a little bit of CSS added directly to your site (usually in your style.css file) will allow you to control which MonsterLink is visible to be clicked on based on the browser size:

/* Show 'desktop-monsterlink' and hide 'mobile-monsterlink' */
@media screen and (min-width: 751px) {
   .desktop-monsterlink { display: block; }
   .mobile-monsterlink { display: none; }
}
/* Show 'mobile-monsterlink' and hide 'desktop-monsterlink' */
@media screen and (max-width: 750px) {
   .desktop-monsterlink { display: none; }
   .mobile-monsterlink { display: block; }
}

Q: Do I need to use both the WordPress Plugin and the Display Rules?

A: Learn how our WordPress Plugin and Display Rules work together.


Q: Can all Campaign Types be Made into a MonsterLink?

A: No. Pretty much any campaign type that “pops up” on screen at some point can be made into a MonsterLink. However, all static Campaign Types cannot be made into a MonsterLink. Therefore you cannot make a MonsterLink out of the following Campaign Types.

  • After Post / Inline
  • Sidebar

All remaining campaign types can use the MonsterLink functionality.


Q: Can I create a landing page where people can signup for my Campaign?

A: You can do that using our Shareable MonsterLink feature. It is a standalone page located on our server that serves as an independent URL that you can share through email, Facebook, or other social media, which allows your subscriber to see a specific OptinMonster campaign.

Check out how to Create a Shareable MonsterLink here.