How to Display WordPress Popup on Link/Button Click

MailOptin Click Launch allows you to display an opt-in form only after a visitor or users of your site click a link. This is popularly used by many internet marketers and bloggers to offer Content Upgrade whereby a piece of extra content or resources are offered to the reader but they can only get access after they’ve opt-in with their email address by clicking a link or call-to-action button that displays an opt-in form.

Below is an example of an image content upgrade.

Follow this guide to learn how to activate Click Launch optin trigger.

Click launch is available only to lightbox or popups, slide-ins and notification bar optin forms.

Click the campaign title or the Customize button to open the edit screen.

Open Display rule >> Click Launch panel and activate the rule.

Having done this, copy any of the shortcodes or HTML code and paste on the post or page you wish to offer a content upgrade or a click to launch opt-in form.

Don’t forget to activate the opt-in form (by toggling the switch at the top-left corner to the right) and save your changes.

Saving the shortcode to a WordPress post or page will output a link which when clicked, reveals the opt-in form.

Let’s go over the shortcode and HTML code available in details.

Simple Shortcode

The shortcode looks similar to [mo-click-launch id="VJSIJmCgLN" link="Click Me!"] where “VJSIJmCgLN” is the optin unique identifier and “Click Me!” the link label or anchor text which you can change.

Advance Shortcode

This shortcode allows you to make elements besides a link trigger an optin display such as images, call-to-action buttons, videos and even shortcodes from other plugins that output some form of content.

Say you want to make a button or an image trigger an opt-in form display when clicked, here’s how the advance shortcode can be used.

Button:

This example assumes your theme has a button shortcode.

[mo-click-launch id="VJSIJmCgLN"]
[button type="button" label="Click Me!"]
[/mo-click-launch]

Image:

[mo-click-launch id="VJSIJmCgLN"]
<img src="https://mailoptin.io/img/smiley.gif" alt="Smiley face">
[/mo-click-launch]

You can even use it to for links similar to the simple shortcode above like so:
[mo-click-launch id="VJSIJmCgLN"]Click Me![mo-click-launch]

HTML Code

If shortcodes aren’t your thing or for reasons best known to you, you prefer to use the HTML link, feel free to use it.

The code is in this form:

<a href="#" class="mailoptin-click-trigger" data-optin-uuid="VJSIJmCgLN">Click Me!</a>

or

<a href="#" class="mailoptin-click-trigger-VJSIJmCgLN">Click Me!</a>

So basically, the optin unique ID (in our example VJSIJmCgLN) is appended to the class mailoptin-click-trigger and added to the link, button or whatever element that will trigger the optin.

Here’s an example of how it can be implemented on a button in the Elementor page builder.

Below is a GIF demo of “click launch” optin trigger.

Let us know if you have any question or comment.