EasyCookie

Webflow sites don't include a built-in cookie consent manager. If you have EU visitors, you need a consent banner, blocked non-essential cookies, and consent signals passed to Google Analytics and ad tags.

EasyCookie handles all of this through a script tag in your custom code settings. It works for site owners, freelancers, and agencies on EU-facing projects, with support for Google Consent Mode v2 and script blocking via GTM or data attributes.

How to integrate EasyCookie with Webflow

What is EasyCookie? EasyCookie is a GDPR cookie consent management platform that automatically scans websites for cookies and displays a consent banner you can configure. It works with Google Consent Mode v2, which lets Google services use modeled conversion data when users decline tracking cookies. The platform gives you 130+ language options with automatic language recognition and supports multiple domains from a single account.

Add EasyCookie to your Webflow site when you need to meet GDPR requirements without building custom consent logic. Paste a script tag into your site settings, then configure how tracking scripts respond to user consent choices through GTM or manual data attributes.

The EasyCookie integration includes 3 approaches:

• Custom code injection places the EasyCookie consent banner site-wide through the custom code in head and body tags settings.
• Script blocking via GTM or data attributes controls when analytics and advertising scripts fire based on user consent choices.
• The Data API and Custom Code API let Apps using OAuth tokens programmatically register scripts and deploy them across sites as a Webflow-side deployment option.

Most implementations combine custom code injection with one of the script blocking methods, since the consent banner alone won't block tracking scripts.

Add the EasyCookie consent banner with custom code

You add the EasyCookie consent banner to your site by pasting a script tag into your site settings. This script displays the consent UI on every page, handles consent storage in a cookie named EasyCookieConsent (1-year expiry), and sends consent signals to Google Consent Mode v2. Configure the banner's text, layout, colors, and consent categories inside the EasyCookie configurator before copying the generated script. You need a paid site plan because the free Starter plan doesn't support custom code injection.

[image placeholder]

To set up the consent banner:

1. Register at app.easycookie.io/register and open the EasyCookie configurator.
2. Configure your banner settings: choose a layout (Banner, Modal, or Popup), set button labels and banner text, pick a color scheme, and select consent categories.
3. Click Copy embed, then Copy script to copy the generated script tag.
4. Open Site Settings and click the Custom Code tab.
5. Paste the EasyCookie script into the Head Code field. Place it before any GA4 or GTM script tags already in that field.
6. Click Save Changes, then publish your site.

If you're using Google Consent Mode v2, paste the GCM default state snippet before the EasyCookie script in the Head Code field:

<!-- GCM v2 default state, place first -->
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('consent', 'default', {
    'ad_storage': 'denied',
    'analytics_storage': 'denied',
    'ad_user_data': 'denied',
    'ad_personalization': 'denied',
    'wait_for_update': 500
  });
</script>

<!-- EasyCookie embed script, paste here -->

<!-- GA4 / GTM scripts, place after -->

The consent banner won't appear in preview mode. Scripts injected through custom code only execute on published sites. Test on your yoursite.webflow.io staging subdomain after publishing, or turn on the Run custom code in Preview toggle under Site Settings > Custom Code to preview on the {shortName}.canvas.webflow.com domain.

Installing the banner script alone won't block tracking scripts from firing. The script only renders the consent UI and stores user preferences. You'll need to configure script blocking separately, covered in the next section.

Block tracking scripts until consent is granted

The EasyCookie consent banner displays the UI and records user choices, but tracking scripts will still fire on page load unless you configure explicit blocking. You have two methods: Google Tag Manager triggers (recommended for most users) and manual data attributes on individual script tags. You can also listen for consent events in JavaScript when you're working with dynamically loaded scripts like Facebook Pixel.

Configure script blocking with Google Tag Manager

GTM is the recommended approach for managing consent-based script blocking without editing individual script tags. All tag blocking logic lives inside GTM, so you only need the GTM container snippet in the Head Code field for ongoing tag management, alongside the EasyCookie embed script that displays the consent banner. This keeps ongoing tag management out of your site entirely.

To configure GTM consent triggers:

1. In the GTM dashboard, create a DOM Ready trigger that fires on all DOM readiness events.
2. Create a second trigger: a Custom Event trigger listening for the ConsentUpdate event.
3. Open your GA4 or Google Ads tag in GTM's Tags section.
4. Remove the tag's default initialization trigger.
5. Assign both new triggers (DOM Ready and ConsentUpdate) to the tag.
6. Under Advanced Settings > Consent Settings, turn on Require additional consent and select analytics_storage for GA4 tags. For advertising tags, also add ad_storage and personalization_storage.

EasyCookie sets consent state to "denied" by default, then updates it to "granted" after users accept. GTM reads these consent signals automatically through Consent Mode v2.

Block static scripts with data attributes

