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

Manually loading OptinMonster with the click of a button is now baked-in via MonsterLinks™! There are only a few steps to using MonsterLinks™ to load an campaign of your choice with the click on a button.

  1. Creating a MonsterLink
  2. Adding a MonsterLink in WordPress
  3. Examples and Customizations
  4. FAQs

Step 1 – Create / Modify an Campaign

Create a new popup campaign or modify an existing campaign from OptinMonster Dashboard. Open the OptinMonster Builder by selecting the Edit link.

Select the edit button from your Dashboard to edit an campaign you've already created.

Step 2 – Enable the MonsterLink 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.

NOTE: once you’ve activated the MonsterLink (On Click) option your campaign will no longer load automatically by time delay, scroll percentage or exit-intent. If you want your campaign to both load automatically and use it in a MonsterLink you’ll need to create and configure a second Ruleset.
NOTE 2: When MonsterLink is activated, all of your other rules will be turned off, such as page-targeting. This is because the MonsterLink popup will only show if the MonsterLink is clicked. Learn more about how to do page level targeting with OptinMonster and using Rulesets for your campaign.

Step 3 – Embed Campaign on Site

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 (i.e.: Click Me) actually has something to load. Otherwise the trigger won’t load anything.

See our Platforms documentation for instructions on adding your campaign’s embed code on many popular website platforms.

Using WordPress and the OptinMonster API Plugin?

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
*See our Page Targeting documentation for a walk-through of the Output Settings.

Step 4 – Click “Copy MonsterLink™ Code” Button

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>

That’s it, you’re all set. OptinMonster will take care of the rest for you!

MonsterLink™ Example:

Click on me to load our free case study campaign.


Are There Examples of Different MonsterLink™ Setups?

A: Yes there are! Please check out the numerous examples below.

Important 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.
Text MonsterLink™ Example

This text MonsterLink is an example of adding the MonsterLink as text on your page. 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>

For example, your page could be something like the following:

This is my page’s header

This is my intro paragraph.

This is my second paragraph. Great isn’t it!?

Finally by this paragraph, you’re convinced.

You should sign up for my email list.
Click me! to get my blog posts straight to your inbox plus other exclusive content!

with it’s source code for that page being:

<h2>This is my page's header</h2>

This is my intro paragraph.

This is my second paragraph. Great isn't it!?

Finally by this paragraph, you're convinced.

You should sign up for my email list. <a href="#" class="manual-optin-trigger" data-optin-slug="mx88jxu0cogbsl1p">Click Me!</a> to get my blog posts straight to your inbox plus other exclusive content!
Button MonsterLink™ Example

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™ Example

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=""</img></a>

Just replace the slug used in the example above (in our case, it’s the ta23jbq7blxq8ylg you keep seeing after data-optin-slug=" above with your custom campaign slug you copied in Step 2.

<a href="#" class="manual-optin-trigger" data-optin-slug="ta23jbq7blxq8ylg">Click Me to load our free case study campaign!</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 in two places. It’s shown immediately below the name of your campaign on the left. The unique campaign slug is also shown in the Edit button’s dropdown on the right. You can copy the slug from either place to use in your MonsterLink™.

You can retrieve your campaign slug from two places in the Dashboard view.

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: 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.