Create reusable templates for custom features in Optimizely Web Experimentation using Extensions

  • Updated
This topic describes how to:
  • Use extensions, or reusable templates, to easily make changes in the visual editor
  • Enable non-technical users to tweak parameters of extensions like image carousels, banners, and lightboxes
  • Copy extensions from one project to another

Optimizely Web Experimentation extensions are reusable templates that developers can use to create custom features for non-technical teams. Extensions streamline experiment creation and reduce code duplication. Teams can use extensions to add custom features to experiences without ongoing developer support.

Extensions are only available on select plans. Contact your Customer Success Manager to request access.

For example, you might use extensions to build an image carousel style for the homepage and code it to rotate between images. From then on, you can quickly insert an image carousel on any page and modify the images for a specific campaign without writing more code. With extensions, non-technical users can easily add and edit elements on their webpages that might otherwise require coding. Check out how to add a pop-up modal without code for an example of how extensions work.

When you build an extension for an experiment or project, it will only be included in the snippet if it is actually used in at least one of the experiment's variations. This means that archived, unused and draft-mode extensions are never built into the snippet.

If you want to remove an extension from your snippet, you must disable it from the Extensions menu (Implementation > Extensions).

Optimizely Web Experimentation provides a library of pre-built, re-usable extensions.

Other extensions you might build include (but are not limited to):

extensions.png

Learn about building extensions in the Optimizely Web Experimentation Developer Documentation.

Copy extensions from one project to another

The easiest way of copying an extension from one project to another is via the JSON file. The steps are as follows:

1) Open the extension.
2) Click the Edit JSON button.
3) Copy the JSON code.
4) Create a new extension by selecting the Using JSON option.
5) Paste the JSON code.
6) Save the extension.

screencast 2019-01-31 15-32-37.gif