Optimizely Blog

Grow your Optimization and A/B testing skills

X

Download our FREE Testing Toolkit for A/B testing ideas, planning worksheets, presentation templates, and more!

Get It Now




Let’s face it, lightboxes are everywhere. If you’re not familiar, lightboxes are those stylish modal pop-ups that allow site visitors  to view larger versions of images or additional text without having to leave the current page. Whether you’re logging in, scanning through photos, or being shown the latest Black Friday deal, odds are you’ve got a lightbox in front of you. 

With this in mind, it’s no surprise that here at Optimizely we get a lot of questions regarding testing these lightboxes. A very common subset of which is adding an entirely new one to the page.

In this article I’m going to walk through how to make this happen using the Optimizely platform. We’re going to assume that you already have the code whipped up by your developers (or yourself!), but from there it’s just three easy steps:

  • Adding HTML
    • To provide the structure.
  • Adding CSS
    • In order to make it look like a modal.
  • Adding JavaScript
    • In order to allow users to close it.

In our example, let’s hypothetically assume that Starbucks wanted to show an Optimizely lightbox to visitors who hit their homepage.

Adding HTML

As you might have guessed, the first step here is getting the actual structure for the lightbox on the page. We can do this using the “Insert HTML”. I’ve gone ahead and added it to the footer here–

Lightbox_Insert_HTML

Now the contents are added to the page, but they aren’t pretty–

Edit__Sample_Lightbox-2

And they definitely don’t resemble any sort of modal. We need to add the CSS to do this.

 

Adding CSS

A CSS (Cascading Style Sheet) file formats the raw HTML structure into something that looks presentable. Since we’re adding brand new content to the page, we can simply paste the CSS into Optimizely’s “Global CSS” feature–

Lightbox_Global_CSS

Now we’ve got the look we want–

Lightbox_Added

However, the user still has no way to close the lightbox. As it stands now, it will sit on top of your webpage forever and block the page. We need JavaScript to provide this functionality.

Adding JavaScript

We want to bind to the “click” event of the “X” in the upper right corner of our modal, such that when a user clicks it the modal destroys itself. We can do this by adding a couple lines of code to the <Edit Code> section–

Lightbox_Add_JS

Now your users won’t riot when they are unable to use your webpage. And that’s all there is to it!

There are many more advanced options we can set within Optimizely. For example:

  • Exactly when to show the lightbox
    • Simple time delay?
    • After a certain number of visits?
  • How many times to show the lightbox
    • Every visit?
    • Every session?
    • The next three visits?

But that is best left to another discussion. So go ahead, give it a shot, and start adding some new functionality to your website!

If you want to replicate the exact modal that was added here, simply follow the links below for the code. Happy testing!

Appendix

Code

Variation Code

Global CSS

 

Optimizely X
comments powered by Disqus