{"id":112471,"date":"2023-07-10T11:38:34","date_gmt":"2023-07-10T15:38:34","guid":{"rendered":"https:\/\/optinmonster.com\/?post_type=optinmonster_docs&#038;p=5588"},"modified":"2025-08-26T06:54:58","modified_gmt":"2025-08-26T10:54:58","slug":"how-to-use-monsterlinks-to-load-your-popup-with-click-of-a-button","status":"publish","type":"optinmonster_docs","link":"https:\/\/optinmonster.com\/docs\/how-to-use-monsterlinks-to-load-your-popup-with-click-of-a-button\/","title":{"rendered":"How to Use MonsterLinks\u2122 to Load Your Popup with the Click of a Button"},"content":{"rendered":"\n<p>OptinMonster makes it easy to trigger a campaign to popup with the click of a link or button on your site. Create a 2-step optin campaign from any link on your site using our <a href=\"https:\/\/optinmonster.com\/features\/monsterlinks\/\" target=\"_blank\" rel=\"noopener\" title=\"\">MonsterLink<strong>\u2122<\/strong> feature<\/a>.<\/p>\n\n\n\n<p>In this article, you&#8217;ll learn how to create a MonsterLink<strong>\u2122<\/strong> to show a campaign with the click of a button or link.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column alert alert-info is-layout-flow wp-block-column-is-layout-flow\">\n<p><strong><em>Before you start<\/em><\/strong>, this feature is available with a <a href=\"https:\/\/optinmonster.com\/pricing\" target=\"_blank\" rel=\"noopener\" title=\"Pro and higher subscription\">Pro and higher subscription<\/a>.<\/p>\n<\/div>\n<\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>MonsterLink\u2122 cannot be configured for <a href=\"https:\/\/optinmonster.com\/docs\/how-to-create-an-after-post-or-in-line-optin\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Inline type campaigns<\/a>.<\/li>\n\n\n\n<li><em>A&nbsp;MonsterLink\u2122&nbsp;will ignore all other<\/em> <a href=\"https:\/\/optinmonster.com\/docs\/how-to-use-display-rules-in-optinmonster\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Display Rules<\/a> configured and always show the campaign when the MonsterLink\u2122 is selected.<\/li>\n\n\n\n<li>A MonsterLink<strong>\u2122<\/strong> is one of our most effective campaign triggers, easily increasing conversions by 2x or more.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Configure MonsterLink<\/h2>\n\n\n\n<p>When you <a href=\"https:\/\/optinmonster.com\/docs\/creating-your-first-optin\/\" target=\"_blank\" rel=\"noopener\" title=\"\">create a campaign<\/a> in OptinMonster you can rapidly increase conversions by triggering it to appear using a MonsterLink<strong>\u2122<\/strong>.<\/p>\n\n\n\n<p>To create a MonsterLink<strong>\u2122<\/strong>, follow these steps:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Navigate to the <strong>Display Rules<\/strong> view in the campaign builder.<br><img decoding=\"async\" width=\"800\" height=\"560\" class=\"alignnone size-full wp-image-180093\" src=\"https:\/\/optinmonster.com\/wp-content\/uploads\/2023\/06\/display-rules-view.jpg\" alt=\"Navigate to the Display Rules in the OptinMonster campaign builder.\" srcset=\"https:\/\/optinmonster.com\/wp-content\/uploads\/2023\/06\/display-rules-view.jpg 800w, https:\/\/optinmonster.com\/wp-content\/uploads\/2023\/06\/display-rules-view-300x210.jpg 300w, https:\/\/optinmonster.com\/wp-content\/uploads\/2023\/06\/display-rules-view-768x538.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/li>\n\n\n\n<li>Next, when adding or editing a rule select <strong>When (Triggers)<\/strong> from the left-hand list and select the <strong>MonsterLink\u2122<\/strong> option.<br><img decoding=\"async\" width=\"800\" height=\"564\" class=\"alignnone size-full wp-image-180421\" src=\"https:\/\/optinmonster.com\/wp-content\/uploads\/2023\/04\/monsterlink-rule.jpg\" alt=\"MonsterLink rule in OptinMonster.\" srcset=\"https:\/\/optinmonster.com\/wp-content\/uploads\/2023\/04\/monsterlink-rule.jpg 800w, https:\/\/optinmonster.com\/wp-content\/uploads\/2023\/04\/monsterlink-rule-300x212.jpg 300w, https:\/\/optinmonster.com\/wp-content\/uploads\/2023\/04\/monsterlink-rule-768x541.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/li>\n\n\n\n<li>You&#8217;ll be provided with a sample HTML link you can click to copy.<br><img decoding=\"async\" width=\"652\" height=\"112\" class=\"alignnone size-full wp-image-180412\" src=\"https:\/\/optinmonster.com\/wp-content\/uploads\/2023\/04\/monsterlink-copy.jpg\" alt=\"MonsterLink copy link.\" srcset=\"https:\/\/optinmonster.com\/wp-content\/uploads\/2023\/04\/monsterlink-copy.jpg 652w, https:\/\/optinmonster.com\/wp-content\/uploads\/2023\/04\/monsterlink-copy-300x52.jpg 300w\" sizes=\"(max-width: 652px) 100vw, 652px\" \/><\/li>\n\n\n\n<li>When you&#8217;re finished, <strong>Save<\/strong> the campaign.<br><img decoding=\"async\" width=\"800\" height=\"564\" class=\"alignnone size-full wp-image-180417\" src=\"https:\/\/optinmonster.com\/wp-content\/uploads\/2023\/07\/save-display-rules-monsterlinks-optinmonster-scaled.png\" alt=\"save display rules monsterlinks - optinmonster\"><\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Add MonsterLink<\/h2>\n\n\n\n<p>Once you&#8217;ve created a MonsterLink<strong>\u2122<\/strong>, you&#8217;ll want to add it to your website.<\/p>\n\n\n\n<p>You can find the MonsterLink<strong>\u2122<\/strong> code to add to your site from:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Within the <strong>Display Rules<\/strong> screen next to the MonsterLink<strong>\u2122 <\/strong>rule you configured in the previous section of this article.<br><img decoding=\"async\" width=\"652\" height=\"112\" class=\"alignnone size-full wp-image-180412\" src=\"https:\/\/optinmonster.com\/wp-content\/uploads\/2023\/04\/monsterlink-copy.jpg\" alt=\"MonsterLink copy link.\" srcset=\"https:\/\/optinmonster.com\/wp-content\/uploads\/2023\/04\/monsterlink-copy.jpg 652w, https:\/\/optinmonster.com\/wp-content\/uploads\/2023\/04\/monsterlink-copy-300x52.jpg 300w\" sizes=\"(max-width: 652px) 100vw, 652px\" \/><\/li>\n\n\n\n<li>Alternatively, from the&nbsp;<strong>Publish<\/strong> screen in the campaign builder within the&nbsp;<strong>Click to Load<\/strong> tab.<br><img decoding=\"async\" width=\"800\" height=\"543\" class=\"alignnone size-full wp-image-180432\" src=\"https:\/\/optinmonster.com\/wp-content\/uploads\/2023\/04\/publish-monsterlink.jpg\" alt=\"Copy the MonsterLink sample code from the Publish screen of the OptinMonster campaign builder.\" srcset=\"https:\/\/optinmonster.com\/wp-content\/uploads\/2023\/04\/publish-monsterlink.jpg 800w, https:\/\/optinmonster.com\/wp-content\/uploads\/2023\/04\/publish-monsterlink-300x204.jpg 300w, https:\/\/optinmonster.com\/wp-content\/uploads\/2023\/04\/publish-monsterlink-768x521.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/li>\n<\/ol>\n\n\n\n<p>Place the MonsterLink<strong>\u2122<\/strong> code within your site content where you wish to have it appear.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">WordPress Required Step<\/h2>\n\n\n\n<div class=\"alert-box alert-yellow\">\n<p class=\"alert-box-title\">IMPORTANT:<\/p>\n\n\n\n<p>When the MonsterLink rule is activated, all of your other rules will be turned off within that individual Ruleset (e.g. 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\u2019ll need to <a href=\"https:\/\/optinmonster.com\/docs\/how-to-create-and-import-saved-rulesets-in-optinmonster\/\" target=\"_blank\" rel=\"noopener\" title=\"\">create and configure a second Ruleset<\/a>.<\/p>\n\n\n\n<p class=\"is-style-arrow-link has-link-color\"><\/p>\n<\/div>\n\n\n\n<p>If you are using the WordPress OptinMonster WordPress plugin, please follow these steps to ensure you can add your MonsterLink<strong>\u2122<\/strong> anywhere on your site:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Navigate to the <strong>WordPress Admin Dashboard &gt; OptinMonster <\/strong>screen and confirm the campaign you&#8217;ve configured to appear by MonsterLink<strong>\u2122<\/strong> is set to <strong>Published<\/strong> status.<br><img decoding=\"async\" width=\"800\" height=\"358\" class=\"alignnone size-full wp-image-165822\" src=\"https:\/\/optinmonster.com\/wp-content\/uploads\/2021\/10\/published-campaign-wordpress-plugin.jpg\" alt=\"Set the MonsterLink Status to Published in the OptinMonster WordPress plugin\" srcset=\"https:\/\/optinmonster.com\/wp-content\/uploads\/2021\/10\/published-campaign-wordpress-plugin.jpg 800w, https:\/\/optinmonster.com\/wp-content\/uploads\/2021\/10\/published-campaign-wordpress-plugin-300x134.jpg 300w, https:\/\/optinmonster.com\/wp-content\/uploads\/2021\/10\/published-campaign-wordpress-plugin-768x344.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/li>\n\n\n\n<li>Within the <strong>Output Settings<\/strong> for the same campaign, ensure all Advanced Output Settings are <em>disabled<\/em>.<br><img decoding=\"async\" width=\"800\" height=\"360\" class=\"alignnone size-full wp-image-165823\" src=\"https:\/\/optinmonster.com\/wp-content\/uploads\/2021\/10\/output-settings-link.jpg\" alt=\"Configure the Output Settings for your campaign in the WordPress plugin.\" srcset=\"https:\/\/optinmonster.com\/wp-content\/uploads\/2021\/10\/output-settings-link.jpg 800w, https:\/\/optinmonster.com\/wp-content\/uploads\/2021\/10\/output-settings-link-300x135.jpg 300w, https:\/\/optinmonster.com\/wp-content\/uploads\/2021\/10\/output-settings-link-768x346.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"examples\">Example Configuration<\/h2>\n\n\n\n<p>You can add a MonsterLink<strong>\u2122<\/strong> as a text link, button link, or even a clickable image. The following are examples of each to help you get started.<\/p>\n\n\n\n<div class=\"alert-box alert-yellow\">\n<p class=\"alert-box-title\"><\/p>\n\n\n\n<p>You can copy and paste any of the following examples, but please be sure to edit the MonsterLink<strong>\u2122 <\/strong>URL to match that of your specific campaign.<\/p>\n\n\n\n<p class=\"is-style-arrow-link has-link-color\"><\/p>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"text\"><strong>Text MonsterLink<\/strong><\/h3>\n\n\n\n<p>This text MonsterLink<strong>\u2122<\/strong> is an example of adding the MonsterLink<strong>\u2122<\/strong> as text on your page and uses the default MonsterLink<strong>\u2122<\/strong> code.<\/p>\n\n\n\n<script src=\"https:\/\/library.wpcode.com\/embedjs\/32jj6l42.js\/\"><\/script>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"button\">Button MonsterLink<\/h3>\n\n\n\n<p>Very similar implementation to the text link, but this time you use it to make a button. The default button design depends on your CSS on your site.<\/p>\n\n\n\n<script src=\"https:\/\/library.wpcode.com\/embedjs\/joerzd65.js\/\"><\/script>\n\n\n\n<div class=\"alert-box alert-blue\">\n<p class=\"alert-box-title\"><\/p>\n\n\n\n<p>You may need to replace the class &#8220;button&#8221; with your own theme-specific class. Some themes use <code>button <\/code>as a class while others use alternative naming conventions. Refer to your theme&#8217;s documentation for information about button classes.<\/p>\n\n\n\n<p class=\"is-style-arrow-link has-link-color\"><\/p>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"image\">Image MonsterLink<\/h3>\n\n\n\n<p>In this example, we&#8217;ll place an image inside of our MonsterLink<strong>\u2122<\/strong> instead of text to trigger the campaign to appear when the image is selected.<\/p>\n\n\n\n<script src=\"https:\/\/library.wpcode.com\/embedjs\/rovx9782.js\/\"><\/script>\n\n\n\n<h3 class=\"wp-block-heading\">Show a Different Campaign on Mobile<\/h3>\n\n\n\n<p>In this example, we&#8217;ll show one campaign on Desktop \/ Tablet devices and a different campaign on Mobile devices using the data-mobile-slug attribute.<\/p>\n\n\n\n<script src=\"https:\/\/library.wpcode.com\/embedjs\/y266j7g2.js\/\"><\/script>\n\n\n\n<h2 class=\"wp-block-heading\">Dynamic MonsterLinks<\/h2>\n\n\n\n<p>Need to add the same MonsterLink to several areas of a page? You can dynamically add MonsterLinks targeting a specific ID, Class, or other selector in the HTML.<\/p>\n\n\n\n<p>To dynamically add MonsterLinks to your page, follow these steps:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Below we provide two examples of Javascript to accomplish your goal. Choose the most appropriate example for how you wish to target the link(s) on your site.<\/li>\n\n\n\n<li>Update the code to indicate the specific link element you wish to set as a MonsterLink AND add your campaign&#8217;s MonsterLink URL.<\/li>\n\n\n\n<li>Next, add the Javascript directly to your website to all pages where it should add dynamic MonsterLinks.<\/li>\n<\/ol>\n\n\n\n<script src=\"https:\/\/library.wpcode.com\/embedjs\/j57gz045.js\/\"><\/script>\n\n\n\n<script src=\"https:\/\/library.wpcode.com\/embedjs\/e50x0wm5.js\/\"><\/script>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"faq\">FAQs<\/h2>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"split-test\">Can I split-test a MonsterLink<strong>\u2122<\/strong>?<\/h5>\n\n\n\n<p>Yes, you can Split-Test a MonsterLink<strong>\u2122<\/strong>.<\/p>\n\n\n\n<p>Be sure to copy the MonsterLink<strong>\u2122<\/strong> for the primary campaign in your split-test.<\/p>\n\n\n\n<p>If you change which campaign is the primary in your split-test be sure to update the MonsterLink<strong>\u2122<\/strong> on your site to use the new primary.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Can I have one campaign for desktop users and another campaign for mobile\/tablet users on the <strong>same MonsterLink\u2122<\/strong>?<\/h5>\n\n\n\n<p>Yes! To do this you&#8217;ll use the data-mobile-slug attribute to add the campaign you wish to show on Mobile devices. Like this:<\/p>\n\n\n\n<script src=\"https:\/\/library.wpcode.com\/embedjs\/y266j7g2.js\/\"><\/script>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"types\">Can all campaign types be made into a MonsterLink<strong>\u2122<\/strong>?<\/h5>\n\n\n\n<p>All popup-type campaigns can be made into a MonsterLink<strong>\u2122<\/strong>, e.g. Lightbox, Fullscreen, Floating Bar, and Slide-in.<\/p>\n\n\n\n<p>Inline campaigns, which don&#8217;t pop up but rather show in the page&#8217;s content, cannot be made into a MonsterLink<strong>\u2122<\/strong>.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Can I create a landing page where people can signup for my Campaign?<\/h5>\n\n\n\n<p>Yes! This can be done using our <a href=\"https:\/\/optinmonster.com\/docs\/how-to-create-a-shareable-monsterlink\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Shareable MonsterLink<strong>\u2122<\/strong><\/a> feature.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Can I create a MonsterLink from a non-link (<code>a<\/code>) tag?<\/h5>\n\n\n\n<p>Yes, to accomplish this be sure to add <code>class=\"om-monster-link\"<\/code> to the HTML element you&#8217;re creating a MonsterLink from. For example:<\/p>\n\n\n\n<script src=\"https:\/\/library.wpcode.com\/embedjs\/qo9xe9yo.js\/\"><\/script>\n\n\n\n\n\n<h2 class=\"wp-block-heading\">Troubleshooting<\/h2>\n\n\n\n<h5 class=\"wp-block-heading\">In WordPress, why does the MonsterLink<strong>\u2122<\/strong> show up as code on the page?<\/h5>\n\n\n\n<p>Be sure to add your MonsterLink<strong>\u2122<\/strong> using the <strong>text editor<\/strong> and not the <strong>visual editor<\/strong>.<\/p>\n\n\n\n<p>If you&#8217;re using Gutenberg, you&#8217;ll want to add a <strong>Custom HTML<\/strong> block.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>OptinMonster makes it easy to trigger a campaign to popup with the click of a link or button on your site. Create a 2-step optin campaign from any link on your site using our MonsterLink\u2122 feature. In this article, you&#8217;ll learn how to create a MonsterLink\u2122 to show a campaign with the click of a&nbsp;&hellip;<\/p>\n","protected":false},"author":4657,"comment_status":"open","ping_status":"closed","template":"","documentation\/categories":[28201],"documentation\/tags":[31399,31457,31451,31487,31498,31415,31430,31411,31458,31455,31453,31419,31420],"class_list":["post-112471","optinmonster_docs","type-optinmonster_docs","status-publish","hentry","categories-display-rules"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation\/112471","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/types\/optinmonster_docs"}],"author":[{"embeddable":true,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/users\/4657"}],"replies":[{"embeddable":true,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/comments?post=112471"}],"version-history":[{"count":34,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation\/112471\/revisions"}],"predecessor-version":[{"id":205246,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation\/112471\/revisions\/205246"}],"wp:attachment":[{"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/media?parent=112471"}],"wp:term":[{"taxonomy":"categories","embeddable":true,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation\/categories?post=112471"},{"taxonomy":"internal_tags","embeddable":true,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation\/tags?post=112471"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}