# Visual Editor Setup & Usage

> For AI agents: a documentation index is available at [/llms.txt](/llms.txt). Append `.md` to any page URL for markdown, or send `Accept: text/markdown`.

## How Visual Editor v3 works

Visual Editor v3 is a no-code Chrome extension for building and running A/B tests directly on any website. You create the experiment in the Statsig Console, then edit variants on top of the live page with a point-and-click editor. Sidecar still runs through a JavaScript script tag, though the package name has changed from earlier versions.

> **Info:**
>
> Sidecar v3 is in Early Access. Try the product and share any feedback in the [Slack Community](https://statsig.com/slack).

## Prerequisites

### 1. Installing the Sidecar script

For experiments to take effect, the visual editor ("sidecar") script must run on your website, on any page you want to experiment on:

```html
<script src="https://cdn.jsdelivr.net/npm/statsig-sidecar-v2-beta/dist/index.min.js?apikey=client-key" ></script>
```

Replace `client-key` with a client key from your Statsig project. You can find it at [Settings > Keys & Environments](https://console.statsig.com/api_keys).

Most website builders also support adding script tags on your website, like: [Webflow](https://university.webflow.com/lesson/custom-code-in-the-head-and-body-tags?topics=site-settings), [Wordpress](https://wordpress.com/go/website-building/how-to-properly-add-javascript-to-wordpress-3-top-methods/), [Wix](https://support.wix.com/en/article/embedding-custom-code-on-your-site), [Squarespace](https://support.squarespace.com/hc/en-us/articles/205815928-Adding-custom-code-to-your-site), [Weebly](https://weeblytutorials.com/embed-javascript-weebly).

### 2. Installing the Chrome extension (for editing)

To create edits for experiment variants, install the Statsig Visual Editor [Chrome Extension](https://chromewebstore.google.com/detail/statsig-sidecar-v3/mmgjfcbidnlghegclgpkgegpdhbopjhn).

You also need to be a project admin or have permissions to access console API keys to use all Sidecar functionality.

## Creating an experiment

Create experiments in the console by opening the Create Experiment dialog and changing the experiment type to "Visual Editor".

![Create Visual Editor Experiment](https://docs.statsig.com/images/sidecarcreation.gif)

## Setting up an experiment

### Metrics

When you add the Statsig Visual Editor script to your website, Statsig automatically tracks events like clicks, page views, Core Web Vitals, and more. Statsig calls these [autocapture](https://docs.statsig.com/webanalytics/autocapture/) metrics. Go to [Metrics](https://docs.statsig.com/metrics/101) for more information.

You can add any of these metrics to your experiment. You can also customize them to filter to certain attributes (e.g. clicking a certain button, visiting a certain page) by creating a new metric in the [Metrics Catalog](https://console.statsig.com/metrics/metrics_catalog) tab. You must add at least one metric to your experiment before continuing.

### URL filters

To limit an experiment to a subset of pages on your website, configure which URLs the experiment runs on:

- **All Pages**: anywhere you install the Sidecar client
- **Contains**: The page URL must contain the value you enter, for example "pricing".
- **Exact Match**: The page URL must match the exact value you specify here.
- **Regex**: Regular expressions, for example `(http|https):\/\/www.statsig.com\/pricing` matches pages `http://www.statsig.com/pricing` or \`https://www.statsig.com/

![URL Targeting](https://docs.statsig.com/images/sidecarv3urlfilters.png)

### Audiences

Statsig infers information about each user, including country, device type, browser type, and a unique identifier called StableID. You can target based on any of these attributes using the "audiences" targeting section. You can also target custom attributes you add to the Window.statsigUser object, though adding custom attributes requires a small amount of code.

### Visual Editor starting URL

Before editing experiment variants, add a Visual Editor URL. The editor opens at this URL when you begin editing. Add a URL starting with "https://", then click **Save**.

To set up an experiment, enter your metrics and any targeting (on URL, or other user attributes from the [StatsigUser object](https://docs.statsig.com/sdks/user)), and the starting URL. The URL must begin with "https://". Click **Save**, then click **Open in Editor**. An editor bar appears along the bottom of the page:

![Visual Editor Page](https://docs.statsig.com/images/sidecarv3openxp.gif)

### Runtime settings

For more advanced experiment flows, you can also configure runtime settings on the experiment setup page before opening the editor.

- **Disable Auto Run** prevents the experiment from applying automatically on page load.
- **Prerun Script** lets you run custom JavaScript before the experiment starts. The Prerun Script is useful for SPAs or other advanced flows where you need to bind listeners or evaluate custom logic before manually activating the experiment with `StatsigSidecar.activateExperiment("experiment_name")`.

Go to [Advanced Configurations](https://docs.statsig.com/guides/sidecar-experiments/advanced-configurations-v3) for more detail on runtime settings, manual activation, and prerun scripts.

## Making your edits

Click **Element selector** or press command + E to enable the element editor. The editor provides a preset set of editable attributes depending on the selected element, for example:

- _Text:_ Text, Font attributes
- _Button:_ Text, target link
- _Image:_ Image source

All elements also support rearranging or hiding attributes.

![Visual Editor Editor](https://docs.statsig.com/images/sidecarv3editor.png)

## Starting your experiment

Click **Save** in the bottom-right of the visual editor to save changes to the console. Return to the console page and refresh to see your changes listed. Preview the experiment by clicking the three dots in the variant table. When ready, launch the experiment by clicking **Start** in the top-right corner. After starting, the experiment appears for end users and Statsig collects metrics.

### Advanced script setup

Add these query string parameters to the Sidecar script URL for additional controls over Sidecar client behavior.

- `&reduceflicker=0` disables the brief hiding of the `<body>` tag while the client initializes.

## Advanced configurations

For more advanced Sidecar controls after the basic setup is working:

- Go to [Advanced Configurations](https://docs.statsig.com/guides/sidecar-experiments/advanced-configurations-v3) for runtime settings, manual activation, prerun scripts, script URL tuning, consent, and identity configuration.
- Go to [Measuring Experiments](https://docs.statsig.com/guides/sidecar-experiments/measuring-experiments#per-assignment-callback-for-outbound-integrations) for outbound analytics callbacks and other measurement patterns.