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

  • Updated
This topic describes how to:
  • 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 Web Experimentation to test a page with a pop-up modal, add one using the Optimizely Web Experimentation timed modal extension—you do not 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.
    json-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.
    popup-modal-1.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

Enable the timed modal extension with the steps listed below:

enable-extension.gif

  1. Navigate to Implementation > Extensions.

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

Now, you can add your timed pop-up modal extension to experiments!

Add your timed pop-up modal to an experiment

Add your timed pop-up modal to an experiment with the step-by-step instructions below.

add-timed-modal-ext.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. Below 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 Web Experimentation extensions.

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