---
title: Example: Add a timed modal
slug: web-experimentation/docs/XFbH-example-add-a-timed-modal
docTags: 
createdAt: 2026-07-20T15:45:20.826Z
---

- 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](https://github.com/optimizely/library/tree/master/Extensions/Editor%20Extensions/Timed%20Modal) with Optimizely Web Experimentation to test a page with a pop-up.

:::hint{type="info"}
**Note**

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 ](https://github.com/optimizely/library/blob/master/Extensions/Editor%20Extensions/Timed%20Modal/config.json)and copy the code.
4. Paste the code in the **Create Template From JSON** field and click **Create Template**.

   ![CreateTemplate_JSON.png](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/zkfHCZYDaJ6T0TeUeuq7P-20260720-150038.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](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/dCRszE-VRS2H7YoQtapSM-20260720-150038.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](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/uwN5-YJ_d3yU35dFDwgpi-20260720-150038.png)