What Is a Lightbox & How Do I Make One?

Have you ever been browsing on a website, maybe looking at some really great shoes, and then been interrupted by a popup that appears at the center of your screen? Maybe you were annoyed. Or maybe you were excited because it was offering a discount.

Popups are a controversial trend in web design. They can worsen a user’s experience if the timing, design, or copy is off. That’s why Google began devaluing mobile pages that show “intrusive interstitials” — including popups that obscure the main content — back in 2016.  

But that doesn’t mean popups are completely off limits. In fact, when done right, they can provide the user with important information and actually increase your conversion rate. Lightbox popups, for example, can notify users about promotions, events, or resources they may be interested in — in exchange for their email addresses or other information you want.

When popups provide value to visitors, they can be hugely successful. According to a study of 1.7 billion popups by Sumo, the average conversion rate for all popups is 3.09%. But the top 10% highest-performing popups had a much higher average, with a whopping 9.28% conversion rate.

To help you create effective and engaging popups that convert on your website, we’ll go over what a lightbox is, some popular examples, and how you can create your own.

Lightbox popups are effective for a few reasons. They remove all other distractions on a page and clearly tell visitors what they should do next. Plus, you can click anywhere outside of the popup to close them. As seen in the example above, you can usually click the X button that appears when hovering your mouse or click the underlined text that appears below the button as well. These options make a lightbox popup a much less frustrating alternative than other types of popups.

What’s most important is having the lightbox popup be relevant to the visitor and the reason they landed on your site or page. A discount code on a product page is the clearest example. Placing an email signup form on a blog post is also common and effective. You know your blog posts are helpful and unique, so you place a lightbox popup that asks the reader to sign up for more helpful, unique content.

Now that we understand what a lightbox is and why it’s effective, let’s look at some real examples on websites.

Lightbox Website Examples

Lightbox popups can be used for a variety of purposes: to get more newsletter subscribers, generate sales, attend an event, entice people not to leave your site, and so on. Below let’s look at a few examples designed to achieve these different purposes.

Newsletter Signup Lightbox

Newsletter or email signups are the most common lightbox popups. Below is one from The New Yorker. This simple and minimalist design appears once you’ve viewed an article on their site. The only pop of color is the CTA button, which makes it more eye-catching than the dismiss button.

Image Source

Login/Signup Lightbox

Increasing signup and login conversions is a core metric for any digital business. Jeff Chang, a growth technical leader at Pinterest, defines this as “the art of building new user intent and converting intent to authenticated users” on the Growth Engineering Blog.

Pinterest excels in this art. When visitors click on a pin from a search engine results page, they can view it and scroll down to see other pins. At that point, Pinterest shows visitors a lightbox popup asking them to log in or sign up to see more content. While visitors can exit out to continue scrolling, those who are ready to sign up will and those who already have an account can easily sign in.

Image Source

Content Offer Lightbox

Blogging can help get visitors on your site, but offering them additional free content can help convert them into leads. So say you have blog posts that anyone can access. Then you have reports, spreadsheets, infographics, videos, and any other piece of content that visitors can’t normally access. You can create a lightbox popup that asks visitors for their email address in exchange for these content upgrades.

Take Marketing 112 as an example. This Hungarian marketing company shows the lightbox below, offering their 2019-20 Marketing Trends Study for free, after a visitor has viewed a few of their blog posts.

Image Source

Here’s the same popup in English:

Discount Lightbox

One of the most common popups for ecommerce sites specifically is the discount lightbox. These popups offer online shoppers a discount or coupon to apply to their purchase in exchange for their email address.

The best part about these popups is that even if they fail to overcome common objections that a visitor might have — like, “I don’t have the budget right now” — and convince them to make a purchase, they can still succeed in getting a visitor’s contact information. Check out this example from Girlfriend Collective, a sustainable activewear brand.

Image Source

Upsell Lightbox

The upsell lightbox is another great way to increase your revenue, whether you’re an ecommerce site or a nonprofit. You may be trying to checkout and get a popup showing you related products you can add to your cart. Or you might be making a one-time donation on a nonprofit website and see a popup asking if you’d like to make it a monthly donation, as shown below.

Image Source

Below we’ll walk through the process for creating a lightbox so you can recreate any of the examples above or create your own.

How to Make a Lightbox for Your Website

You can create a lightbox from scratch, but it will require you to be familiar with HTML, CSS, and JavaScript. Non-developers can find tools that simplify the process so they don’t need to touch a single line of code to create a custom lightbox for their website.

The process of creating a lightbox varies depending on the website building platform or third-party tool you’re using. Below we’ll walk through the steps for creating one if you’re using HubSpot or WordPress.  

How to Make a Lightbox in HubSpot

We’ll briefly cover the process of creating a lightbox in HubSpot. For more detailed instruction, you can check out this Knowledge Base article.

1. To start, navigate to Forms in your HubSpot account. If you have a Professional or Enterprise account, then you’ll navigate to Marketing > Lead Capture > Forms. If you have a Starter or Free account, you’ll simply navigate to Marketing > Forms.

2. In the upper right corner, click Create form. Select Pop-up form from the left slidebar. Click Next.

3. Select the type of popup form, then click Next.

4. Customize the text, body, and button of your popup in the Callout tabs.

5. Then create and customize the form visitors will see if they click the CTA button.

You can also create a thank you message and follow-up email for your new leads at this point.

6. Set criteria for when you want this popup to appear on your site.You can simply type in the URL of the page(s) you want your popup to show up on and choose whether you want it to be triggered by a 50% page scroll, exit intent, or time elapsed. You can also set “exclusion rules” to hide your popups on smartphone and tablet, or for other reasons.

7. When you’re ready, just click Publish in the top right to take your pop-up form live.

How to Make a Lightbox in WordPress

There’s no built-in functionality for creating lightbox forms in WordPress, which means you’ll need a plugin.

The good news is you can download the free HubSpot WordPress plugin to seamlessly connect your WordPress website to your HubSpot account and get access to HubSpot’s popup tool. Then you’d simply follow the steps described above.

Image Source

To Popup or Not to Popup

While some popups are annoying and intrusive, others can help improve the user experience and boost your leads or sales. Lightbox popups, for example, can help draw the visitor’s eye to important information or offers— whether it be a content upgrade, discount code, or email signup. You just have to make sure to follow website design guidelines when setting the copy, design, and timining of your popups.