> ## Documentation Index
> Fetch the complete documentation index at: https://docs.growthbook.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Webflow Integration

> Run AI Visual Editor A/B tests on a Webflow site by adding a GrowthBook SDK Connection snippet to your custom code.

# Webflow Integration

Unleash the power of experimentation with GrowthBook to supercharge your Webflow site—no coding skills required!

> [!NOTE]
>
> **Note**
>
> This guide walks you through creating experiments using the GrowthBook AI Visual Editor, which requires a `Pro` subscription. [Learn More](https://www.growthbook.io/pricing).

## Let's Get Started

### Step 1: Create a GrowthBook SDK Connection

To connect your GrowthBook account to Webflow, you'll need to create a new SDK Connection and select the `Webflow` option. Before saving, confirm that you've enabled the toggles for `Include visual experiments in endpoint's response?` and `Include draft experiments`.

![Webflow SDK Connection in GrowthBook](https://mintcdn.com/growthbook-ea15456d/hKkmiLOwhH6E2xcD/static/images/integrations/webflow/webflow-sdk-connection.png?fit=max\&auto=format\&n=hKkmiLOwhH6E2xcD\&q=85\&s=ecad4fbd4cb18907b37a2102eec3b299)

### Step 2: Add GrowthBook to Your Webflow Site

Once the SDK Connection is created, you should see a code snippet that you need to add to your site.

In a new window, log into your Webflow account, navigate to your site's settings, and select the `Custom Code` tab.

Find the "Head Code" section, and paste in the code snippet from GrowthBook. It should look something like this:

![Webflow Custom Code with the GrowthBook snippet in Head Code](https://mintcdn.com/growthbook-ea15456d/hKkmiLOwhH6E2xcD/static/images/integrations/webflow/growthbook-webflow-edit-code.png?fit=max\&auto=format\&n=hKkmiLOwhH6E2xcD\&q=85\&s=6da732bbf81103cd4dd1258242a59588)

> [!NOTE]
>
> **Tracking experiment views**
>
> When a user views an experiment, the code above will fire an event that tracks which variation the user saw. If you have Google Analytics 4 (GA4) or Segment installed on your site, you don't have to do any additional configuration. If, however, you need to use a different analytics provider, you can follow the [HTML Script Tag guide](https://docs.growthbook.io/lib/script-tag.md).

Once added, save and publish the changes and navigate back to GrowthBook.

### Step 3: Install the GrowthBook AI Visual Editor

Install the [GrowthBook AI Visual Editor](https://chromewebstore.google.com/detail/growthbook-visual-editor/nbomejknbpkcpjdagefhichaajpoempk) from the Chrome Web Store, then open the side panel and click **Connect with GrowthBook**. See [Install and connect](https://docs.growthbook.io/app/visual/install-and-connect.md) for the full setup.

### Step 4: Create a GrowthBook AI Visual Editor Experiment

> [!NOTE]
>
> **Questions about the AI Visual Editor?**
>
> If you have questions about how to use the AI Visual Editor, see the [AI Visual Editor guide](https://docs.growthbook.io/app/visual).

Now that GrowthBook is installed on your Webflow site, you can create a new experiment using the AI Visual Editor.

First, navigate to "Experiments" on the left-hand navigation menu and then click "Create Experiment", before selecting "Design a New Experiment" and following the on-screen prompts.

Once you've created your experiment, select "AI Visual Editor" as the editor type and enter the URL of your Webflow site.

![AI Visual Editor on a Webflow site](https://mintcdn.com/growthbook-ea15456d/hKkmiLOwhH6E2xcD/static/images/integrations/webflow/growthbook-webflow-visual-editor.png?fit=max\&auto=format\&n=hKkmiLOwhH6E2xcD\&q=85\&s=8905268f7680a0c43a035d221408f955)

You'll then be redirected to your site, where you can use the AI Visual Editor to update your site's content.