Example: Add a timed modal

  • Updated
  • Optimizely Web Experimentation
  • Optimizely Personalization

Timed 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 template with Optimizely Web Experimentation to test a page with a pop-up.

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

Create a timed modal

  1. Go to Implementation > Templates.

  2. Click Create Template and select Use JSON.

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

  4. Paste the code in the Create Template From JSON field and click Create Template.
    CreateTemplate_JSON.png

  5. Click the template name (Timed Modal) to open the 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 template

  1. Go to Implementation > Templates.

  2. Click the More icon and select Enable.

Add your timed modal to an experiment

  1. Go to Optimizations > 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 displays.

  5. Click Save.

AddTimedModal.png