How to Launch 2-Step OptinMonster Lightbox using Beaver Builder

Disclosure: This post may contain affiliate links. Read my disclosure for more info.

This question had me stumped for quite a while. Unfortunately there is no easy way to create a button in Beaver Builder that can launch OptinMonster’s 2-step optin lightbox without getting your hands dirty with some code.

Jason Pelker at WPGenius has written an excellent article on how to launch OptinMonster lightbox on clicking Beaver Builder button using javascript.

However, I wanted to find some way of achieving the same without using a javascript, preferably HTML and CSS. This was due to the fear of using javascript which I have no idea how to use and fix things if they go wrong.

For those of you wondering why it is so difficult to create a button in Beaver Builder to launch OptinMonster’s lightbox, here’s why.

Why Beaver Builder Button Cannot Launch OptinMonster Lightbox?

OptinMonster lets us launch a 2-step optin lightbox by creating a hyperlink that looks something like this:

<a href=”#” class=”button manual-optin-trigger” data-optin-slug=”h95qqg9sqx9atrsl”>Click me!</a>

That class that you see in the link’s code “manual-optin-trigger” and the attribute “data-optin-slug” are the root cause of all problems.

When you create a button in Beaver Builder there is no way you can add these to the button link.

Here’s How To Launch OptinMonster Lightbox Using Beaver Builder Button

It was very evident to me that I cannot use the Button module of Beaver Builder to achieve this. The only way I would be able to do this was to create the button using HTML and CSS.

Luckily, Beaver Builder also has HTML module which I could use to paste in the necessary HTML.

After a little bit of digging around, I found a forum thread on Beaver Builder’s support forum which helped me write the HTML and some basic CSS for the button.

With the help of this forum thread, I built the HTML code for the OptinMonster lightbox button which looked like this:

<div class=”om-button”>
<a href=”#” class=”fl-button manual-optin-trigger” data-optin-slug=“bymyqg9sqx9atrsl”>Start Course</a>
</div>

Notice the additional “div” element and the “om-button” and “fl-button” classes that were added to original OptinMonster lightbox button code given above.

After this, I dragged Beaver Builder’s HTML module on the page and pasted the above code inside the HTML module.

Beaver Builder HTML Module

After doing this, I could see the button.

Finally, it was time to paste the CSS code from the forum thread to style the button. This is the code that I got from that forum thread:

.enquire-button {
text-align: center;
}

.enquire-button a.fl-button {
background: black;
color: purple;
}

However the button still looked very basic. I realized that I have to write some more CSS to style the button.

Here is the CSS that I came up with. You can copy and use it if you need.

/* Optinmonster Button */
.om-button {
text-align: center;
width: 50%;
margin-left: 25%;
}

.fl-builder-content .om-button a.fl-button {
display: block;
background: #faab1f;
color: #ffffff;
border: 3px solid #faab1f;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font-family: ‘Open Sans’,sans-serif;
font-size: 28px;
font-weight: 700;
text-transform: uppercase;
text-align: center;
text-decoration: none;
line-height: 1.25;
padding: 10px;
}

.fl-builder-content .om-button a.fl-button:hover {
background: #e59520;
border: 3px solid #e59520;
}

I then pasted this code in the CSS tab of Layout Settings under Tools menu of Beaver Builder.

Beaver Builder Layout Settings

That is it!

Clicking the button now opens up OptinMonster’s 2-step lightbox.

If this article helped you, please do not hesitate to share it with your friends. I will really appreciate that.

Disclosure: Some of the links in the post above are affiliate links. This means if you click on the link and purchase the product, I will receive a commission at no additional cost to you. Don’t worry, I only recommend products or services that I have personally used and believe will add value to my readers.

Leave a Comment

Your email address will not be published. Required fields are marked *

Want To Make A Website Without Any Code?

Get the Website Builders' Toolbox that contains a list of all tools to make a website without touching a single line of code!