For scripts you've added directly in custom code fields or in Code Embed elements, you can block execution by changing the type attribute and adding an EasyCookie data attribute. EasyCookie includes four consent categories, three of which use data attributes:

• data-easycookie-analytics for analytical scripts
• data-easycookie-advertising for advertising scripts
• data-easycookie-functional for functional scripts

To block a static script until consent is granted:

1. Change the script's type attribute from text/javascript to text/plain.
2. Add the appropriate data-easycookie-* attribute to the script tag.

<script type="text/plain" data-easycookie-analytics src="analytics.js"></script>
<script type="text/plain" data-easycookie-advertising src="ads.js"></script>

When a user grants consent for that category, EasyCookie automatically switches the type back to text/javascript and the script executes. The "Absolutely Necessary" category is always active and doesn't need an attribute.

Handle dynamic scripts with JavaScript consent events

Some scripts, like Facebook Pixel, load dynamically and you can't block them with the type="text/plain" method. For these, EasyCookie fires a DOM event called easycookieUpdateConsent that carries boolean values for each consent category.

To listen for consent changes and conditionally activate a script:

1. Add an event listener for easycookieUpdateConsent in your Head Code or in a Code Embed element.
2. Check the relevant e.detail property and initialize or revoke the script accordingly.

document.addEventListener('easycookieUpdateConsent', function(e) {
  if (e.detail.ad) {
    fbq('consent', 'grant');
  } else {
    fbq('consent', 'revoke');
  }
});

The event's detail object includes six boolean properties: ad, aduser, adpersonalization, analytics, personalization, and security. Full documentation for this event lives on the easy.tools consent scripts page.

The GTM approach is generally simpler for non-technical users because you don't have to edit individual script tags. Use data attributes and consent events when you need direct control over specific scripts outside of GTM.

Build with developer APIs

If you're handling script deployment across multiple sites programmatically, the Custom Code API gives you endpoints to register scripts, apply them site-wide or per page, and publish changes without touching the Designer or Site Settings. Use it to place third-party scripts such as EasyCookie at scale. You'll need an App with OAuth authentication and the custom_code:read and custom_code:write scopes.

The relevant APIs include:

• The Custom Code API handles script registration and application at the site and page level.
• The Sites API retrieves site IDs and custom domains, and triggers publishing.
• The Pages API lists pages for page-level script overrides.
• Webhooks can trigger notifications on the site_publish event to confirm deployments.

Together these APIs handle script registration, deployment, and publishing for programmatic script rollouts.

Only Apps using OAuth tokens can access the Custom Code API. Site tokens and workspace tokens don't have access to these endpoints.

Register and deploy a consent script via API

This approach registers an externally hosted script resource, applies it to the site header, and publishes the changes.

To deploy a consent script programmatically:

1. Call GET /v2/sites with the sites:read scope to retrieve the target site_id.
2. Register the hosted script through the Custom Code API for the target site.
3. Apply the registered script site-wide with PUT /v2/sites/{site_id}/custom_code, setting the location to "header" so it loads in the <head> tag.
4. For page-specific overrides, use PUT /v2/pages/{page_id}/custom_code. This replaces all existing page-level scripts, so include every intended script in the request body.
5. Retrieve custom domain IDs with GET /v2/sites/{site_id}/custom_domains, then publish with POST /v2/sites/{site_id}/publish.

This sequence is most useful when you need to handle script deployment across many sites without opening Site Settings for each one.

What can you build with the EasyCookie Webflow integration?

Integrating EasyCookie with your Webflow site lets you add cookie consent management and GDPR compliance without building custom consent logic or handling script blocking manually.

• GDPR-compliant EU landing pages: Launch marketing pages that automatically detect cookies, display a localized consent banner in the visitor's language (from 130+ supported language options), and block analytics scripts until opt-in. A SaaS company running localized campaigns across Germany, France, and Spain can deploy one EasyCookie configuration that adapts per visitor.
• Analytics-preserving consent flows: Configure Google Consent Mode v2 so GA4 keeps modeling conversions when users decline tracking cookies. An e-commerce brand running Google Ads to EU audiences keeps campaign attribution data through cookieless pings and modeled reporting instead of losing visibility entirely.
• Multi-client agency compliance: Manage cookie consent banners for multiple client sites from a single EasyCookie account. A design agency maintaining 15 client sites can configure, deploy, and update consent banners across all domains without separate tool subscriptions for each project.
• Custom consent preference pages: Add a Code Embed element to a privacy policy or cookie settings page with a consent preferences button that lets returning visitors change their choices. A professional services firm can give visitors detailed control over analytical, functional, and advertising consent categories on a dedicated page.

If you need more control over deploying consent scripts across many sites or want to automate script registration after content changes, the API route covers those cases.