Consent Pro by Finsweet

Webflow sites that run Google Analytics, Meta Pixel, embedded videos, or Google Maps load third-party scripts and set cookies by default. There is no built-in mechanism to block those scripts until a visitor gives consent. That gap puts any site with EU or California traffic at risk of violating GDPR or CCPA requirements.

Consent Pro by Finsweet adds a native consent management layer to Webflow. It automatically blocks scripts until consent is obtained, shows region-specific banners based on visitors' locations, and helps manage detected trackers across the site.

This integration is built for Webflow agencies managing compliance across client portfolios, freelance designers shipping sites with EU traffic, marketing teams running Google Ads with Consent Mode v2 requirements, and compliance officers who need audit-ready consent records. If your Webflow site collects any visitor data, this integration applies to you.

How to integrate Consent Pro with Webflow

What is Consent Pro? Consent Pro is a Consent Management Platform (CMP) built exclusively for Webflow. It lets you create fully custom consent banners inside the Webflow Designer, supporting multiple region-specific banners from a single setup.

Consent Pro automatically scans your site for scripts, uses AI to document tracker data, blocks scripts until consent is given, and automatically stores proof of consent.

Built-in analytics show accept and deny rates over time, while geolocation rules help you meet website-level compliance for GDPR, CCPA, and other privacy frameworks, without relying on external dashboards.

The Consent Pro-Webflow integration supports 3 approaches:

• The Consent Pro app handles banner creation, script blocking, tracker scanning, and consent storage without writing code.
• Consent-controlled embeds let you gate iframes, videos, and maps behind consent categories using Code Embed elements and HTML attributes.
• The Webflow Data API and Consent Pro JavaScript API give you full control over consent-driven data flows and custom script behavior, but require client-side and server-side development.

Most implementations start with the app and add embed attributes or JavaScript API calls as the site's tracking stack grows.

1. Install the Consent Pro app

The Consent Pro app is the primary integration method. It installs directly from the Webflow App Marketplace and handles the full consent workflow: banner generation, website scanning, tracker categorization, script management, and consent storage.

The listing includes an "Approved by Webflow" badge and an "Enhanced Security" badge. You can test on .webflow.io staging domains for free. A paid Consent Pro subscription is required for production domains with custom URLs.

To set up the integration:

1. Open Webflow, click the Apps panel (puzzle-piece icon in the left sidebar), search for "Consent Pro," and click Install. Log in to your Finsweet account through the app interface.
2. Open Consent Pro from the Apps panel. Choose your banner type and the app generates the banner component with all required fs-consent-* attributes pre-applied. Style the banner using Webflow's Style panel. Do not remove the auto-applied attributes.
3. Run the built-in website scan. The scanner uses your sitemap and the Webflow Data API to detect trackers on your site. AI automatically fills in provider names, descriptions, data collected, and privacy policy URLs.
4. Open the Scripts tab in the Consent Pro app and add your tracking scripts there (GA4, GTM, Meta Pixel, etc.). Assign each script to a consent category (essential, analytics, marketing, or personalization) and set the load type to "After consent."
5. Remove those same scripts from Site Settings > Custom Code in Webflow. Scripts placed in custom code in head and body tags fire before Consent Pro can intercept them.
6. Configure geolocation rules in the app UI to show GDPR banners to EU visitors, CCPA notices to California visitors, or no banner where regulations do not apply.
7. Publish the site.

Once you publish, Consent Pro is active across your site. Scripts added through the app load only after a visitor grants consent for the relevant category. No additional configuration is needed for the standard implementation.

Zero-code capabilities

The setup above covers the full standard workflow.

Here is what the app handles automatically from that point forward, with no additional code required:

• Automatic script blocking with GTM detection
• Geolocation-based banners for GDPR and CCPA
• AI-generated tracker documentation
• Built-in consent analytics dashboard (accept rates, deny rates, trends)
• Automatic consent record storage
• Banner translation in 10 languages
• GPC (Global Privacy Control) signal support

These zero-code features cover most standard Webflow consent implementations inside the app.

Geolocation-based banners and consent analytics require a Premium plan subscription. The Basic plan includes automatic script blocking, AI tracker documentation, and consent storage, but not region-specific targeting or the analytics dashboard.

One critical limitation also applies to Webflow's built-in integrations. Google Analytics and Meta Pixel added through Webflow's Apps & Integrations tab cannot be blocked by Consent Pro. Turn off those native integrations and add the scripts through Consent Pro's Script Manager instead.

