Create a Lightbox Popup

How to Create a Lightbox Popup on Your Site (Step by Step)

Looking for a way to create a lightbox popup for your site?

A lightbox popup can be incredibly effective for capturing leads. They’re designed to convince and convert.

But having to code one from scratch is a real pain. For one thing, you’d have to know enough HTML, CSS, and Javascript to create the popup along with trigger rules for when to show it. Then, you’d have to create a manual integration with your email service provider. And finally, you’d have to deal with any privacy and security issues.

Good news: there’s a much simpler way.

In this article, we’re going to show you how to launch a lightbox popup with zero coding in less than 10 minutes.

Let’s dive in.

What is a Lightbox Popup?

A lightbox popup is an opt-in form that popups up with a cinematic effect. When a lightbox pops up, it blurs out the rest of the site in the background. This way, your entire focus is on the popup.

Lightbox popup example

Originally, the concept of lightboxes come from outdoor advertising:

Lightbox advertisement

And then, some developers thought that this was a really cool effect and they created a Javascript library to recreate the same effect on web assets. Later on, the idea of using lightbox popups came into play.

Why Lightbox Popups Work

Lightbox popups capture more emails than a traditional email optin form.

But why do they work?

Let’s take a quick look at the main reasons why lightbox popups work so well.

#1. Lightbox Popups Feature a Clear Call to Action

Most people believe that it’s a great thing to give their customers a lot of options.

But that’s not really true.

If you’re looking for direct conversions, you want a single, clear call to action that your audience can focus on. This way, you remove all distractions from the user’s mind. And lightbox popups do a great job of highlighting your core offer and getting people to focus on your call to action.

So, naturally, the conversion rates are pretty great.

#2. Lightbox Popups Are Impossible to Ignore

Lightbox popups take up the entire screen and blur out everything else. So, it’s practically impossible to ignore them.

This is especially true if they’re animated:

popup animation effects

Of course, you have to ensure that your popups aren’t intrusive. And you can do that by customizing when to trigger different popups on your site. As long as your audience isn’t annoyed by the interruption, you can very easily convince and convert them.

#3. Lightbox Popups Have Personalized Triggers

You shouldn’t be showing the same offer to all your web visitors. If you’re running an eCommerce store, you’ll need very different offers for new and returning customers.

For a new customer, you can trigger a welcome campaign:

Coupon popup

But for a returning customer, you may want to send them a different offer:

Engagement Coupon Popup

Notice how the discount amounts for both offers are exactly the same. But the way in which the offer is framed is drastically different. And this is super important because lightbox popups are built for theatrical effects. So, a more personalized approach will get you much better results for sure.

You could even personalize the offer based on your user’s content preferences. If they’re reading an article on dinner recipes, it makes more sense to show them an offer related to dinner recipes rather than showing them an offer for cars.

Country Living Exit Popup

#4. Lightbox Popups Can Capture Abandoning Visitors

Lightboxes are just a method of displaying your popup. So, there’s really nothing stopping you from customizing the trigger to any extent you like. We recommend creating exit-intent lightbox popups.

Exit Intent Popup

Exit-intent popups get triggered when your visitors try to exit your website. As a result, you retain a huge number of visitors who would have otherwise abandoned your site. So, if you’re suffering from site abandonment, you should definitely create an exit-intent lightbox popup.

How to Create a Lightbox Popup

Now that you understand what a lightbox popup is and why you’d want to create one, how do you a lightbox popup? We recommend using OptinMonster to create your popups.

OptinMonster home

OptinMonster is the #1 conversion toolkit in the world and we’ve used it ourselves. OptinMonster makes it super simple to create powerful popups that convert. And you’ll never have to use any coding at all.

We even wrote a full review of OptinMonster.

You can check that out, or get started with your campaign right now. All you have to do is signup for OptinMonster and follow along with the rest of this article.

Step #1: Create a Campaign

Head over to your OptinMonster dashboard and hit the Create button:

Create a new popup campaign

Select the Lightbox Popup campaign type:

create a lightbox popup

Then, choose a campaign template. You can choose whatever template you like, but we’re going with the Simple campaign type for this tutorial.

Select popup campaign theme

Now, give your campaign a name. Remember, this campaign name is for you and you’ll likely create a whole bunch of these popups with different targeting options. So, give the campaign a meaningful name or you’ll end up really confused later on.

Also, depending on your plan, you can also use OptinMonster on multiple sites. So, select the website where you want to display your campaign as well.

Create campaign identity

Press Start Building when you’re done.

Step #2: Edit Your Popup

With OptinMonster, you’ll get a visual drag and drop popup builder. Once you’re done creating your campaign, you’ll be able to edit even the tiniest details about your popup. Start by editing your popup headline:

Edit your headline

The most amazing part here is that you just click whatever text you want to edit and change it inline. There’s no need to fill out a form or edit any HTML code in the popup.

And then, adjust your button text and appearance to create a clear call to action:

Customize CTAs

When you’re happy with your popup’s appearance, you can move on to more advanced settings.

Step #3: Set Display Rules

Display rules are meant to define when your campaign shows up on your site and who sees it.

Popup display rules

Our recommendation is that you change the trigger condition to exit-intent:

Exit-intent lightbox popup

Click Next Step to choose the Action. Here, we recommend that you set Show the campaign view to Optin View, set the show with MonsterEffect to any entry animation you like, and play sound effect to any sound effect for your popup.

Campaign Action Settings

And then, click the Next Step button. You can see the full extent of your settings in the Summary tab.

Step #4: Setup Your Email Integration

The next step is to set up your email integration. Click Add New Integration from the Integrations tab and select your email service provider:

OptinMonster Integrations

We recommend using Drip for your email marketing if you don’t already have an email service provider.

Step #5: Publish Your Lightbox Popup

When you create a new campaign, it’s Paused by default.

Go to the Publish tab from the top menu to see the Publish Options. Then, set the status to Publish and select the website platform:

Publish OptinMonster campaign

If you’re running a WordPress site, the OptinMonster plugin handles the rest of the setup automatically. It’s the same for Shopify and BigCommerce. For any other site, click on Any Site and paste the embed code in your website’s head:

Global Embed

And you’re done!

Wrapping Up

That’s all for this one, folks!

Let us know if this article helped. Creating popups on your site can help you convert your traffic into email subscribers and genuine business leads. And we highly recommend that you start creating lightbox popups right away.

And if you’re looking for an affordable way to grow your traffic, we recommend using push notifications. Push notifications can help you bring in more repeat traffic and site engagement. You can also create automated push notification campaigns that generate sales.

Not convinced? Check out these resources:

We recommend using PushEngage to create your push notification campaigns. PushEngage is the #1 push notification software in the world. So, if you haven’t already, get started with PushEngage today!

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Engage and Retain Visitors AfterThey’ve Left Your Website

Increase the value of every web visit with Push Notifications that are hard to miss.

  • Forever Free Plan
  • Easy Setup
  • 5 Star Support