---
title: Shared code: Run custom JavaScript and CSS across all variations
slug: web-experimentation/docs/zicH-shared-code-run-custom-javascript-and-css-across-all-variations
docTags: 
createdAt: 2026-07-20T15:44:58.774Z
---

- Optimizely Web Experimentation
- Optimizely Performance Edge
- Optimizely Personalization

With Optimizely Web Experimentation, Performance Edge, and Optimizely Personalization, you can add your own customized JavaScript or CSS code to your experiments. You can apply this [custom code](docId\:pmjSh15u5_adHbp8k3fFd) at the variation level, or you can use Optimizely's shared code feature to apply it to an entire experiment across all variations.[https://docs.developers.optimizely.com/performance-edge/docs/overview](docId\:YFnisWlSVzr7T-0agmJOP)

:::hint{type="info"}
**Note**

Optimizely Performance Edge and Optimizely Web Experimentation manage custom code the same way.
:::

## Shared JavaScript code

You can use shared JavaScript code to:

- Send Optimizely information to your analytics service.
- Add API calls for custom events.
- Add functions that can be used across multiple variations and call them with different parameters in the variation code.

:::hint{type="info"}
**Note**

Shared JavaScript evaluates first after a visitor is bucketed into the experiment and is run across all variations within the experiment or campaign.
:::

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/Oz7Yia028A9PjfJAugrPD-20260720-150206.png)

For example, enter the following JavaScript code into your experiment's or campaign's [Shared Code's](docId\:zgPmo7I4wS8oD3nM1thKj) JavaScript tab to create an alert that contains any string value:

```javascript
window.bringUpAlert = function(value) {
  alert("You are in " + value);
};
```

Then, in the[ custom code for a particular variation](docId\:pmjSh15u5_adHbp8k3fFd), call the function with the value of your choice:

```javascript
bringUpAlert("Variation #1")
```

## Shared CSS

Shared CSS lets you define CSS properties of content on the page without having to write it inline.

:::hint{type="info"}
**Note**

Shared CSS affects all variations, so modifying the CSS of an existing class or element causes all the variations (including the original page) to display the new style or behavior.
:::

It is common to use shared CSS to define classes and then use those classes to create content or modify existing elements by adding those classes.

For example:

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/WrK3P1vOD_5zBwDFJeub--20260720-150206.png)

This code defines a class called `purchaseForm`, which sets a background-image property for the element it is assigned to. It also defines the hover state of that class. You can use this CSS to create a rollover in your variations.

### Add custom JavaScript or CSS to an experiment or campaign's shared code

1. Click an experiment or campaign.
2. Click **Design > Shared Code**.
3. Go to the **JavaScript** or **CSS** tab, depending on which type of code you want to add.

::Image[]{src="https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/UZDtEVJpWOUYUSmakJ1cS-20260720-150206.png" size="100" isUploading="false" showCaption="false" indent="2"}

4. Type or paste your code into the text window and click **Save** or click **Revertto Saved** to discard your changes and start over.

See [Custom code in Optimizely Web Experimentation and Optimizely Performance Edge](docId\:pmjSh15u5_adHbp8k3fFd).