2. Configure consent-controlled embeds

Some third-party content requires manual attribute work to gate behind consent. This applies to iframes, embedded videos, Google Maps, and Google Fonts, which Webflow loads independently of the scripts Consent Pro auto-detects. These elements need specific HTML attributes so that Consent Pro can block them until a visitor consents.

Gating iframe and video embeds

Webflow wraps YouTube URLs in its cdn.embedly service, which generic CMPs miss entirely. Consent Pro handles this through the fs-consent-src attribute, which replaces the standard src attribute on iframes and blocks loading until the visitor accepts the assigned consent category.

To gate an iframe embed:

1. Add a Code Embed element to your page.
2. Paste your iframe code, but replace the src attribute with fs-consent-src and add fs-consent-categories="marketing" (or the appropriate category).
3. Publish the site. The iframe will not load until the visitor has consented to that category.

Full embed instructions are documented at consentpro.com/docs/embed-iframes, with separate guides for video embeds and Google Maps.

Handling Google Fonts

Google Fonts loaded through Webflow's default font integration make API calls that transfer visitor data to Google's servers before consent is obtained. Consent Pro's documentation recommends removing Webflow's Google Fonts integration, downloading the font files, and re-uploading them as custom fonts in Webflow.

To replace Google Fonts with consent-safe alternatives:

1. Download the Google Fonts files you need (from Google Fonts or a service like Google Web Fonts Helper).
2. Upload them as custom fonts in Webflow under Site Settings > Fonts.
3. Remove the original Google Font selections from your Webflow project.

The full process is documented at consentpro.com/docs/google-fonts.

Setting up Google Tag Manager with Consent Pro

If your site uses Google Tag Manager (GTM), Consent Pro's Auto GTM Detection feature automatically manages scripts loaded through GTM containers. Additional setup is needed for Google Consent Mode v2, which Google requires for ad measurement in the EU.

To configure GTM with Consent Pro:

1. In Webflow, open Site Settings > Custom Code > Footer code and remove the GTM <noscript> tag. Keep only the <script> portion.
2. Download the Consent Pro GTM template from consentpro.com/docs/google-tag-manager-setup.
3. In GTM, go to Templates > New > Import and upload the downloaded template.
4. In GTM, go to Tags and click New. Name the tag "Consent Mode Init," click Tag Configuration, and select Finsweet Consent Pro – GTM Template.
5. Choose your consent mode (opt-in or opt-out; it must match the mode set in the Consent Pro app), then set the trigger to Consent Initialization – All Pages and save.
6. Publish your GTM container.

The Consent Pro app's Actions tab confirms which GTM configuration steps still need to be completed, providing a compliance checklist as you work through the setup.

Configuring multi-language banners with Webflow Localization

Sites using Webflow Localization require per-locale banner translations rather than the default global banner. Consent Pro supports generating banners in 10 languages, but localized sites require a different component structure.

To set up localized consent banners:

1. In the Consent Pro app, uncheck Use Global Banner.
2. Convert the fs-consent_component wrapper into a Webflow Component.
3. Add the component to every page (adding it to a Footer or Navbar component is the most efficient approach).
4. Use the Localization dropdown to select your target language.
5. Right-click the Consent Pro component in the Navigator and select Translate to [language].
6. Publish the site.

Once published, each locale uses its own translated consent banner instead of the global banner.

The full localization workflow is documented at consentpro.com/docs/webflow-localization. If the primary locale banner appears on all locales, the most common cause is that "Use Global Banner" is still enabled in the Consent Pro app's Configure tab.

3. Build with the Webflow and Consent Pro APIs

For custom consent-driven workflows, such as logging consent to an external database, gating scripts based on granular consent states, or writing consent metadata to the Webflow CMS, the JavaScript API and Webflow Data API provide full programmatic control.

This path requires client-side JavaScript and, for server-side data flows, a custom backend (such as a Cloudflare Worker or serverless function).

Consent Pro does not expose a REST API or server-side webhooks. Its developer surface is entirely client-side:

• The Consent Pro JavaScript API provides consent state reads and writes, and event callbacks via window.FinsweetConsentPro
• The Consent Pro Attributes Reference documents all fs-consent-* HTML attributes for element-level consent control
• The Consent Pro Events Reference documents dataLayer and GTM event integration
• Webflow's Data API handles custom code registration, including registering inline and hosted scripts and applying them site-wide or per page
• Webflow webhooks trigger real-time events (like form_submission) that can be combined with client-side consent data

