Browser API

Introduction to the Webflow Browser API

Browser API

Introduction to the Webflow Browser API

The Browser API lets you control Webflow Analyze and Optimize features directly from your site’s JavaScript. Use it to manage consent, track experiments, and personalize user experiences.

Analyze or Optimize required

The Browser API is available only on sites with Webflow Analyze or Optimize enabled and tracking turned on. To enable tracking, open the Insights tab. Under Settings, click Tracking, then turn on the Start tracking visitor data toggle.

What you can do with the Browser API

Manage consent

Manage user consent and privacy preferences in real time

Track variations

Send optimization variations from experiments to third-party tools

Personalize experiences with custom attributes

Set custom attributes based on user behavior and data

Track custom goals

Track on-site and off-site conversions with custom goals

Getting started

Choose where to add your code

You can use the Browser API by adding JavaScript in one of two ways:

Directly in your site Add a script before the closing </head> tag using Webflow’s custom code settings. Best for simple use cases.
With Google Tag Manager (or similar) Add a script as a custom tag. Recommended for advanced tracking or integrations.

Wait for the API to be ready

Wrap your code in wf.ready() to ensure the API has loaded before you call any methods:

1 wf.ready(function() {
2   // Your code here
3 });

Start building

Once inside wf.ready(), you can call any Browser API methods to manage consent, track variations, set custom attributes, or track custom goals.

1 // Call wf.ready() to ensure the Browser API is available
2 wf.ready(function() {
3     // Retrieve variations
4     wf.onVariationRecorded(function(result){
5         // Do something with the result
6         console.log(result);
7     });
8     // Set custom attributes
9     wf.setAttributes("user",{
10         userSegment: 'enterprise',
11         userRole: 'technicalBuyer'
12     });
13     // Track a custom goal
14     wf.sendEvent('purchase', { value: 149.99 });
15 });

FAQs

What is the Browser API?

The Browser API is a JavaScript API that allows you to interact with Webflow features directly in the browser. It provides methods to retrieve Optimize variations, set custom attributes, and handle other Webflow features.

How do I add the Browser API to my site?

The Browser API is automatically included on all Webflow sites with Analyze and Optimize enabled, and handles loading the necessary code in an optimized way to minimize impact on page performance.

How do I use the Browser API?

The Browser API is available through the global wf object in your browser. You can access the API by adding a script using custom code on your sites and pages or through external services that load scripts on your site like Google Tag Manager.

The API can be called from any JavaScript code running on your site.