> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.webflow.com/browser/introduction/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.webflow.com/_mcp/server.

# 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](/browser/reference/consent-management)

Manage user consent and privacy preferences in real time

#### [Track variations](/browser/optimize/variations)

Send optimization variations from experiments to third-party tools

#### [Personalize experiences with custom attributes](/browser/optimize/attributes)

Set custom attributes based on user behavior and data

#### [Track custom goals](/browser/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](https://help.webflow.com/hc/en-us/articles/33961357265299-Custom-code-in-head-and-body-tags).
  *Best for simple use cases.*

* **With Google Tag Manager (or similar)**
  Add a script as a [custom tag](https://support.google.com/tagmanager/answer/6107167?hl=en).
  *Recommended for advanced tracking or integrations.*

### Wait for the API to be ready

Wrap your code in [`wf.ready()`](/browser/reference/wf-ready) to ensure the API has loaded before you call any methods:

```javascript
wf.ready(function() {
  // Your code here
});
```

### 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.

```javascript
// Call wf.ready() to ensure the Browser API is available
wf.ready(function() {
    // Retrieve variations
    wf.onVariationRecorded(function(result){
        // Do something with the result
        console.log(result);
    });
    // Set custom attributes
    wf.setAttributes("user",{
        userSegment: 'enterprise',
        userRole: 'technicalBuyer'
    });
    // Track a custom goal
    wf.sendEvent('purchase', { value: 149.99 });
});
```

## 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](https://help.webflow.com/hc/en-us/articles/33961357265299-Custom-code-in-head-and-body-tags) 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.

> Introduction to the Webflow Browser API

## Docs

- [wf.ready()](https://developers.webflow.com/browser/reference/wf-ready.md): The wf.ready() method is used to ensure the Browser API is available before calling any API methods.