Tickbox.dev Sign in →

Lab · §3 — Interactive Builder

Build your consent.config.ts.

Tick the boxes, pick a jurisdiction, copy the generated config. Everything happens in your browser — no sign-up, no data leaves this tab.

01

Jurisdiction

Pick a jurisdiction
02

Vendor groups

1 selected
03

Privacy policy URL

optional
04

Banner colours

defaults

Colours are presentation, not compliance — they stay out of consent.config.ts. Drop this in your CSS (or edit it per-site from the dashboard): 

/* Tickbox banner colours — set on :root, or on a wrapper
   element around <ConsentBannerDefault>. */
:root {
  --tb-primary-bg: #1f2328;
  --tb-bg: #ffffff;
  --tb-fg: #1f2328;
}
consent.config.ts
17 lines·generated · 2026-05-29
import { defineConsent, jurisdictions, PRIVACY_FRIENDLY_ANALYTICS } from '@tickboxhq/core'

export default defineConsent({
  jurisdiction: jurisdictions.UK_DUAA,
  policy: {
    version: '2026-05-29',
    url: '/privacy',
  },
  categories: {
    necessary: { required: true },
    analytics: {
      vendors: [...PRIVACY_FRIENDLY_ANALYTICS],
      default: true,
      description: 'Privacy-friendly site usage statistics.',
    },
  },
})
Save to dashboard ↗
Live preview · how it renders on your site mode · notice
your-site.example

Just so you know

We use privacy-friendly analytics to understand how the site is used. No personal data, no advertising. Privacy policy

01 · Install the SDK

# pick the adapter for your stack
npm install @tickboxhq/core \
            @tickboxhq/react \
            @tickboxhq/banner-default

Also available for Vue, Nuxt, or vanilla JS.

02 · Drop in the config

Save the file you copied as consent.config.ts at the root of your app. Wrap your tree in <ConsentProvider config={config} /> and render <ConsentBannerDefault />.

Full React guide ↗

03 · Audit log (optional)

Need a tamper-resistant trail of every decision? Add @tickboxhq/cloud, sign in, paste the API key. Otherwise the SDK runs entirely locally.

Open the dashboard ↗