Get started with experience templates
- Optimizely Web Experimentation
- Optimizely Performance Edge
- Optimizely Personalization
Note
To use experience templates in Optimizely Performance Edge, see Custom code and utility functions 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 TemplatesTemplates for more information for developers.
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.
- 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.
- 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.
- Countdown timer – Displays a countdown timer. For example, use this to count down to the start of an event.
- 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.
- 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.
- 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.
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.
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.
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.
- Click Create Template > Duplicate an existing template.
- Select your template from the modal and click Next. You can filter or search by name to find a template.
- Enter a Template Name (required), Edit URL, and Description. Click Save.
- 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 documentationdeveloper documentation for information.
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.
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.
- Select your campaign or experiment.
- Select the experience or variation you want to edit.
- Click Create Change > Browse Templates.
- Select the template you want to apply, and click Use Template.
- Use the Visual Editor to make your changes.
- 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.
- Select your experiment or campaign.
- Go to Design > Variations.
- Click Edit > Edit with new editor. You can also click the variation name.
- Click Edit and select Insert template within the Visual Editor overlay.
- Filter as needed, select the template you want to apply, and click Select.
Learn about the New Visual EditorNew Visual Editor.
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.