## How Visual Editor v3 works

Visual Editor v3 provides a simpler interface for point-and-shoot experiments. Unlike previous versions, you create experiments in the Statsig Console and edit them directly on top of the page. Sidecar still relies on a JavaScript script tag, though the package name has changed.

{% callout type="info" %}
Sidecar v3 is in an open beta release. Try the product and share any feedback in the [Slack Community](https://statsig.com/slack).
{% /callout %}

## 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 the ability to add 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](/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. These are called [autocapture](/webanalytics/autocapture/) metrics. Go to [Metrics](/metrics/101) for more information.

You can add any of these metrics to your experiment, or customize them to be filtered 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 the Sidecar client is installed
* **Contains**: The page URL must contain the value entered, for example "pricing"
* **Exact Match**: The page URL must match the exact value specified 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](/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 added to the Window.statsigUser object, though this 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 per the [StatsigUser object](/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](/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. This 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")`.

{% callout type="warning" %}
Prerun Script is in beta. Reach out to Statsig Support to enable access for your account.
{% /callout %}

Go to [Advanced Configurations](/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](/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](/guides/sidecar-experiments/advanced-configurations-v3) for runtime settings, manual activation, prerun scripts, script URL tuning, consent, and identity configuration.
* Go to [Measuring Experiments](/guides/sidecar-experiments/measuring-experiments#per-assignment-callback-for-outbound-integrations) for outbound analytics callbacks and other measurement patterns.