Categories, services, cookies

<div class="demo">
  <button class="demo-btn" id="open">Open cookie settings</button>
  <p class="demo-hint">Remarketing stays off until Google Analytics is on — it says it <code>needs</code> it.</p>
  <pre class="demo-out" id="out">nothing chosen yet</pre>
</div>

import { createCookieConsent } from 'https://devix.pk/cdn/oss/cookie-consent@1.0.0/index.js';

const out = document.getElementById('out');

const consent = createCookieConsent({
  autoShow: false,
  storage: { name: 'demo_prefs', days: 1 },
  categories: [
    { id: 'necessary', label: 'Strictly necessary', description: 'Session and security.', required: true, cookies: [{ name: 'session', duration: 'Session', description: 'Keeps you signed in' }] },
    {
      id: 'analytics',
      label: 'Analytics',
      description: 'How the site is used.',
      services: [
        { id: 'ga4', label: 'Google Analytics 4', description: 'Page views and events.', url: 'https://policies.google.com/privacy', cookies: [{ name: '_ga', duration: '2 years', description: 'Tells visits apart' }, { name: '_ga_*', duration: '2 years', description: 'Session state' }] },
        { id: 'hotjar', label: 'Hotjar', description: 'Heatmaps. Off unless you ask for it.', defaultOn: false },
      ],
    },
    {
      id: 'marketing',
      label: 'Marketing',
      services: [
        { id: 'remarketing', label: 'Google remarketing', description: 'Needs Google Analytics to work.', needs: ['ga4'] },
        { id: 'meta', label: 'Meta pixel' },
      ],
    },
  ],
});

const show = () => {
  const record = consent.record();
  out.textContent = record ? JSON.stringify({ categories: record.categories, services: record.services, refused: record.refused, via: record.via }, null, 2) : 'nothing chosen yet';
};

consent.on('change', show);
consent.on('firstconsent', show);
document.getElementById('open').addEventListener('click', () => consent.showPreferences());
show();

@import url('https://devix.pk/cdn/oss/cookie-consent@1.0.0/cookie-consent.min.css');
.dxcc-banner { position: absolute; }