Add custom code

The new Visual Editor gives you multiple ways to add custom code to your experiments, whether you want the code to apply to all variations in the experiment or just one.

Custom code for a variation

Optimizely Web Experimentation lets you use custom JavaScript or CSS code to make changes to your site and extend your testing capabilities beyond Optimizely's standard toolkit. With custom code, you can:

• Execute your custom code only for visitors bucketed into a particular variation instead of all visitors.
• Use CSS selectors to change multiple similar elements simultaneously instead of making individual changes.
• Load an external JavaScript file as part of a variation, such as to add an Olark or ClickDesk widget. You cannot add code that includes a <script> tag using the Edit HTML feature in the Visual Editor, but you can paste external JavaScript into the <Edit Code> box. Optimizely executes your custom JavaScript by appending it as a <script> tag to the body of your page.

To use custom code, click Variation Code Editor.

 To learn more, see Custom code.

Custom code for experiments

You can add custom, shared experiment code through the new Visual Editor that applies to all variations in the experiment. The code must be JavaScript or CSS.

1. Click Create > Experiment code.

   

2. Select JavaScript or CSS, and enter your custom code.

3. Click Save and apply.

   

Experiment code within the Visual Editor is the same as the Shared Code page within the experiment. Any code you save and apply in one location, such as Experiment code within the Visual Editor, is automatically added to the other location, such as Shared Code within the experiment.

See Shared code: Run custom JavaScript and CSS across all variations for more.