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.
- 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.
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–
Now the contents are added to the page, but they aren’t pretty–
And they definitely don’t resemble any sort of modal. We need to add the CSS to do this.
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–
Now we’ve got the look we want–
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–
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!