Native CMP
Cookie consent that is native to Webstudio.
A complete consent manager for cookies, third-party scripts and embeds, built from native Webstudio instances. Your AI agent finds every script and embed, blocks them until consent, configures cookies and texts, updates your privacy policy and matches your design.
Your consent on this page
Change a switch in the privacy settings. The status updates instantly, without a reload.
Used by
How it works
Three native pieces. No black box.
Inspired by Klaro and built natively for Webstudio, everything lives in your project: no external dashboard, no script from a vendor CDN, nothing hidden behind an iframe.
Engine in Custom Code
An 18 KB script in Project Settings → Custom Code decides before the first paint, blocks scripts until consent is given and keeps working across page transitions.
UI as a Slot
The notice, preferences modal and switches are regular Webstudio instances in one shared Slot. Select, restyle and rearrange them on the canvas.
Data in variables
consentServices holds the technical setup, consentTranslations the copy for every language. Collections render purposes and services.
Live demo
Embeds wait for consent.
YouTube uses Webstudio’s native component: press play and the consent notice appears on top, then the video starts. Google Maps waits behind a placeholder. Until the visitor agrees, no request reaches Google. Try both, then watch the status panel above.
YouTube video
This content is provided by YouTube. Loading it may set cookies and transfer data to YouTube.
Google Maps
This content is provided by Google Maps. Loading it may set cookies and transfer data to Google Maps.
Scripts & embeds
Block anything with one attribute.
Third-party code keeps working the way you pasted it. You only tell the engine which service it belongs to.
Script tags
<script type="text/plain"
data-cmp-service="google-analytics"
data-src="https://www.googletagmanager.com/gtag/js?id=G-XXXX">
</script>Set type to text/plain and name the service. The engine runs the script as soon as consent is given.
Iframes and widgets
<template data-cmp-service="youtube">
<iframe src="https://www.youtube-nocookie.com/embed/…"></iframe>
</template>Wrap any markup in a template inside an HTML Embed. It is inserted on consent and removed again when consent is revoked.
Decline handlers
<script type="text/plain"
data-cmp-service="google-analytics"
data-cmp-on="decline">
gtag("consent", "update", { analytics_storage: "denied" });
</script>Run code when a service is declined or revoked. Google Consent Mode v2 is also built in via the config.
Actions anywhere
<button data-cmp-action="open-modal">
Privacy settings
</button>Add data-cmp-action to any element in a footer, menu or rich text: open-modal, accept-all, decline-all, save, reset.
Multilingual
Speaks every language, in both directions.
The consent UI follows each page’s Language setting, in any language and writing direction. Arabic, Hebrew and other right-to-left languages mirror automatically.
Try it now
These pages only differ in Page Settings → Language. Open one and the notice, modal and service descriptions switch language, and direction, during client-side navigation.
Regional tags fall back to their language (de-AT → de). The generator ships texts for ten languages and a translation editor for any other.
consentTranslations
[
{ "lang": "en", "notice": { "title": "We value your privacy" } },
{ "lang": "de", "notice": { "title": "Ihre Privatsphäre ist uns wichtig" } },
{ "lang": "ar", "dir": "rtl", "notice": { "title": "نحن نحترم خصوصيتك" } }
]Add a language by adding one entry. Service titles and descriptions are translated per purpose in the same entry.
Craft design system
Styled with tokens you already know.
Every part of the consent UI is a composite token backed by Craft semantic variables. Use your own theme, or restyle a single token.
Theme variables
--theme-accent: #1d4ed8;
--theme-surface: #f3f4f6;
--theme-foreground: #15171c;
--theme-control: #6f7582;Change a handful of values on Global Root to rebrand every occurrence.
Semantic layer
--background-accent
--foreground-on-accent
--overlay-scrim
--border-focusTokens only consume semantic variables, following the Craft architecture.
Composite tokens
consent-notice
consent-notice-title
consent-button
is-consent-button-primaryBEM structure in Craft naming: blocks, elements and is- variants you can edit in the Style panel.
Accessible by default
WCAG 2.2 AA contrast pairs, visible focus rings, a real focus trap, Escape to close, native switch semantics and badges that don’t rely on color alone.
Proof of consent
Show what someone agreed to.
The GDPR asks you to be able to demonstrate consent. Native CMP stores every decision with a consent ID, and an optional log keeps the record in your own account.
A consent ID per decision
Every choice is stored with a random ID that the preferences dialog shows the visitor. When someone asks what they agreed to, that ID finds it — no IP address needed.
Your own log, in one click
Deploy a small Cloudflare Worker with a database into your own account, paste its URL into the config and every decision is recorded: time, type, choices, language.
No IP addresses, ever
IP addresses change with every network and are personal data themselves, so the log never stores them. Entries are deleted automatically after three years.
Custom Code
window.cmpConfig = {
consentLog: "https://consentlog.example.com",
};Off by default. Add a custom domain such as consentlog.yourdomain.com, so the log is not a third-party domain for your visitors.
This site uses it: decisions made here are logged to consentlog.nativecmp.com, without IP addresses.
Everything included
What you’d expect from a consent manager, and more.
Accept, decline, customize
Equal-weight buttons, granular purposes and a preferences modal.
Purposes and services
Required, default, opt-out, onlyOnce and dependsOn per service.
Cookie cleanup
Declined services lose their cookies, including parent-domain cookies.
Change detection
New services reopen the notice; nothing new runs until the visitor decides.
Contextual consent
Load an embed once, or always allow its provider, right where it appears.
No flash, no reload
Decisions apply instantly, and returning visitors never see a flicker.
Google Consent Mode v2
Default denied, then updates mapped to your services.
JavaScript API
cmp.show(), cmp.getConsent(), cmp.on("save") and DOM events.
Native YouTube & Vimeo
Webstudio’s own video components wait for consent: press play, allow, watch. No request before that.
Any language
Built-in texts in ten languages and a translation editor for every other language code.
Right-to-left
Arabic, Hebrew, Persian and more mirror the notice, modal and switches automatically.
Config generator
Pick services, translate, then paste a ready Consent Manager straight into Webstudio.
Install
Five ways to install. One does it all for you.
Let your AI agent handle the whole setup, or pick the level of control you want. Everything stays inside your Webstudio project.
AI agent via Webstudio MCP
The complete setup, done for you: it scans your site, blocks every script and embed, configures cookies and texts, adds the privacy policy section and matches your design. You review and publish.
Install with AI →2Config generator
Pick your services, enter IDs and paste the result into Webstudio: Custom Code, Consent Manager, gates and link.
Open the generator →3Service examples
Copy-paste setups for 23 common services, from Google Analytics to Calendly.
Browse examples →4Documentation
Every attribute, variable, token and API, to build or extend it by hand.
Read the docs →5Starter project
Starting a new site? Clone a Webstudio project with Native CMP already installed and style it right on the canvas.
Open the starter →FAQ
Questions, answered.
Can an AI agent install Native CMP?
Yes, and it’s the recommended way. Connect Claude Code, Codex or Cursor to your project with the Webstudio MCP and point it to nativecmp.com/install.txt. It finds your third-party scripts and embeds, blocks them, configures cookies and texts, drafts the privacy policy section and matches your design. It asks before changing anything, and you publish.
Does it work with client-side navigation?
Yes. The engine runs once and watches the page. Consent state, switches, gates, languages and scripts re-sync whenever Webstudio swaps page content, and scripts never run twice.
Can I use Webstudio’s YouTube and Vimeo components?
Yes. Place them in an interaction-mode Consent Gate and turn off Show preview, Autoplay and Preconnect. The video stays visible; the first click asks for consent and then starts the video.
Which languages are supported?
Any. Add an entry per language code to consentTranslations. The generator includes texts for English, German, Spanish, French, Italian, Portuguese, Dutch, Polish, Arabic and Hebrew, and right-to-left languages mirror automatically.
Can I prove that someone consented?
Yes. Every decision is stored in the visitor’s browser with a random consent ID, which the preferences dialog shows. For a record you keep yourself, deploy the optional consent log to your own Cloudflare account in one click and set its URL in the config: one entry per decision, with the consent ID, time, choices and language, and never an IP address. See Proof of consent in the documentation.
Is it GDPR compliant?
It gives you the building blocks: prior blocking, granular purposes, equally prominent accept and decline buttons, easy revocation and cookie cleanup. Compliance also depends on your texts, services and privacy policy.
Can I use Google Tag Manager or Consent Mode?
Yes. Map consent types to services with consentMode in the config. The engine sends the default and update commands, and can push decisions to the dataLayer.
Does it load anything from a third party?
No. The engine, copy and styles all live in your Webstudio project.
What happens when I add a service later?
Returning visitors see the notice again with a short note that services changed. Nothing new runs until they decide.
How do I show the settings again?
Add data-cmp-action="open-modal" to any link or button, or call cmp.show().
Support
Help cover the costs.
Native CMP is free and stays free: the engine, the generator, the examples and the documentation. If it’s useful to you, you can chip in to cover the running costs like the domain.
Payments are voluntary, you choose the amount, and they don’t unlock anything. They go to ELECOS UG (haftungsbeschränkt), the company behind the project, and are not tax-deductible donations. PayPal opens in a new tab; nothing from PayPal loads on this site.