---
title: Get started with experience templates
slug: performance-edge/docs/kex--get-started-with-experience-templates
docTags: 
createdAt: 2026-08-05T21:01:08.462Z
---

- Optimizely Web Experimentation
- Optimizely Performance Edge
- Optimizely Personalization

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

To use experience templates in Optimizely Performance Edge, see [Custom code and utility functions](docId\:zxmd_mbZEen70U2nDe4dQ) to learn how to implement custom code for campaigns and experiments.
:::

Experience templates in Optimizely Web Experimentation and Optimizely Personalization let you streamline campaign and experiment creation and reduce code duplication. You can use the pre-built templates provided by Optimizely to quickly create a campaign or experiment with little to no development, or build your own. See [Templates](docId:_jPXsRoLvwqQZc3XGFbdc) for more information for developers.

![Updated Templates.png](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/WzK1mLilJxhHgGjX5SdPC-20260720-150207.png)

## Optimizely templates

Optimizely includes the following pre-built templates:

- **Banner** – Displays information at the top or bottom of the page. For example, use this to highlight a special offer for loyalty members.

  ![SampleBanner.png](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/QpREldamVU9YldhRko6og-20260720-150207.png)
- **Exit intent pop-up **– Displays a message before a user exits. For example, use this to offer a promotion before a user abandons a cart.

  ![SampleExit.png](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/2mB3b8AZNR8Aa4byL04RA-20260720-150207.png)
- **Image pop-up **– Displays a pop-up with an image. For example, use this to share relevant news with an audience, enticing them to click deeper into your site.

  ![SampleImagePopup.png](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/76hCUsQOIsfaU6i9psPa4-20260720-150207.png)
- **Countdown timer ** – Displays a countdown timer. For example, use this to count down to the start of an event.

  ![SampleCountdown.png](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/cVNHB4zOrEowQZG2MZr8C-20260720-150207.png)
- **Tooltip with icon **– Displays a tooltip on one or more elements. For example, use this to provide more details about a term a user may not know.

  ![SampleTooltip.png](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/Wal7gQDbtCSbQBIVFv72k-20260720-150207.png)
- **Banner with button **– Displays information at the top or bottom of the page. For example, use this to highlight a special offer for loyalty members.

  ![SampleBannerwithButton.png](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/ZN2y6RWEKMIE1AYn1b_wo-20260720-150208.png)
- **Badge **– Displays a generic badge with text to highlight information. For example, use this to highlight a new area of the website for a specific audience.

  ![SampleBadge.png](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/uffOAF1nR6FmVvg4FbS_Q-20260720-150208.png)

You can use Optimizely's templates as is, or you can save a copy of them within **Implementation** to make changes to them, such as editing the CSS to make the template on brand. 

### Disable Optimizely's templates

You can disable Optimizely's pre-built templates. Go to **Settings > Advanced** and uncheck the box for **Enable Optimizely Templates**. Click **Save**. The templates will always display in Implementation, but users cannot select them when picking a template to apply to a variation.

## Manage templates

Go to **Implementation > Templates** to see the pre-built templates and any custom templates you have. Use the **Creator** filter to change between Optimizely's templates and your custom templates.

![Templates\_CustomFilter.png](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/Zcd5EjGazQJjABi6CkHiQ-20260720-150208.png)

The Templates dashboard has a **Status** column that lists the status of the template. You can also filter by status.

- **Draft **– Created but not finished.
- **Enabled** – Created and able to be used in campaigns and experiments.

![Templates Status.png](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/uquofJ80CQJyqcrmztvcT-20260720-150207.png)

Click **Create Template** to **Duplicate an existing template**, **Use JSON**, or **Use Editor** to create a template.

### Duplicate

You can duplicate any existing template to use it as a starting point and tweak it for your needs, such as editing the CSS to match your brand.

1. Click **Create Template > Duplicate an existing template**.

   ![DuplicateTemplate.png](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/cMzO0FVy2tI1IfNVp9z5a-20260720-150208.png)
2. Select your template from the modal and click **Next**. You can filter or search by name to find a template.

   ![DuplicateTemplateModal.png](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/hTm7WialTqWEwsuFfeI8I-20260720-150208.png)
3. Enter a **Template** **Name **(required), **Edit URL**, and **Description**. Click **Save**.

   ![NameDuplicateTemplate.png](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/VYZMw6PtdtqAjdmgcrs5G-20260720-150208.png)
4. Use the Visual Editor to edit the template as needed.

### Create using JSON

You can create templates using JSON. Click **Create Template > Use JSON**. Enter the code into the modal that displays and click **Create Template**. See the [developer documentation](docId\:ZEdV7AKHOKwSBGN9hJIgr) for information.

![CreateTemplate\_JSON.png](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/ca-92KJ2v57CSRPcdkRCU-20260720-150207.png)

### Create using Editor

You can create templates using the Visual Editor. Click **Create Template > Use Editor**. Enter a **Template Name** (required), **Edit URL**, and **Description**. 

![CreateTemplate\_Editor.png](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/wzljvSmN_DAE_1TLrnmp3-20260720-150207.png)

Click **Create Template**. Use the Visual Editor to design the template.

## Apply templates in the Original Visual Editor

You can apply the Optimizely templates or your custom templates to campaigns and experiments in the Original Visual Editor.

1. Select your campaign or experiment.
2. Select the experience or variation you want to edit.
3. Click **Create Change** > **Browse Templates**.

   ![BrowseTemplates.png](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/LxaOmHVJvxZn8E-a4tWQe-20260720-150208.png)
4. Select the template you want to apply, and click **Use Template**.

   ![SelectTemplate.png](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/3TYtLAMsvQ5u0a5U9k20x-20260720-150208.png)
5. Use the Visual Editor to make your changes.
6. Click **Save**.

### Apply templates in the New Visual Editor

You can apply the Optimizely templates or your custom templates to campaigns and experiments in the New Visual Editor.

1. Select your experiment or campaign.
2. Go to **Design** > **Variations**.
3. Click **Edit** > **Edit with new editor**. You can also click the variation name.

   ![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/rjRMg12UmaMeC_lugEOUj-20260720-150208.png)
4. Click** Edit** and select **Insert template** within the Visual Editor overlay.

   ![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/IWO0IS_juV_5fyYcL6mSe-20260720-150208.png)
5. Filter as needed, select the template you want to apply, and click **Select**.

   ![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/goRUUBDoN5UfWTt66-NLB-20260720-150208.png)

Learn about the [New Visual Editor](docId:-71fnhHzz_HGFgIDE1_wO).

## Considerations

Depending on the number of templates you use in active campaigns or experiments, this may slightly increase the time to execute the snippet. Projects without templates do not have any impact on performance. Optimizely has multiple measurements in place and continuously monitors the performance metrics.