Most cookie banners in Framer are visual only. They look right but do nothing. Scripts still load before consent. Preferences are never actually saved. Visitors have no real control over tracking.
This component is different. It is a fully functional cookie consent management system built specifically for Framer — not just a styled banner, but a working consent layer that blocks scripts, saves choices, respects user preferences, and integrates with Google Consent Mode v2.
Script blocking that works scripts stay blocked until the visitor gives permission for their category
Scans your published Framer site for script tags with consent attributes automatically
Saves consent choices to both localStorage and a browser cookie so preferences persist across sessions
Floating cookie icon appears after consent is saved so users can reopen settings any time
Google Consent Mode v2 integration updates analytics_storage, ad_storage, ad_user_data, ad_personalization, functionality_storage, and personalization_storage automatically
Fires a custom DOM event after consent is saved so your tracking tools can react
Global API available at window.cookieConsent call openSettings(), hasConsent(), or reset() from anywhere on your site
Works with inline and external scripts
Supports custom script categories beyond the built-in four
Cookie and localStorage cleanup when categories are rejected
MutationObserver watches for dynamically injected scripts so late-loading tools are also gated
Version-based consent expiry bump the version string to re-prompt users when your tracking setup changes
You do not paste scripts into this component. Instead, you add consent attributes directly to your existing script tags in the Framer custom code panel.
For external scripts (Google Analytics, Meta Pixel, etc.):
type="text/plain" data-cookie-category="analytics" data-cookie-src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"
For inline scripts:
type="text/plain" data-cookie-category="marketing"
The component scans the page on load, finds every script with those attributes, checks the saved consent state, and activates only the ones the visitor has approved. Scripts that are not approved stay blocked. If the user later changes their preferences, the component applies the updated consent immediately.
Supported category values: analytics, marketing, preferences, necessary, or any custom string you define.
Google Analytics 4 (GA4)
Google Tag Manager (GTM)
Meta Pixel / Facebook Pixel
Google Ads conversion tracking
Hotjar and other behavior analytics tools
Any third-party script that loads via a script tag
Necessary always active, controls core functionality and consent storage itself
Preferences language, interface settings, user experience choices
Analytics visit tracking, session data, content performance measurement
Marketing ad targeting, retargeting pixels, attribution and campaign measurement
Custom define your own category keys for tools that do not fit the standard four
Fully functional cookie consent for Framer (not just visual)
Script scanning and activation engine built in TypeScript
Google Consent Mode v2 support with automatic consent state updates
localStorage and cookie storage with configurable expiry (default 180 days)
Floating cookie icon to reopen settings position, size, and color fully customizable
Banner and settings panel in one component no second component needed
Animate-in transitions with safe-area-inset support for mobile
Fill-width behavior for clean Framer layout control
Four position options: Bottom Center, Bottom Left, Bottom Right, Top Center
All text fully editable from the Framer property panel no code changes needed
Color controls for background, text, muted text, border, primary button, secondary button, toggles, and floating icon
Typography controls for font family, title size, body text size, and button size
Show or hide the Reject All button
Default consent state per category configurable
Debug mode for console logging during development
Accessible uses role="dialog", aria-modal, aria-checked, and aria-label attributes throughout
Content group: banner title, banner message, settings panel title, settings panel message, helper text for developers
Buttons group: Accept All label, Reject All label, Customize label, Save Settings label, Back label
Categories group: label and description for Necessary, Preferences, Analytics, and Marketing
Privacy group: privacy policy link label and URL
Consent group: cookie name, consent version, expiry days, default state per category, show or hide Reject All
Integrations group: enable script scanning, enable MutationObserver, enable Google Consent Mode, custom DOM event name, custom global function name, debug logging
Layout group: position, z-index, screen padding with safe area support, border radius, panel padding, content gap, button gap, show helper text toggle, animate-in toggle
Cookie Icon group: enable floating button, position (left or right), label text, show or hide label, offset from screen edge, icon size
Colors group: 12 color controls covering every surface in the component
Typography group: font family, title size, text size, button size
After the component loads, the following are available anywhere on your published site:
window.cookieConsent.hasConsent("analytics") — returns true or false based on saved consent window.cookieConsent.openSettings() — opens the cookie settings panel programmatically window.cookieConsent.reset() — clears all saved consent and shows the banner again window.cookieConsent.state — the full stored consent object
You can also set a custom function name in the Integrations panel to expose openSettings() under any name you choose, making it easy to wire up a "Cookie Settings" link in your footer without touching code.
Framer websites that need real GDPR or cookie law compliance behavior
SaaS landing pages running GA4, GTM, and Meta Pixel
Agency websites and client projects that need a production-ready consent layer
Marketing websites using retargeting and ad tracking scripts
Portfolios and lead generation pages that want cleaner, more professional cookie handling
Any Framer project where a visual-only banner is not enough
Designed and built by Zlatko Marjanović — Webflow Certified Partner and Framer developer. 120+ client projects delivered. Focused on functional, clean, and conversion-ready web components.
Need help connecting this to Google Analytics, Meta Pixel, or Google Tag Manager? Reach out directly.
Zlatko Marjanović
