Web Experiment lets you create an A/B or [multi-armed bandit experiment](/docs/feature-experiment/workflow/multi-armed-bandit-experiments) without new code. Open your site in the [Visual Editor](#the-visual-editor), choose the elements you want to experiment with, and change their content or properties directly.

Web Experiments use [Pages](/docs/web-experiment/pages) to control where your experiment variants apply on your website. Pages let you scope experiments to specific URLs without affecting unrelated parts of your site.

## Before you begin

Before you set up a web experiment, [implement](/docs/web-experiment/implementation) the Web Experiment script on your site.

Creating and running a web experiment differs from [Feature Experiment](/docs/feature-experiment/workflow/create), though some steps overlap.

## Set up a web experiment

##### To set up a web experiment

1. In Amplitude Experiment, navigate to _Experiments > Create Experiment > Web Experiment_.
2. In the New Experiment modal, name your experiment.
3. Enter the URL of a page this experiment targets and select the project from the drop-down. Amplitude uses this URL to create your first [Page](/docs/web-experiment/pages). You must instrument Web Experiment on this URL for the experiment to work.

   If the script is on the page you specified, Amplitude Experiment opens the page in the [Visual Editor](#the-visual-editor) as a new variant in your experiment.

   You have two options for the treatment variant action: [element changes](/docs/web-experiment/actions#element-changes) or [URL redirect](/docs/web-experiment/actions#url-redirect).

{% callout type="warning" %}
If the script isn't on the page you specify, or if you have an ad blocker or other privacy extension enabled, Amplitude Experiment can't open the Visual Editor. Amplitude opens the Site Setup panel and prompts you to [implement](/docs/web-experiment/implementation) the script.
{% /callout %}

4. To change text, colors, or other elements of the page's UI, click **Element Changes**.
5. Click the element you want to change.
6. The editing toolbar opens beside the selected element with quick actions such as editing the element's content, or [move element](/docs/web-experiment/set-up-a-web-experiment#move).

   Click the expand icon to open the drawer and edit CSS style properties.

7. When you're done, click **Apply**.
8. Repeat this process for each element you want to change for your experiment.
9. (_Optional_), click **+** to add another variant.
10. When you're done, click **Continue**.

After you set the experiment, define the experiment's [goals](/docs/feature-experiment/workflow/define-goals).

##### To define your experiment's goals

1. In the **Pages** tab, configure which [Pages](/docs/web-experiment/pages) your experiment targets. Create new Pages or reuse existing saved Pages. If you're only targeting the page you set on creation, skip this step.
2. From the Include pages where dropdown, specify how Amplitude Experiment identifies these pages.

   Use the same pattern to exclude the experiment from pages you select. Learn more about [managing Pages](/docs/web-experiment/pages) for precise experiment targeting.

3. Target the users you want to include in this experiment. Go to [audience targeting](/docs/web-experiment/targeting#audience-targeting) for more information. Web Experiment audience targeting works differently than Feature Experimentation.
4. Specify any [additional options](/docs/feature-experiment/workflow/finalize-statistical-preferences) in the Advanced tab.
5. Click **Save and Close** to finish creating your Web Experiment.

{% callout type="tip" heading="Create a new run of an existing experiment" %}
To re-run an experiment, go to [New Experiment Run](/docs/feature-experiment/troubleshooting/new-experiment-run).
{% /callout %}

## Test and preview your web experiment

Before you run your web experiment, Amplitude recommends you test and preview each variant.

##### To test your web experiment

1. Click **Test & Preview**. This puts your experiment in test instrumentation mode, but doesn't begin the experiment. Only users who open the page with the preview link experience your changes.
2. In the modal, click **Preview** to open a new tab that applies the changes you made for that variant.
3. Click the chain link icon to copy the URL to share with others.

Test each variant at least once. Test on more than one page if your experiment targets multiple pages.

If your changes aren't visible, wait up to 60 seconds for caches to refresh. If the changes don't appear correctly after that time, check your configuration for possible issues. To diagnose why an experiment isn't firing, use the [Amplitude Chrome extension](/docs/data/chrome-extension-debug#web-experiments) to inspect audience and page targeting, check exposure status, and preview variants.

{% callout type="warning" heading="Ad blockers" %}
Ad blocking plugins or extensions may prevent you from testing and previewing your experiment.
{% /callout %}

## The Visual Editor

The Visual Editor loads the site at the URL you specified on experiment creation and adds an overlay. The Visual Editor gives you access to every element of your site so you can modify the site for your experiment.

{% callout type="note" %}
When you modify your site in the Visual Editor, your live site remains unchanged until you launch the experiment. No changes in the Visual Editor appear on your site in real time.
{% /callout %}

When you click an element, the editing toolbar opens beside the selected element with quick actions such as editing the element's content or [move element](/docs/web-experiment/set-up-a-web-experiment#move). Amplitude only adds these changes to the current variant after you apply them.

This toolbar consists of the following sections and tools:

- Selector
- Styles
- CSS
- HTML
- Move
- Navigation

### Selector

The selector is a unique identifier for the selected element on the current page. Web Experiment disables the selector by default. Update the selector if you're running the experiment on multiple pages, because the generated selector is only unique for the current page. As an alternative, edit the selector to target multiple elements.

#### Stability best practices

- Visual Editor behavior: The editor selects the shortest unique path, which may include dynamically generated class names such as `sm-contentWrapper_ab12c_3`. These class values often include a hash that changes between builds, causing the selector to stop matching.

- When classes have stable substrings: Prefer an attribute selector that matches the stable portion instead of the full hashed class.

  ```css
  /* Instead of a fragile exact class */
  .sm-contentWrapper_ab12c_3

  /* Use a contains match on the class attribute */
  div[class*="contentWrapper"]
  ```

  This continues to match elements like `<div class="sm-contentWrapper_ab12c_3">` even if a later build generates `sm-contentWrapper_d9f7e_1`.

- Most reliable long-term approach: Add a stable attribute (for example, `data-*`) or a unique id to the element you want to modify, and target that.

  ```html
  <div data-test-id="experiment-content"></div>
  ```

  ```html
  [data-test-id="experiment-content"] /* or */ #experiment-content
  ```

### Styles

The Styles tab contains frequently used CSS properties, including font size, font color, text alignment, padding, margin, background color, display, and visibility.

### CSS

The CSS tab lets you define any CSS property and value, which Amplitude applies inline to the selected element.

### HTML

The HTML tab lets you edit the HTML contents of the selected element.

### Move

Move the selected element up or down in the DOM tree to adjust its placement relative to its current node. The Move option appears in the primary tool menu bar. The Move control updates the underlying HTML of your page rather than moving elements by a predefined amount using CSS.

##### To move elements in the page

1. Click the element you want to move.
2. In the editor menu bar, click the **Up** or **Down** arrow buttons to move the element.
   The element moves past one surrounding HTML element at a time.
3. Continue clicking the buttons until you move the element into the position you want.

Note the following as you move elements on the page:

- If changes don't apply, confirm you chose the correct selector for the intended element.
- Confirm that CSS styles on your page don't conflict with the updated positioning.
- Confirm that JavaScript doesn't reset your changes after you apply them.
- Moving an element ignores invisible elements in your DOM.

In addition to moving elements up or down, click **Rearrange** to enter preview mode. Preview mode lets you explore different element placements on the page.

### Navigation mode

Navigation mode lets you navigate between pages in your experiment without exiting the editor.

Navigation mode is useful for:

- Experiments spanning multiple pages, such as multi-step forms, checkout flows, or onboarding sequences.
- Editing variants across multiple pages within the same experiment.

##### To enter Navigation mode

1. Open your experiment and access the visual editor.
2. In the primary toolbar at the bottom of the page, click **Navigate**.
3. Navigate your site.
   - When you click an element on the page, the element performs its intended function rather than acting as a selection for the experiment.
   - If you navigate to a page not included in your experiment and attempt to make edits, the Visual Editor updates the page targeting rule to include the page URL and displays a confirmation message.
4. When you land on the page you want to edit, click the pencil icon to toggle the Visual Editor back to **Edit mode**.
5. Toggle between Edit and Navigation mode as needed to complete your experiment's configuration.

### Mobile Simulator

Mobile Simulator lets you preview and edit your experiment variants as they appear on mobile devices. Use the simulator to test responsive layouts, mobile-specific styling, and touch-friendly designs without leaving the Visual Editor.

{% callout type="warning" heading="Site restrictions" %}
Mobile Simulator loads your site in an iframe. Sites that set `X-Frame-Options: DENY` or `Content-Security-Policy: frame-ancestors 'none'` block this behavior, and the simulator can't display the page.
{% /callout %}

##### To enter Mobile Simulator

1. Open your experiment and access the visual editor.
2. In the primary toolbar at the bottom of the page, select **Mobile** in the device toggle.