Skip to main content


Optimizely Knowledge Base

Custom code in Optimizely Web

  • Optimizely Web Experimentation
  • Optimizely Performance Edge
  • Decide whether your experiments can benefit from adding custom code
  • Distinguish between variation-level code and experiment-level (shared) code
  • Add custom code to your Optimizely experiments 

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

  • Execute your custom code only for visitors who are bucketed into a particular variation instead of for all visitors.

  • Use CSS selectors to change multiple similar elements at once instead of making individual changes.

  • Load an external JavaScript file as part of a variation, for example, to add an Olark or ClickDesk widget. You can't 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.

Variation-level code vs. experiment-level (shared) code

You can apply custom code at the variation level, or you can apply it to an entire experiment, across all variations (including the original). Common use cases for experiment-level JavaScript code in Optimizely include:

  • Sending Optimizely information to your analytics service.

  • Adding API calls for custom events.

  • Adding functions that can be used across multiple variations and calling them with different parameters in the variation code.

Check out our shared code article to learn more about applying custom code to an entire experiment.

Add custom code to a variation

Here's how to add custom code to a variation, with step-by-step instructions below:


  1. From the Experiments dashboard, click the name of the experiment.

  2. Select the variation you want to enhance with custom code. This opens the Editor.

  3. Click the Variation Code Editor icon in the top-right of the Editor window to begin adding custom code.

  4. The Variation Code Editor window opens to the JavaScript tab, where you can add custom JavaScript to the variation. Click the CSS tab to add custom CSS.

  5. Paste or type your code into the Variation Code Editor text box.

  6. Click Save & Apply (JavaScript) or Save (CSS) to save your custom code. To cancel your changes, click Revert to Saved instead.

Congratulations! You've successfully added custom code to a variation.

Custom code timing: Synchronous and Asynchronous

Synchronous Timing

Include the custom code in the snippet, applying the change before the page is visible. Use for lighter changes that need to run right away without flashing, like a headline swap. 

Asynchronous Timing

Download changes after the snippet, applying the change while the page loads. Use for heavier changes where a delay won't be noticeable, like a popup or a section below the fold. 

Here's how you can change a custom code's timing:


  1. Open the Variation Code Editor.

  2. Select the drop-down menu next to the Help button. It should say either "Synchronous Timing" or "Asynchronous Timing."

  3. Select the timing you want.

  4. Click on the blue Save & Apply button.

Custom code in Optimizely

Here are a few things to keep in mind about custom code in Optimizely:

  • Custom code runs immediately. In Optimizely, your code runs exactly as written, often before the DOM is ready. This gives you as much control as possible over the timing of custom code execution. You can modify the timing by including code that specifies when things should run.

  • Custom code and visual changes are separated. In Optimizely, the visual changes that you make aren’t instantly translated to code. Instead, we store the full structure of what you change in the Visual Editor and simply list a summary of those changes in the left sidebar. These changes do NOT show up in the custom code box the way they did before.

  • There is no jQuery dependency in Optimizely. If you don’t need jQuery for your custom code (in variation code, experiment code or project code) you can remove jQuery from the Optimizely snippet.

  • Utility functions are available. Learn more in our developer documentation.

In traditional Web experimentation, optimizely.get(‘utils’) provides access to utilities like waitForElement, observeSelector, poll, and waitUntil, all of which are documented here. On a page running Performance Edge, a reduced set of utilities is available, on window.optimizelyEdge.get('utils'). The utilities available in Performance Edge are documented in the Performance Edge API Reference.

  • You can add your own jQuery in Optimizely. Check out this article to learn more about jQuery and the $ variable in Optimizely. For more information about custom code, check out our developer documentation.

In Optimizely, the following code won't work in Personalization because the body element doesn't exist at the time when the code runs (and remember, custom code runs immediately):

$(‘body’).css(‘background-color’, ‘red’);

To delay running the code until the whole page is loaded, use jQuery’s document.ready function:

$(document).ready(function() { 
$(‘body’).css(‘background-color’, ‘red’);

To make changes to your variation without worrying about timing, use the custom CSS option. These CSS changes are applied by appending a style tag to the end of the body tag, which more efficient than making style changes than JavaScript or jQuery.

Since there is no jQuery dependency in Optimizely, you can remove jQuery from the Optimizely snippet if you don't need it for your custom code (in variation code, experiment code, or project code).