Playground

Turn the options and watch it change. The code below changes with it, in whichever framework you are using — copy it and you have what is on the screen.

Live

Layout

Position Ignored by the centred layout.

Modal Block the page until an answer is given — what some regimes require.

Consent Mode Google Consent Mode v2 signals, sent on every decision.

Policy Url

Heading Tag So the banner does not break the page's heading order.

import { createCookieConsent } from '@devix-labs/cookie-consent';
import '@devix-labs/cookie-consent/styles.css';

createCookieConsent({
  categories: [
    {
      id: 'necessary',
      label: 'Strictly necessary',
      required: true,
      description: 'Signing in, your basket, and the choice you make here.'
    },
    {
      id: 'analytics',
      label: 'Analytics',
      description: 'How the site is used, so we know what to fix.',
      services: [{"id":"ga4","label":"Google Analytics 4"}]
    },
    {
      id: 'marketing',
      label: 'Marketing',
      description: 'Adverts that follow you to other sites.',
      services: [{"id":"meta","label":"Meta Pixel"}]
    }
  ],
  layout: 'box',
  position: 'bottom-left',
  modal: false,
  consentMode: true,
  policyUrl: 'https://example.com/privacy',
  headingTag: 'h2'
});

import { useCookieConsent } from '@devix-labs/cookie-consent/react';
import '@devix-labs/cookie-consent/styles.css';

const { accepted } = useCookieConsent({
  categories: [
    {
      id: 'necessary',
      label: 'Strictly necessary',
      required: true,
      description: 'Signing in, your basket, and the choice you make here.'
    },
    {
      id: 'analytics',
      label: 'Analytics',
      description: 'How the site is used, so we know what to fix.',
      services: [{"id":"ga4","label":"Google Analytics 4"}]
    },
    {
      id: 'marketing',
      label: 'Marketing',
      description: 'Adverts that follow you to other sites.',
      services: [{"id":"meta","label":"Meta Pixel"}]
    }
  ],
  layout: 'box',
  position: 'bottom-left',
  modal: false,
  consentMode: true,
  policyUrl: 'https://example.com/privacy',
  headingTag: 'h2'
});

if (accepted('analytics')) start();

<script setup>
import { useCookieConsent } from '@devix-labs/cookie-consent/vue';
import '@devix-labs/cookie-consent/styles.css';

const consent = useCookieConsent({
  categories: [
    {
      id: 'necessary',
      label: 'Strictly necessary',
      required: true,
      description: 'Signing in, your basket, and the choice you make here.'
    },
    {
      id: 'analytics',
      label: 'Analytics',
      description: 'How the site is used, so we know what to fix.',
      services: [{"id":"ga4","label":"Google Analytics 4"}]
    },
    {
      id: 'marketing',
      label: 'Marketing',
      description: 'Adverts that follow you to other sites.',
      services: [{"id":"meta","label":"Meta Pixel"}]
    }
  ],
  layout: 'box',
  position: 'bottom-left',
  modal: false,
  consentMode: true,
  policyUrl: 'https://example.com/privacy',
  headingTag: 'h2'
});
</script>

<template>
  <button @click="consent.showPreferences()">Cookie settings</button>
</template>

<script>
  import { createCookieConsent } from '@devix-labs/cookie-consent/svelte';
  import '@devix-labs/cookie-consent/styles.css';

  const consent = createCookieConsent({
  categories: [
    {
      id: 'necessary',
      label: 'Strictly necessary',
      required: true,
      description: 'Signing in, your basket, and the choice you make here.'
    },
    {
      id: 'analytics',
      label: 'Analytics',
      description: 'How the site is used, so we know what to fix.',
      services: [{"id":"ga4","label":"Google Analytics 4"}]
    },
    {
      id: 'marketing',
      label: 'Marketing',
      description: 'Adverts that follow you to other sites.',
      services: [{"id":"meta","label":"Meta Pixel"}]
    }
  ],
  layout: 'box',
  position: 'bottom-left',
  modal: false,
  consentMode: true,
  policyUrl: 'https://example.com/privacy',
  headingTag: 'h2'
});
</script>

<button on:click={() => consent.showPreferences()}>Cookie settings</button>

Every option here is in the documentation, along with the ones that are not worth a control.