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

Share

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 optin of your choice with the click on a button.

Quick Links

Step 1 – Create/ Modify an Optin

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

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

Step 2 – Enable the MonsterLink Display Rule

Select the Display Rules tab in the optin builder.

You can edit the display rules for your optin 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 optin builder to begin configuring your optin for manual trigger appearance.

NOTE: once you’ve activated the MonsterLink (On Click) option your optin will no longer load automatically by time delay, scroll percentage or exit-intent. If you want your optin to both load automatically and use it in a MonsterLink you’ll need to create and configure a second Ruleset. Learn more about how to do page level targeting with OptinMonster and using Rulesets for your optin.

Step 3 – Copy Your Optin Slug

From your OptinMonster Dashboard your optin’s slug can be found in two places. It’s shown immediately below the name of your optin on the left. The unique optin 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 optin slug from two places in the Dashboard view.

Step 4 – Embed Optin on Your Site

Before your manual trigger can work properly, you must also have your optin loaded on the page(s) you plan to use your MonsterLink on! That’s right, you must have the code loaded on your page so that your MonsterLink (i.e.: Click Me) actually has something to load. Otherwise the trigger won’t load anything.

Include the OptinMonster embed code on the pages where you plan to add your MonsterLinks™, see our Platforms documentation for instructions on adding your optin’s embed code on many popular website platforms.

In WordPress, this means you must perform the following from WordPress > OptinMonster > Output Settings (for your specific optin):

  1. Enable your optin. In the Optins tab this means your optin will appear with the status Live instead of Disabled.
  2. Edit the Output Settings to specify where the optin should load on your site – specifically set it to load either globally or on the page/post you’ve added your manual trigger to. Do this by selecting the ‘Edit Output Settings’ link for your optin in the OptinMonster > Optins tab view.

*See our Page Targeting documentation for a walk-through of the Output Settings.

Step 5 – 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 optin trigger is manual-optin-trigger. It needs to be added to the class attribute for your element. The data attribute required is optin-slug.

Examples:

IMPORTANT NOTE: These are examples. For your optin, you must change the value for the data-optin-slug attribute to your own optin’s specific slug. If you only copy and paste the code below but neglect to update the optin’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="ta23jbq7blxq8ylg">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>
<p>This is my intro paragraph.</p>
<p>This is my second paragraph. Great isn't it!?</p>
<p>Finally by this paragraph, you're convinced.<br />
You should sign up for my email list.<br />
<a href="#" class="manual-optin-trigger" data-optin-slug="ta23jbq7blxq8ylg">Click me!</a> to get my blog posts straight to your inbox plus other exclusive content!</p>

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="ta23jbq7blxq8ylg">Click me!</a>
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 optin.

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

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 optin slug you copied in Step 2.

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


FAQs

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 optin’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 optin and the second to load your Mobile optin. 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="123j0aadflkj23">Click here!</a>
<a href="#" class="manual-optin-trigger mobile-monsterlink" data-optin-slug="123j0aadflkj23">Click here!</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; }
}
Share