New Visual Editor

  • Updated
  • Optimizely Web Experimentation
  • Optimizely Edge Delivery
  • Optimizely Personalization

Using the new Visual Editor, you can experiment with Optimizely Experimentation and Optimizely Personalization.

The new Visual Editor is a WYSIWYG (What You See Is What You Get) editor that uses an overlay instead of an iframe. This lets you directly interact with the site itself and adjust the visitor experience for your experiment. After creating an experiment in Optimizely Experimentation or a campaign in Optimizely Personalization, you can open any of your variations and immediately edit page elements.

If you want to experiment with more elaborate changes to your site, Web Experimentation also supports adding your custom HTML and JavaScript with custom code options.

Features

  • Direct interaction and WYSIWYG editing – It uses an overlay, letting you interact directly with your site to adjust the visitor experience for experiments. You can immediately edit page elements after creating an experiment or campaign.
  • Flexible customization – You can add custom HTML and JavaScript, edit existing page elements (text, buttons, backgrounds, and images) with various properties, insert new HTML elements and images, and redirect users to different URLs for redirect experiments. You can also apply custom, shared experiment code to all variations.
  • Enhanced control and interactivity – An interactive mode lets you interact with your website within the editor, enabling actions like editing dropdowns or closing modal dialogs. You can also select elements based on custom attributes for more granular control.
  • Advanced experimentation features – The new Visual Editor includes advanced experimentation features, such as conditional activation (beta) to define conditions for experiment activation, reusable templates across multiple campaigns, and the ability to use any attribute to target an element with different operators.
  • Streamlined workflow – Changes are non-destructive and only visible for the experiment's duration. It includes a Variation Code Editor for custom JavaScript or CSS, and you can cycle through variations to view changes with clear status indicators

The following list includes all features and how to use them:

For troubleshooting, see Troubleshoot the new Visual Editor.

Open a Variation

  1. Select your experiment or campaign.

  2. Go to Design > Variations within your experiment or campaign and click New Editor for the variation you want to edit. You can also create a variation and open the Visual Editor by clicking Add Variation.

When you open the Visual Editor, you see the targeted URL (as specified when you created the experiment) open on a new page with the Visual Editor overlay at the bottom. It displays the way it currently does on your site.

New, modified, and live changes

When working with experiments, you can see numbered bubbles in gray, orange, and green. These colors indicate the status of your changes:

  • Gray – No changes made since the last publication.

  • Orange – A new change, modification of an existing change, or deletion of an existing change.

  • Green – Changes published.

Cycle through variations and view changes

Click the variation tabs to switch between different variations. To see the specific changes for a variation, click More (...) next to the variation's name. If you need to make a change, click it to open the element change window and make the necessary adjustments.

To delete changes:

  1. Open the changes window.

  2. Click More (...) > Select.

  3. Select the change you want to delete.
  4. Click Delete.