Home  ›   Blog   ›  Lightbox Popups On Website: How To Create Them + Useful Tips

Lightbox Popups On Website: How To Create Them + Useful Tips

How to Create a Lightbox Popup

Lightbox Popups are all over the internet.

From an eCommerce website displaying a discount coupon to a blogging website displaying lead magnets, you can find these popups pretty much everywhere on your screen. 

Living Online, a digital marketing firm, witnessed a weekly increase of 900% in email subscribers using lightbox popups. From embedding videos and animations to making product announcements and displaying personalized messages, these popups can help businesses convert more shoppers into customers.

And not just a decent conversion. When used correctly, popups can boost conversions between 15-300%

So, the question is how to create good, high-converting lightbox popups that are both user-friendly and Google-friendly.

This comprehensive guide will answer all your questions. 

What is a Lightbox Popup?

A lightbox popup is a window overlay that appears on the center of your screen over a web page. When this popup appears, the content in the background is hidden, and the website is dimmed out. The goal here is to capture visitors’ attention so that they focus on your offer in the popup and not get distracted by the rest of the screen.

As the visitors can’t interact with website elements or navigate to other pages, they will have to act on the call to action (CTA) like filling a form, adding products to the cart, avail discounts, etc., or exiting the window and continue browsing.

Why Lightbox Popups Capture More Leads & Conversions

Adding lead capture forms on the bottom of your landing pages or having a slide-in bar on your blog page isn’t as effective as a lightbox popup. Why so? 

Here are some reasons why lightbox popups can help you get more leads, sales, and conversions.

Eye-Catching Design & Animation

A lightbox popup appears at the center of your page, and you have the option to use animation to display it. These are more prominent than a nano bar or sidebar, so visitors can notice them easily. This is actually one of the leading reasons why such popups work so well.

All you have to do is come up with an engaging design and relevant content copy. If the lightbox popup is attractive enough, your offer and CTA will be the only thing in front of your site visitors and they will get a brief moment to grasp what you have to say.

Triggers at the Perfect Moment

You can control the timing of lightbox popups on your website. That means you can display the popups at the right moment to the right visitors so that they don’t interrupt with user experience. 

You have the option to trigger the popup on a specific page after a visitor clicks a link, when they have spent some time (5-10 seconds on-site) or when they show exit intent. So, this is a really great way to display targeted messages.

Crystal Clear Call to Action

As lightbox popups remove all the distractions and centralize visitors’ attention to a single call to action (CTA),  the eyes naturally notice the offer. With a single CTA, visitors do not have multiple choices, making it easier for them to decide. 

Why so? Because giving someone, more choices or displaying multiple CTAs create confusion, and visitors are less likely to make a decision. So, a well-timed lightbox popup is perfect for pushing visitors down the conversion funnel.

Personalized Offers

Using targeting options, you can display lightbox popups to specific visitors. This provides you with an opportunity to personalize your offers. Based on visitors’ interest or their geo-location or from the source they visited, you can create engaging, personalized popup campaigns.

Using behavioral targeting and tracking visitors’ site activity in real time, you can display more relevant lightbox popups. The more personalized the offer, the more likely are visitors to make a purchase or leave their contact information.  

Now that we know why lightbox popups are important to capture quality leads and boost sales let’s see how to create a delightful, high-converting lightbox popup with ease.

How to Create a Lightbox Popup

Picreel is a popular popup maker that lets you create beautiful lightbox popups in no time. It is a pretty straightforward process once you sign up and set up your Picreel account.

Step 1: Create a Lightbox Popup Campaign

As you log in to your Picreel account, hover over the Campaigns tab and click “+ New Campaign” to create your lightbox popup campaign.

Step 2: Choose Design for Your Lightbox Overlay

As you initiate your campaign creation process, you will be redirected to the templates page. Picreel has a library of 100+ popup templates with unique designs. To choose a lightbox popup template, click “Lightbox” and you will see the available templates.

Hover the cursor to any template to preview it before selecting it for editing. Once you make a suitable pick for your popup campaign, click Customize to edit the template as you want.

Step 3: Edit Your Lightbox Popup

In this tab, you can make changes to your popup as you like. From editing the content copy to changing the image, CTA, color combination, and more, you can customize the lightbox on the website the way you want. There are six customization options available to you:

  • Design: The Design tab is all about customizing the color combination of your lightbox popup. You can change the color of the button, text, headline, and background. Make sure to match the colors well with your site theme.
  • Fields & Text: Here, you can first upload the image that you want to insert in your popup. Next, you can edit the overlay text such as the headline, copy, CTA text, field text, and more. You can add up to three fields to your popup. 

For example, click “All three fields,” and you can collect the name, email address, and mobile number of your site visitors. As the fields are also customizable, you can ask for any other info as well.

  • Options: Under the Options menu, you can select where to redirect your visitors when they click the CTA button. Other settings in this menu include the popup animation, position of the popup on the screen, ways to hide the overlay, and corner radius. You can configure these settings to further customize the popup experience for visitors.
  • Banner Settings: If you don’t want to be intrusive right away, you can nudge visitors with a banner on the top or corner or a notification bell. When they click on the banner, the lightbox popup will load. You can choose the banner type and modify the banner color and text here.
  • Fonts: Here, you can choose the font style, font weight, font size, and alignment of the text. If you want to upload some other font that’s not on the list, then you can add custom fonts by clicking “Add New Font” in this menu.
  • Personalization Settings: Personalization is about making your popup more engaging and customized for your visitors. By enabling this option, you can add dynamic text to the popup from the website, such as visitors’ names, products in their cart/wishlist, or anything else that’s coded on your website.

