Site Tracking and Consent Management

Create a consent management flow for Webflow Analyze and Optimize

Use Webflow’s Browser APIs to manage user tracking consent for Analyze and Optimize. Check consent status, control tracking, and integrate with your consent management platform—or build your own custom solution.

Site tracking

Webflow’s Site tracking lets you record analytics, personalize experiences, and run AI-powered tests using Analyze and Optimize. Site tracking must be enabled to use the consent management APIs.

Privacy laws like GDPR and CCPA may require you to obtain visitor consent before tracking, depending on your site’s location and audience. It’s your responsibility to determine which requirements apply to your site. Webflow’s APIs provide the tools you need to implement consent flows for data tracking as needed. Learn more about compliance requirements.

A consent management solution lets visitors choose how their data is collected. Typically shown as a banner or menu, it allows users to opt in or out of tracking. Using a consent management solution helps you inform visitors and manage their preferences.

Webflow offers third-party apps for consent management in the Webflow Marketplace. These apps help you set up and manage consent workflows without writing code. Additionally, Webflow provides detailed setup guides for the DataGrail and Finsweet apps.

Webflow’s Browser APIs let you check a user’s tracking preferences and manage consent directly. Use these APIs to build a custom consent management solution tailored to your site and user experience. This approach is ideal for:

  • Site owners who need to manage consent themselves
  • Developers integrating with existing Consent Management Platforms (CMPs)
  • Teams requiring specific customization of the consent experience

The following APIs are available in the Webflow Browser API:

If you already use a consent management platform like OneTrust or TrustArc, you can add a custom code snippet using the consent management APIs in the header of your site to pass user consent choices to Webflow. The following examples show how to detect user consent choices in your consent management platform and update Webflow’s tracking preferences in real time.

To respect user consent, detect the visitor’s choice in your consent management platform and update Webflow’s tracking preferences with the appropriate API call. Most platforms provide a callback or event when consent changes—use this to trigger the allowUserTracking or denyUserTracking API calls.

1<Script>
2wf.ready(() => {
3   // First, detect the current state
4   const isOptedOut = wf.getUserTrackingChoice() === 'deny';
5   if (isOptedOut) {
6      //
7      // Your Consent Management Platform logic to detect an optIn signal goes here
8      //
9      // Then you call Webflow to let us know there's been an optIn
10      wf.allowUserTracking();
11   }
12   else {
13      //
14      // Your Consent Management Platform logic to detect an optOut signal goes here
15      //
16      // Then you call Webflow to let us know there's been an optOut
17      wf.denyUserTracking();
18   }
19});
20</Script>

If you don’t use a consent management platform, you can build your own with Webflow’s APIs. The following examples show how to add a cookie consent modal to your site and manage user consent.

  1. Add the modal in the Webflow Designer:
    This code will add a cookie consent modal to a page on your site.

    • Copy the “Designer API Example” code below
    • Open the Designer API Playground
    • Paste the code into the Playground and run it to add the banner to your page.
    • Optional: To ensure the modal is displayed on every page, you can convert it into a component and add it to all pages on your site.

  2. Enable consent logic with custom code:
    This code will connect the modal buttons to Webflow’s consent APIs, so clicking “Accept” or “Decline” updates the user’s consent status. It also uses GSAP to animate the modal in and out.

    • Copy the “Custom Code Example” code below
    • In your Webflow project, go to your site settings
    • Paste the code into the Header section
    • Enable GSAP in your site settings
    • Publish your site and interact with the modal.

  3. Check consent status in your browser:
    You can see the current consent status using your browser’s Developer Tools.

    • Open your website in a browser (such as Chrome).

    • Right-click anywhere on the page and select Inspect to open Developer Tools.

    • Click the Console tab at the top of the Developer Tools panel.

    • Paste and run the following command to display the consent status.

      1wf.getUserTrackingChoice();
