Webstudio Native CMP
Cookie consent that is native to Webstudio.
A complete consent manager for cookies, third-party scripts and embeds. Built from native instances, styled with Craft tokens, translated by each page’s language and ready for client-side navigation.
Your consent on this page
Change a switch in the privacy settings. The status updates instantly, without a reload.
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.
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
Up and running in five steps.
No build step, no package, no account. Everything is copy and paste inside Webstudio.
Paste the engine
Copy the snippet from this project into Project Settings → Custom Code. Adjust cmpConfig at the top if needed.
Add the Slot
Copy the Consent Manager slot to every page, or put it into your page template.
Describe your services
List service names, cookies and flags in the consentServices variable.
Write your copy
Edit consentTranslations: one entry per language with notice, modal and purpose texts.
Block third-party code
Mark scripts and embeds with data-cmp-service and add a Privacy settings link to your footer.
FAQ
Questions, answered.
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.
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.
Webstudio 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.