Once you have customized your pop-up lightbox, you can click Save on the top right to save your progress and move to the final step.

Step 4: Configure Popup Campaign Settings

Your lightbox popup design is ready to roll. However, you also need to specify where you want to display the popup and choose the target audience, plus some other options. Here’s a quick walkthrough of this.

  • Under “Basic Settings”, enter the site URL where you want to display the lightbox popup or choose specific web pages by adding those URLs.
  • The next option is “When Overlay Appears”. In this, you can choose when to display the popup. You can pick the dates if you are running a seasonal campaign.
  • In “Trigger Options”, as shown in the image below, you can choose when to trigger the popup once the visitor is on your site. The trigger options include displaying the popup when the visitor:
    • spends X seconds on the site
    • shows exit intent (tries to exit your website)
    • is inactive on your site for X seconds
    • scrolls down or up to X percent
    • clicks on a certain website element
  • Under the “Impression Frequency”, you can select the frequency of displaying your lightbox popup to the same visitor. It simply means the number of times you want to display the popup to a visitor. For example – once a week, once a month, and so on.
  • The last set of options is under the “Other Options” tab. From here, you can select the target audience to whom you want to display your lightbox popup
  • All visitors, returning visitors or new visitors
  • Visitors coming directly from your URL, search engine, other sites, or anywhere
  • Geo-targeting: visitors coming from anywhere or specific countries/region
  • Visitors browsing X number of pages
  • Visitors browsing from desktop, mobile, or tablet
  • Cookie targeting (display popup based on certain cookies)
  • You can then prioritize this lightbox popup campaign if you are running multiple campaigns on the same URL. From personalization options, you can personalize the popup with the data collected previously or from CRM.

In the end, after configuring all the settings, click “Save” to launch your lightbox popup campaign. Under the Campaigns tab, you can see the campaign status and check for the conversions, visitors count, and leads in the Statistics section.

It is as simple as that! No coding or technical knowledge is required!

Proven Lightbox Popup Hacks to Capture More Leads

Creating and displaying lightbox popups is super easy, as we saw above. However, to get maximum conversions and more leads for your email marketing campaigns, you need to do more than just display a classic lightbox on your site. 

Here are some of the best popup design hacks to attract more visitors & capture more email addresses.

Gamify Your Popups

Lightbox Popups

Visitors always love to interact and participate in fun activities. Using a special lightbox popup such as spin to win, wheel of fortune, reveal your offer, etc., you can provide customers with lucky prizes. This helps you easily engage with more visitors and collect more email subscribers.

In this popup example, as visitors will have to enter their email addresses to participate in the discount spin game, it acts as a great lead magnet. As soon as visitors get their reward, the next popup window will redirect them to their cart, where the coupon will be automatically applied, guiding them to complete the purchase.

Display Popups in Different Languages

If you have incoming visitors from across the globe, then you should have your lightbox popup available in different languages. Generally, popup ads are seen in English but when visitors see popups in their native language, they are more likely to respond.

Using geo-targeting, you can target people coming from different locations and display relevant lightbox popups. Language detection is also possible through the browser cookies, and this way, you can show them more targeted offers in their native language.

Trigger Popups Depending on Time Spent/Page-Visit Count

Randomly throwing a popup at your readers or visitors is not the best strategy to capture their attention. This can lead to an annoying experience. However, if you trigger popups smartly at the perfect moment, you can significantly boost your conversions.

One of the proven and efficient ways to trigger lightbox popups is when the visitors have spent some time on your site or have visited X number of pages. Let’s say, if a visitor is on your blog page, let him read a couple of blog posts and then display your newsletter subscription lightbox. The time that you allow them to go through your content makes your offer more interesting.

Use Exit Popups

7 out of 10 people, on average, abandon their carts, and no one wants to miss out on an opportunity to convert these visitors (who are a step away) into customers. For abandoning visitors, exit popups are perfect to attract their attention.

Using exit-intent overlays, you can trigger the lightbox at the moment the visitor is about to leave. With a compelling offer such as discount code, free shipping, gift card, limited-time deal, etc., you can easily bring these customers back. Moreover, you can capture their email addresses to send abandoned cart emails later.

Always A/B Test Lightbox Popups

A/B testing is a crucial CRO (conversion rate optimization) practice in marketing and that applies to lightbox popups as well. To understand what your site visitors actually like, you need to make slight changes to your popup elements and see how visitors respond.

Make changes to the content copy, graphics, color combinations, CTA, trigger settings, and more to check what works best for your business. Analyze the conversion results and keep a proper record of them for future reference. Also, make sure to follow A/B testing from time to time to maximize your leads and conversions.

Time to Create Your Shining Lightbox Popup!

While some popups are intrusive or annoying, others can genuinely help you improve the user experience. Lightbox popups are the ones that allow you to interact with engaged visitors and deliver important information, coupons, or discount offers.

Using a leading popup tool such as Picreel, you can easily create beautiful & engaging popups. As mentioned in the steps above, you can easily choose your target audience and configure the trigger options to get the best results. In the end, lightbox popups are all about constant improvement, and with the A/B testing module, you can smoothly test popups. 

Over to you. Time to grow your leads & conversions with lightbox popups!

Do you want instant 300% growth?

Picreel popups can get YOUR website 300% instant sales growth. See Case Studies.

About the author

Daniel Nicholes shares insights about CRO, persuasive marketing, exit-intent strategies, and using nudges to capture consumer behavior insights with the goal of enhancing user experience. Daniel writes about CRO methods, including landing page optimization, site intercept surveys, popups, and how to optimize the complete customer journey. Daniel actively contributes to industry discussions, offering actionable & practical advice for experience optimization.