For AI agents: a documentation index is available at the root level at /llms.txt and /llms-full.txt. Append /llms.txt to any URL for a page-level index, or .md for the markdown version of any page.
Resources
Get started
ReferenceChangelog
ReferenceChangelog
  • Browser API
    • wf.ready()
  • Consent Management
    • Get consent status
    • Allow user tracking
    • Deny user tracking
  • Optimize
    • Quickstart
    • Variations
    • Custom attributes
  • Custom Goals
    • On-site conversions
    • Off-site conversions
  • Data Exports
    • Data destinations
    • Data schema
  • Additional Resources
    • Support Documentation
LogoLogo
Resources
Get started
On this page
  • Prerequisites
  • Getting started with the Optimize Browser APIs
  • Next steps
Optimize

Quickstart

Making requests to Optimize via the Browser API
Was this page helpful?
Built with

This guide will help you get started making requests to Webflow Optimize through the Browser API. It will walk you through the process of creating a script and adding Optimize methods as callbacks.

No installation required
The Browser API is automatically enabled on your site with no manual installation required. The Optimize methods are available through the global wf object in your browser.

Prerequisites

  • A Webflow site with Optimize enabled
  • Ability to add custom JavaScript to your site or use a tool like Google Tag Manager

Getting started with the Optimize Browser APIs

There are two main approaches to implementing your Optimize code:

  1. Add code directly to your site: Place your script in the <head> section of your site using Webflow’s Custom Code feature.
  2. Use Google Tag Manager: Add the API call when configuring a custom tag
1

Call wf.ready()

Since the Webflow Browser API loads asynchronously, you need to ensure your code runs at the right time by using wf.ready().

1// Call wf.ready() to ensure the Browser API is available
2wf.ready(function() {
3    // Your code here
4});

Add this call to the <head> section of your site or page using Webflow’s Custom Code feature. Or, if using a tool like Google Tag Manager, add the API call when configuring the tag. Adding the call early ensures you won’t miss any events on the page.

When should you call wf.ready() ?

To make sure your callback fires, call wf.ready() as early as possible to guarantee it’s registered before Webflow Optimize returns any time sensitive events. Preferably, before the DOM starts rendering. This prevents the callback from missing any events. To illustrate:

Timing your script to run after a variation is recorded

We recommend adding the API call in before the closing </head> tag on your site or page using Webflow’s Custom Code feature. Or, if using a tool like Google Tag Manager, add the API call when configuring the tag.

2

Add callbacks to wf.ready()

Now you can start adding callbacks to your script to retrieve variations and set custom attributes.

Multiple callbacks
Multiple API calls per page

You can add multiple callbacks in wf.ready() to handle different Optimize functionality in a single script. This enables you to efficiently manage multiple operations like retrieving variations and setting attributes in one place. Each callback will execute once the Webflow Browser API is ready.

Example:

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

Next steps

Now that you’re familiar with making requests to the Browser API, you can learn more about Optimize methods to add to your callbacks:

Track variations

Send variations from Optimize experiments to third-party tools

Personalize experiences with custom attributes

Set custom attributes to personalize experiences based on user behavior and data