diff --git a/packages/cookie-banner/README.md b/packages/cookie-banner/README.md index 51ab359e7..2b8fcfed6 100644 --- a/packages/cookie-banner/README.md +++ b/packages/cookie-banner/README.md @@ -1,28 +1,102 @@ # @probo/cookie-banner -A lightweight, GDPR-compliant cookie consent banner for the web. Works with any framework or plain HTML — zero dependencies, powered by Web Components. +A lightweight, dependency-free cookie consent banner built on Web Components. Bundle it with your app as an ES module, use it headless with full UI control, or drop it in with a single script tag. Works with any framework or plain HTML. + +Supports opt-in (GDPR, ePrivacy) and opt-out (CCPA/CPRA) consent modes, per-category cookie controls, third-party resource blocking, Google Consent Mode v2, PostHog integration, and multi-language support out of the box. ## Installation +There are three ways to use the SDK: + +### Script Tag (IIFE) + +No bundler required — add a single ` +``` + +This renders a fully styled consent dialog and a floating settings button automatically. + +### ES Module (Themed Banner) + +For bundled applications (React, Vue, Svelte, Next.js, etc.): + ```bash npm install @probo/cookie-banner ``` -Or drop a single ` + ``` +See [Theming](https://www.getprobo.com/docs/product/cookie-banner/theming) to customize colors, fonts, and styling with CSS custom properties. + +### Headless Components + +For complete control over the consent UI, use the unstyled Web Component building blocks: + +```js +import { registerComponents } from "@probo/cookie-banner/headless"; + +registerComponents(); +``` + +```html + + +
+

We use cookies to improve your experience.

+ + + +
+
+ + +
+ + + + +
+
+
+``` + +## Key Features + +- **Multi-regulation compliance** — Supports opt-in (GDPR, ePrivacy) and opt-out (CCPA/CPRA) consent modes, Global Privacy Control (GPC) detection, and per-category cookie controls. +- **Consent audit trail** — Every consent action is recorded server-side with anonymized IP, user agent, per-category choices, and a reference to the exact banner version the visitor saw. +- **Third-party blocking** — Automatically prevents scripts, iframes, images, and other resources from loading until the visitor grants consent for the matching category. +- **Built-in integrations** — Syncs consent state with Google Consent Mode v2 and PostHog automatically. +- **Multi-language support** — Built-in translations for English, French, German, and Spanish. The SDK auto-detects the visitor's language from the page or browser. +- **Theming** — Match your brand with CSS custom properties for colors, fonts, border radius, and more. Supports dark mode. + ## Documentation -Full documentation — including theming, headless components, and script blocking — is available at: - -**https://www.getprobo.com/docs/product/cookie-banner/overview** +Full documentation is available at **https://www.getprobo.com/docs/product/cookie-banner/overview** ## License