Documentation

Everything you need to add Crumb to your site. One script tag, no dashboard required.

Install

Place this in your <head>, before Google Tag Manager / GA / Meta Pixel:

<script src="https://trycrumb.app/cdn/v1/widget.js"
        data-site-key="YOUR_SITE_KEY"
        data-privacy-url="/privacy-policy"
        data-company="Acme Inc."
        async></script>

That's it. The widget will set Google Consent Mode v2 defaults to denied immediately, detect the visitor's region, show the appropriate UI, and activate blocked scripts when consent is granted.

Block scripts until consent

Wrap any analytics or advertising tag so it does NOT execute until the user opts into that category:

<!-- Google Analytics 4 — won't fire until "analytics" is accepted -->
<script type="text/plain" data-consent="analytics" async
        src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXX"></script>

<!-- Meta Pixel — won't fire until "advertising" is accepted -->
<script type="text/plain" data-consent="advertising">
  !function(f,b,e,v,n,t,s) { /* ... */ }(/* ... */);
  fbq('init', '000000000000000');
  fbq('track', 'PageView');
</script>

The widget converts these to real <script> tags as soon as the matching category is consented to. If you load GA/Ads/Meta via Google Tag Manager, you don't need this — GTM will receive a gtag('consent','update',...) call and gate its tags itself.

Configuration

Configure via data-* attributes on the script tag, or with a window.CrumbConfig object placed before the widget script:

<script>
  window.CrumbConfig = {
    siteKey: "YOUR_SITE_KEY",
    mode: "auto",                       // gdpr | ccpa | global | auto
    privacyPolicyUrl: "/privacy-policy",
    companyName: "Acme Inc.",
    lang: "auto",                       // auto | en | es | fr | de | it
    position: "bottom",                 // bottom | top | bottom-left | bottom-right
    layout: "card",                     // card | bar
    theme: "light",                     // light | dark
    accentColor: "#C9A96E",
    showFloatingButton: true,
    floatingButtonIcon: "🍪",
    ttlDays: 180,
    honorGPC: true,
    gtagConsentMode: true,
    blockScripts: true,
    onConsent: function (consent) { console.log("consent:", consent); }
  };
</script>
<script src="..." async></script>

Available `data-*` attributes

Attribute	Maps to
`data-site-key`	`siteKey`
`data-mode`	`mode`
`data-lang`	`lang`
`data-position`	`position`
`data-layout`	`layout`
`data-theme`	`theme`
`data-accent`	`accentColor`
`data-privacy-url`	`privacyPolicyUrl`
`data-cookie-url`	`cookiePolicyUrl`
`data-company`	`companyName`
`data-fab="false"`	`showFloatingButton`

Custom categories

window.CrumbConfig = {
  categories: [
    { id: "necessary",   required: true,  defaultOn: true  },
    { id: "functional",  required: false, defaultOn: false },
    { id: "analytics",   required: false, defaultOn: false },
    { id: "advertising", required: false, defaultOn: false }
  ]
};

Custom text

window.CrumbConfig = {
  text: {
    title: "Cookies on Acme.com",
    body: "We use cookies to make this site work and to measure usage.",
    accept: "OK",
    reject: "No thanks"
  }
};

JavaScript API

Crumb.open();          // open the preferences modal
Crumb.get();           // → { analytics, advertising, necessary, ts, ... } or null
Crumb.set({ analytics: true });
Crumb.reset();         // clear stored choice, re-show banner
Crumb.mode();          // → 'gdpr' | 'ccpa' | 'global'

Crumb.on('update', function (c) { /* consent changed */ });
window.addEventListener('crumb:update', function (e) {
  /* e.detail = consent */
});

Linking a “Cookie Settings” anchor

Anywhere in your page footer:

<a href="#" onclick="Crumb.open(); return false;">Cookie Settings</a>

Compliance notes

This widget gives you the consent mechanism. To be compliant you also need:

A privacy policy that lists the cookies and third parties you use.
A way to honour deletion / access requests.
For CCPA: the “Do Not Sell or Share” link must be visible from every page — the widget renders this automatically when mode is ccpa.

Consult a privacy lawyer for your specific situation. The Crumb authors do not provide legal advice.