On this page

Visual Editor Setup & Usage

Overview of Statsig Sidecar v3, a no-code Chrome extension for running A/B tests directly on any website without engineering involvement.

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.

Sidecar v3 is in an open beta release. Try the product and share any feedback in the Slack Community.

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.Most website builders also support the ability to add script tags on your website, like: Webflow, Wordpress, Wix, Squarespace, Weebly.

2. Installing the Chrome extension (for editing)

To create edits for experiment variants, install the Statsig Visual Editor Chrome Extension.

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

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 metrics. Go to Metrics 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 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

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), 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

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").

Prerun Script is in beta. Reach out to Statsig Support to enable access for your account.

Go to Advanced Configurations 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

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 for runtime settings, manual activation, prerun scripts, script URL tuning, consent, and identity configuration.
  • Go to Measuring Experiments for outbound analytics callbacks and other measurement patterns.

Was this helpful?