Introduction

Decide where to add your code

You can add code to interact with the Browser API in one of two ways:

1. Add code directly to your site

   • Place a script in before the closing </head> tag of your site using Webflow’s custom code feature
   • This is the simplest approach for basic implementations

2. Use Google Tag Manager or a similar tool

   • Add a script when configuring a custom tag
   • Recommended for more complex implementations or when using other tracking tools

Check if the Browser API is ready

The Browser API is available through the global wf namespace. The API includes a definition for wf.ready(), a function that enables you to register callbacks to trigger as soon as the Browser API becomes available to call.

Before using any API methods, you should wrap your code in wf.ready() to ensure the Browser API has fully loaded and initialized. This prevents errors that could occur if you try to call API methods before they’re available.

For example:

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

Add callbacks to your code

Now you can start adding callbacks inside of wf.ready(). Currently, the Browser API offers methods to interact with Webflow Optimize. See the Webflow Optimize API documentation for more information.

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
});