Consenti
Showing:Frontend OnlyChange →

Quick Start — Frontend Only

The widget works standalone with zero backend. Profiles are pre-built and load automatically. Consent is stored in a browser cookie.

1. Install

bash
npm install @consenti/ui

2. Add to your app

Pass an empty config and Consenti auto-detects the right compliance group from the browser's locale — GDPR for EU visitors, CCPA for California, etc.

main.ts
ts
import { ConsentiSetup } from '@consenti/ui'

const widget = new ConsentiSetup({})
// A banner appears on first visit. That's it.
💡Want a specific compliance mode instead of auto-detect? Pass compliance: { type: 'opt-in' } for GDPR or compliance: { type: 'opt-out' } for CCPA.

3. React to consent

Gate analytics or advertising code behind consent. Check on page load for returning visitors, and listen for new submissions.

ts
const widget = new ConsentiSetup({})

// Returning visitors — check existing consent on load
widget.onReady(() => {
  if (widget.isCookieGranted('analytics')) initAnalytics()
  if (widget.isCookieGranted('marketing')) initAds()
})

// New submission this session
widget.on('consentSubmitted', ({ consent }) => {
  if (consent.analytics === 'granted') initAnalytics()
})
ℹ️That's enough to be GDPR-compliant. The sections below are optional improvements.

Optional: React / Next.js

ConsentSetup.tsx
tsx
'use client'
import { useEffect } from 'react'
import { ConsentiSetup } from '@consenti/ui'

export function ConsentSetup() {
  useEffect(() => {
    const widget = new ConsentiSetup({})
    return () => widget.destroy()
  }, [])
  return null
}

Optional: GTM / Google Consent Mode v2

ts
new ConsentiSetup({
  utils: {
    gtm: { containerId: 'GTM-XXXXXX', adsDataRedaction: true },
  },
})

What to read next