Skip to main content
menu_icon.png

Have questions about site performance or Google's upcoming search changes? Join our AMA, hosted by Michael Hood (Senior Performance Engineer) on Wednesday, July 11th at 8:30am PST.

x
Optimizely Knowledge Base

Add a pop-up modal (lightbox) without code in Optimizely X

relevant products:
  • Optimizely X Web Experimentation
  • Optimizely X Web Personalization
  • Optimizely X Web Recommendations

THIS ARTICLE WILL HELP YOU:
  • Test a page with a pop-up modal without using any code

Timed pop-up modals (or "lightboxes") are useful for emphasizing a call to action on your website, like asking visitors to sign up for a newsletter or share your page on social media sites. To use Optimizely to test a page with a pop-up modal, add one using the Optimizely X timed modal extension—you don't need to know how to code! Read on to learn how.

This extension will work with most websites, but it may not work with all websites. 

Create a timed pop-up modal

  1. Navigate to Implementation > Extensions.

  2. Click Create New... and select Using JSON.
    new_extension.png

  3. In a second browser tab, open Timed Modal config.json and copy all 57 lines of code.

  4. In your Optimizely tab, paste the code in the Create Extension From JSON field and click Create Extension.
    create_extension_json.png

  5. Click the extension name (Timed Modal) to open the Extension Editor. In the Editable Fields panel, you can change the headline, subheadline, and call-to-action (CTA) text and link. You can also add an image to the pop-up modal.
    extension_editor.png

    Scroll down to the bottom of the Editable Fields panel to change the number of seconds before the modal pops up. Developers can also code extensions for modals that appear after a certain user action.

  6. Click Save.

Enable the timed modal extension

  1. Navigate to Implementation > Extensions.

  2. Click the ... icon for the Timed Modal extension and select Enable.
    enable_extension.png

Now, you'll be able to add your timed pop-up modal extension to experiments!

Add your timed pop-up modal to an experiment

Here's a quick look at how to add your timed pop-up modal to an experiment, with step-by-step instructions below.

add_extension.gif

  1. Navigate to Experiments and select the experiment where you want to add the modal.

  2. Select the variation where you want to add the modal.

  3. Click Create.

  4. Under Create Options, select Timed Modal.

  5. Customize the modal fields specifically for this experiment. You can change the headline, subheadline, call-to-action (CTA) text and link, image, and number of seconds before the modal pops up.

  6. Click Save.

More resources

Learn more about Optimizely X extensions.

Check out the the full set of Optimizely's sample extensions in the Optimizely Extension Library on GitHub.