On this page

A/B Testing with Webflow and Visual Editor

Run no-code A/B tests on a Webflow site using Statsig Sidecar, including connecting the Chrome extension and tracking conversion metrics.

Use cases & considerations

Webflow is a platform for businesses to design, build, and manage websites and their content without writing code.

To experiment on a Webflow site, use Statsig Visual Editor to build test treatments and assign users to experiments when they land on your site, without writing code.

Install the Visual Editor Chrome extension

Install the Statsig Visual Editor Chrome extension and follow the Visual Editor setup guide. The extension lets non-technical users build experiments and treatments directly on a live page. You can target by URL and configure text changes, style changes, image swaps, and custom JavaScript for advanced use cases.

Add the Visual Editor script to your Webflow site

  1. Log in to your Webflow dashboard and navigate to your project.
  2. Access the Custom Code section in your project settings.
  3. Copy the Visual Editor script tag from the Visual Editor setup guide and replace client-xxx with your Client SDK key from Settings > Keys & Environments:

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

Webflow custom code interface

  1. Paste the script tag into the <head> section of your Webflow site's custom code area.
  2. Save and publish your changes to apply the Visual Editor script across your website.
  3. In Statsig Console, create an experiment and choose Visual Editor as the experiment type before launching the editor.

Optional script parameters

Add these query parameters to the script URL for additional client behavior controls:

  • &reduceflicker=0 disables briefly hiding <body> while the client initializes.

Configure event tracking and metrics

Statsig provides several approaches for tracking events when using Visual Editor. You can use built-in Autocapture tracking or set up custom event logging. For detailed guidance, go to Visual Editor Setup & Usage and the event tracking documentation.

Debugging and troubleshooting

If you encounter issues during integration or experimentation:

  • Verify that the Visual Editor script tag is correctly placed in the <head> section of your Webflow site.
  • Confirm you're using the latest package URL: statsig-sidecar-v2-beta.
  • Check the browser's console for any JavaScript errors that may indicate problems with the script.
  • Ensure you created your experiment as a Visual Editor experiment and that it is active in Statsig Console.
  • Confirm the Visual Editor Chrome extension is installed.
  • Go to the Visual Editor setup documentation for any missed steps.

Was this helpful?