Any data flow from Consent Pro to a server requires a custom intermediary layer since Consent Pro has no server-side API or webhooks (only a client-side JavaScript API), and Webflow's webhooks are outbound-only.

Reading and reacting to consent state

The JavaScript API exposes consent state as boolean properties and supports a push-callback pattern for async initialization.

To read consent state and react to changes:

(1) Initialize the push-callback array before the Consent Pro script loads:

window.FinsweetConsentPro = window.FinsweetConsentPro || [];
window.FinsweetConsentPro.push([
  'consent',
  (instance) => {
    console.log('Consent Pro loaded', instance);
  },
]);

(2) Read individual consent categories:

const choices = window.FinsweetConsentPro.consents.get();
console.log(choices.analytics, choices.marketing);

(3) Conditionally run scripts based on consent. For scripts that also need DOM readiness:

function handleConsentedScript() {
  // Your DOM-dependent, consent-gated logic
}

window.FinsweetConsentPro = window.FinsweetConsentPro || [];
window.FinsweetConsentPro.push([
  'consent',
  (instance) => {
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', handleConsentedScript);
    } else {
      handleConsentedScript();
    }
  },
]);

The available consent categories are essential, analytics, marketing, and personalization, each returning a Boolean value.

Logging consent to a custom database

Consent Pro automatically stores consent records in its own dashboard. For teams that need a local copy of consent data (for audit trails or integration with other systems), the consent storage documentation describes a Cloudflare Workers pattern.

To implement custom consent logging:

First, deploy a Cloudflare Worker (or another serverless function) to accept POST requests that contain consent data.

Then, add the push-callback to your site's custom code, sending consent state to your endpoint on every consent event:

window.FinsweetConsentPro = window.FinsweetConsentPro || [];
window.FinsweetConsentPro.push([
  'consent',
  (instance) => {
    fetch('https://your-worker.your-domain.workers.dev/consent', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(instance),
    });
  },
]);

Finally, paste your endpoint URL in the Consent Pro app's Configure tab.

This pattern works for any backend that accepts HTTP POST requests, not just Cloudflare Workers.

Combining consent gating with Webflow form webhooks

Consent Pro can gate the display of forms on the client side. Once a visitor consents and submits the form, Webflow's form_submission webhook fires and delivers the submission to your backend. Any consent metadata must be appended to Webflow form fields at the client level before submission.

To register a form submission webhook:

curl -X POST "https://api.webflow.com/v2/sites/{site_id}/webhooks" \
  -H "Authorization: Bearer YOUR_ACCESS_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "triggerType": "form_submission",
    "url": "https://your-endpoint.com/FormSubmission"
  }'

The webhook payload includes form name, site ID, submitted field data, and a timestamp. Validate incoming webhooks using Webflow's signature verification to confirm authenticity.

What can you build with the Webflow-Consent Pro integration?

Integrating Consent Pro with Webflow lets you run a fully consent-compliant Webflow site without managing external dashboards or writing manual script-blocking code.

Here are a few things you can build with this integration:

• Agencies building client sites at scale: Everything stays inside Designer. Agency plans support bulk lifetime plans and rollover licensing. No per-client external dashboard config.
• Multi-region and international websites: Show different banners based on visitor location. Configure separate experiences for the EU, California, the US, and the rest of the world from a single Webflow project.
• Marketing sites with third-party scripts: Automatically detect and manage tools such as Google Analytics, Facebook Pixel, HubSpot, Hotjar, and scripts loaded through Google Tag Manager. Consent Pro blocks non-essential scripts until consent is granted.
• Sites embedding third-party content: Control embedded services such as YouTube, Google Maps, Google Fonts, reCAPTCHA, and iframes. Consent Pro can display placeholders until the visitor grants consent.
• Regulated industries and enterprise websites: Automatically store proof of consent and export consent records for audits and compliance reviews. Consent Pro is SOC 2-certified and built to support GDPR and CCPA compliance workflows.

If you need more control over custom consent logging or consent-driven data pipelines, the JavaScript API integration path provides full flexibility.

Explore Webflow + Osano Consent as an alternative CMP approach for Webflow sites if you want to compare consent management options before committing.