1// Webflow Designer API: Cookie Consent Banner Example
2// Paste and run this code in the Designer API Playground
3
4// 1. Create styles
5const popupStyle = await webflow.createStyle('popupWrapper');
6await popupStyle.setProperties({
7    'position': 'fixed',
8    'bottom': '2rem',
9    'left': '0',
10    'right': '0',
11    'margin-left': 'auto',
12    'margin-right': 'auto',
13    'max-width': '420px',
14    'z-index': '9999',
15    'background-color': '#fff',
16    'border-radius': '1rem',
17    'box-shadow': '0 4px 24px rgba(0,0,0,0.12)',
18    'padding-top': '1.5rem',
19    'padding-bottom': '1.5rem',
20    'padding-left': '1.5rem',
21    'padding-right': '1.5rem',
22    'display': 'flex',
23    'flex-direction': 'column',
24    'align-items': 'flex-start',
25    'column-gap': '1rem'
26  });
27
28const buttonStyle = await webflow.createStyle('consentButton');
29await buttonStyle.setProperties({
30  'border-radius': '0.5rem',
31  'padding-top': '0.5rem',
32  'padding-bottom': '0.5rem',
33  'padding-left': '1.25rem',
34  'padding-right': '1.25rem',
35  'font-weight': '500',
36  'cursor': 'pointer',
37  'border-width': '0px',
38  'outline-style': 'none',
39  'transition-property': 'background-color,color',
40  'transition-duration': '0.2s',
41  'transition-timing-function': 'ease-in-out'
42});
43
44const acceptStyle = await webflow.createStyle('acceptButton');
45await acceptStyle.setProperties({
46  'background-color': '#2563eb',
47  'color': '#fff'
48});
49
50// Accept button hover
51await acceptStyle.setProperties({
52  'background-color': '#1749b1',
53  'color': '#fff'
54}, { pseudo: 'hover' });
55
56// Accept button pressed/active
57await acceptStyle.setProperties({
58  'background-color': '#11306e',
59  'color': '#fff'
60}, { pseudo: 'active' });
61
62const declineStyle = await webflow.createStyle('declineButton');
63await declineStyle.setProperties({
64  'background-color': '#f3f4f6',
65  'color': '#222'
66});
67
68// Decline button hover
69await declineStyle.setProperties({
70  'background-color': '#e5e7eb',
71  'color': '#111827'
72}, { pseudo: 'hover' });
73
74// Decline button pressed/active
75await declineStyle.setProperties({
76  'background-color': '#d1d5db',
77  'color': '#111827'
78}, { pseudo: 'active' });
79
80const buttonRowStyle = await webflow.createStyle('buttonRow');
81await buttonRowStyle.setProperties({
82  'display': 'flex',
83  'column-gap': '0.75rem',
84  'margin-top': '0.5rem'
85});
86
87const contentDivStyle = await webflow.createStyle('contentDiv');
88await contentDivStyle.setProperties({
89  'display': 'flex',
90  'flex-direction': 'column',
91  'column-gap': '0.5rem'
92});
93
94const titleStyle = await webflow.createStyle('bannerTitle');
95await titleStyle.setProperties({
96  'font-weight': '600',
97  'font-size': '1.1rem'
98});
99
100const messageStyle = await webflow.createStyle('bannerMessage');
101await messageStyle.setProperties({
102  'font-size': '0.98rem',
103  'color': '#444'
104});
105
106const linkStyle = await webflow.createStyle('learnMoreLink');
107await linkStyle.setProperties({
108  'color': '#2563eb',
109  'text-decoration': 'underline'
110});
111
112// 2. Get the parent element (or use body)
113const parent = await webflow.getSelectedElement();
114
115// 3. Build the popup wrapper
116const popup = webflow.elementBuilder(webflow.elementPresets.DOM);
117popup.setTag('div');
118popup.setAttribute('id', 'consentPopup');
119popup.setStyles([popupStyle]);
120
121// 4. Banner content
122const contentDiv = popup.append(webflow.elementPresets.DOM);
123contentDiv.setTag('div');
124contentDiv.setStyles([contentDivStyle]);
125
126const title = contentDiv.append(webflow.elementPresets.DOM);
127title.setTag('span');
128title.setTextContent('We use cookies');
129title.setStyles([titleStyle]);
130
131const message = contentDiv.append(webflow.elementPresets.DOM);
132message.setTag('span');
133message.setStyles([messageStyle]);
134message.setTextContent('This site uses cookies to analyze traffic and enhance your experience. ');
135
136const learnMore = message.append(webflow.elementPresets.DOM);
137learnMore.setTag('a');
138learnMore.setAttribute('href', '/privacy-policy');
139learnMore.setAttribute('target', '_blank');
140learnMore.setAttribute('rel', 'noopener');
141learnMore.setStyles([linkStyle]);
142learnMore.setTextContent('Learn more');
143
144// 5. Button row
145const buttonRow = popup.append(webflow.elementPresets.DOM);
146buttonRow.setTag('div');
147buttonRow.setStyles([buttonRowStyle]);
148
149// Accept button
150const acceptBtn = buttonRow.append(webflow.elementPresets.DOM);
151acceptBtn.setTag('button');
152acceptBtn.setAttribute('id', 'optIn');
153acceptBtn.setAttribute('class', 'consentButton');
154acceptBtn.setStyles([buttonStyle, acceptStyle]);
155acceptBtn.setTextContent('Accept');
156
157// Decline button
158const declineBtn = buttonRow.append(webflow.elementPresets.DOM);
159declineBtn.setTag('button');
160declineBtn.setAttribute('id', 'optOut');
161declineBtn.setAttribute('class', 'consentButton');
162declineBtn.setStyles([buttonStyle, declineStyle]);
163declineBtn.setTextContent('Decline');
164
165// 6. Add the popup to the page
166if (parent?.children) {
167  await parent.append(popup);
168  console.log('Cookie consent banner created!');
169}

This example is intended as a starting point and may not fully comply with all privacy laws. Customize and validate your consent management implementation to ensure it aligns with your site’s privacy policy and the legal requirements applicable to your visitors.