Add a timed modal in Optimizely Web Experimentation

  • Updated
  • Optimizely Web Experimentation

Timed pop-up modals (also called lightboxes) can emphasize a call to action on your website, like asking visitors to sign up for a newsletter or share your page on social media sites. You can add a timed modal extension with Optimizely Web Experimentation to test a page with a pop-up.

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

Create a timed pop-up modal

  1. Go to Implementation > Extensions.

  2. Click Create New Extension... and select Using JSON.
    CreateNewExtension.png

  3. Open Timed Modal config.json and copy the code.

  4. Paste the code in the Create Extension From JSON field and click Create Extension.

  5. Click the extension name (Timed Modal) to open the Extension Editor. You can change the headline, description, and call-to-action (CTA) text and link. You can also add an image to the pop-up modal.
    TimedModal.png

     

  6. Change the number of seconds before the modal pops up. Developers can also code extensions for modals that display after a certain user action.

  7. Click Save.

Enable the timed modal extension

  1. Go to Implementation > Extensions.

  2. Click the More icon and select Enable.

EnableTimedModal.png

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.

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

  2. Select the variation.

  3. Click Create > Timed Modal.

  4. 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.

  5. Click Save.

AddTimedModal.png