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.

  1. Creating a MonsterLink
  2. Adding a MonsterLink in WordPress
  3. Frequently Asked Questions
  4. How to Manually Create a MonsterLink
  5. Examples and Customizations
  6. FAQs

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

Step 3 – Embed Optin on Site

Before the MonsterLink optin can work properly, the optin 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 optin’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 Optin loads everywhere.

  1. Go to your WordPress Dashboard > OptinMonster Menu > Output Settings (for your specific optin).
  2. Enable your optin. In the Optins tab this means your optin will appear with the status Live instead of Disabled.
  3. Ensure all Advanced Output Settings are Disabled – This will ensure the MonsterLink™ Optin 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="ta23jbq7blxq8ylg">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 optin.


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 Optin’s 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 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 optin 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 simiilar to the following:

<a class="manual-optin-trigger button" href="#" data-optin-slug="ta23jbq7blxq8ylg">Click on me to load our free case study optin.</a>

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 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.</p>
        
<p>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.

<a class="manual-optin-trigger button" href="#" data-optin-slug="ta23jbq7blxq8ylg">Click on me to load our free case study optin.</a>

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

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

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

  • After Post / Inline
  • Sidebar

All remaining Optin Types can use the MonsterLink functionality.

Share