home / skills / 224-industries / webflow-skills / webflow-browser-api

webflow-browser-api skill

This skill helps you manage consent, track experiments, and personalize user experiences on Webflow using the Browser API.

npx playbooks add skill 224-industries/webflow-skills --skill webflow-browser-api

Review the files below or copy the command above to add this skill to your agents.

Files (8)

SKILL.md

3.7 KB

---
name: webflow-browser-api
description: Control Webflow Analyze and Optimize from JavaScript via the Browser API. Use when managing tracking consent, integrating CMPs (OneTrust, TrustArc), tracking experiment variations, setting custom visitor attributes, or personalizing user experiences.
license: MIT
metadata:
  author: "Ben Sabic"
  repository: "https://github.com/224-industries/webflow-skills"
  url: "https://skills.224ai.au/webflow-browser-api.skill"
  version: "1.0.0"
  keywords: "ai, agent, skill, analyze, browser, api, webflow, optimize, cookie consent, tracking, performance, user experience, consent management, web analytics, automation"
---

# Webflow Browser API

The Browser API is a JavaScript interface exposed via the global `wf` object on all Webflow sites with Analyze and Optimize enabled. It requires no manual installation. Use it to manage consent, track experiments, and personalize user experiences.

## Key Concepts

- **Global `wf` object** — Automatically available on all sites with Analyze or Optimize enabled
- **`wf.ready()`** — All Browser API calls must be wrapped in this readiness callback. See `references/wf-ready.md`
- **Consent management** — Three methods to manage tracking consent: `getUserTrackingChoice()`, `allowUserTracking()`, `denyUserTracking()`
- **Variations** — Track experiment results via `onVariationRecorded()` and forward to analytics tools
- **Custom attributes** — Set visitor attributes via `setAttributes()` for audience targeting and result filtering (Enterprise only)

## API Methods

| Method | Description |
|--------|-------------|
| `wf.ready(callback)` | Execute code after the Browser API loads |
| `wf.getUserTrackingChoice()` | Returns `"allow"`, `"deny"`, or `"none"` |
| `wf.allowUserTracking(options?)` | Opt user into tracking |
| `wf.denyUserTracking(options?)` | Opt user out of tracking |
| `wf.onVariationRecorded(callback)` | Register a callback for variation events |
| `wf.setAttributes(scope, attributes)` | Set custom visitor attributes |

## Important Notes

- The Browser API is only available on sites with Webflow Analyze or Optimize enabled
- Custom JavaScript attributes (`setAttributes`) are only available on Enterprise sites
- Always wrap all API calls inside `wf.ready()` to prevent calls before initialization
- Place scripts in `<head>` custom code for earliest possible execution

## Reference Documentation

Each reference file includes YAML frontmatter with `name`, `description`, and `tags` for searchability. Use the search script in `scripts/search_references.py` to find relevant references.

### Getting Started

- **[references/introduction.md](references/introduction.md)**: Overview, capabilities, placement options, getting started
- **[references/wf-ready.md](references/wf-ready.md)**: `wf.ready()` API reference

### Consent Management

- **[references/consent-management.md](references/consent-management.md)**: Consent APIs, CMP integrations (OneTrust, TrustArc), custom consent solutions

### Optimize

- **[references/optimize-overview.md](references/optimize-overview.md)**: Optimize overview and quickstart
- **[references/variations.md](references/variations.md)**: Variations concept and `onVariationRecorded()` API reference
- **[references/attributes.md](references/attributes.md)**: Custom attributes and `setAttributes()` API reference

### Searching References

```bash
# List all references with metadata
python scripts/search_references.py --list

# Search by tag (exact match)
python scripts/search_references.py --tag <tag>

# Search by keyword (across name, description, tags, and content)
python scripts/search_references.py --search <query>
```

## Scripts

- **`scripts/search_references.py`**: Search reference files by tag, keyword, or list all with metadata

Overview

This skill exposes Webflow's Browser API so you can control Analyze and Optimize features directly from JavaScript on the client. It makes the global wf object available and documents the core methods for managing tracking consent, recording experiment variations, and setting visitor attributes. Use it to integrate consent management platforms, forward experiment events to analytics, and personalize experiences without server changes.

How this skill works

All Browser API calls must be executed after wf.ready() to ensure the wf object is initialized. The API provides methods to get or set user tracking consent, register callbacks when an Optimize variation is recorded, and set custom visitor attributes (Enterprise only). Scripts placed in the page head run earliest; wrap calls in wf.ready() to avoid race conditions.

When to use it

Integrating a CMP (OneTrust, TrustArc) to sync user consent with Webflow tracking
Recording and forwarding Optimize experiment variations to third-party analytics
Opting users in or out programmatically from custom UI controls
Setting custom visitor attributes for audience targeting (Enterprise)
Personalizing content client-side based on variation or attributes

Best practices

Always wrap every Browser API call inside wf.ready() to prevent initialization errors
Place integration scripts in the <head> custom code block for earliest execution
Use getUserTrackingChoice() to read current consent before calling tracking methods
Forward variation events from onVariationRecorded() to analytics for experiment attribution
Limit use of setAttributes() to Enterprise sites and sanitize attribute values

Example use cases

Sync OneTrust consent state to Webflow by calling allowUserTracking() or denyUserTracking() after CMP events
Register onVariationRecorded() to send experiment IDs and variants to Google Analytics or Segment
Implement a custom consent banner that toggles tracking via allowUserTracking(options) and denyUserTracking(options)
Set visitor attributes like membership_level or region using setAttributes() for targeted Optimize audiences (Enterprise)
Early-run scripts in head to ensure personalization or consent state is applied before page interaction

FAQ

Is the Browser API available on all Webflow sites?

No. The wf Browser API is only available on sites with Webflow Analyze or Optimize enabled.

Do I need to install anything to use wf?

No. The wf object is exposed automatically on enabled sites, but all calls must be wrapped in wf.ready().

Can I set custom attributes on any plan?

Custom JavaScript attributes via setAttributes() are available only on Enterprise-level sites.