website·Indexed 30 days ago
https://consenti.devAn open-source, Apache 2.0 licensed Consent Management Platform (CMP) toolkit for GDPR and CCPA compliance. Includes technical guides for installing the UI Widget via npm, CDN, or ESM, and configuring backend storage with PostgreSQL, MongoDB, or MySQL. Supports TCF v2.3 and Google Consent Mode v2 integration.
ConsentScript to inject <script> tags and ConsentAction to trigger callbacks (like SDK opt-ins) based on specific consent parameters. CategoryScript and CategoryAction operate on entire categories. BannerTrigger allows triggering the banner or modal from a DOM element. For a declarative approach, use <script type="text/plain" data-consenti-consent-script="..."> and call scanConsentScripts().import { ConsentScript, ConsentAction, CategoryAction, CategoryScript, BannerTrigger } from '@consenti/ui'
// Script based on specific cookie ID
new ConsentScript({ cookieId: 'analytics_storage', widget, src: 'https://cdn.example.com/analytics.js' })
// Action based on specific cookie ID
new ConsentAction({ id: 'analytics_storage', widget, onGrant: () => sdk.optIn(), onDeny: () => sdk.optOut() })
// Category-wide action
new CategoryAction({ id: 'marketing', widget, onGrant: () => adSdk.enableAll(), onDeny: () => adSdk.disableAll() })
// Trigger modal from footer link
new BannerTrigger({ widget, el: '#footer-cookie-settings', action: 'modal' })Consenti can be deployed in two modes. You can start with frontend-only and migrate to full-stack by setting api.enabled: true in the configuration.
| Feature | Frontend-only | With Backend (@consenti/api) |
|---|---|---|
| Consent Storage | Browser cookie / localStorage | Server database (SQLite, MongoDB, PostgreSQL) |
| Profile Management | Defined in code | Admin dashboard (no code changes needed) |
| Audit Log | No | Yes (timestamped records with visitor ID) |
| Multi-tenancy | No | Yes |
| Setup Effort | Single import & constructor call | npm install @consenti/api + server mount |
<!-- CDN / UMD --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@consenti/ui/dist/index.css" /> <script src="https://cdn.jsdelivr.net/npm/@consenti/ui/dist/index.umd.js"></script> <script> const { ConsentiSetup } = ConsentiUI new ConsentiSetup({ core: { regulation: 'gdpr' } }) </script>
<!-- ESM in Browser --> <script type="module"> import { ConsentiSetup } from 'https://esm.sh/@consenti/ui' new ConsentiSetup({ core: { regulation: 'gdpr' } }) </script>
node:sqlite). It can be deployed as a standalone server, integrated into Express, Fastify, or as a Next.js Route Handler.// Fastify Integration
import Fastify from 'fastify'
import { createConsenti } from '@consenti/api'
const fastify = Fastify()
const consenti = createConsenti({
storage: { driver: 'node:sqlite', path: './consenti-data' },
auth: { mode: 'local', adminEmail: '...', adminPassword: '...' },
dashboard: true
})
await fastify.register(consenti.fastifyHandler)
await fastify.listen({ port: 3000 })npm install @consenti/uiimport { ConsentiSetup } from '@consenti/ui'
const widget = new ConsentiSetup({
compliance: { type: 'auto' }, // Geo-based detection (GDPR for EU, CCPA for CA, etc.)
})autoHonorGPC: 'strict' is configured, Consenti detects the navigator.globalPrivacyControl signal. If true, it automatically denies all cookies marked with listenGpc: true, writes the consent record immediately without showing the banner, and stores gpc_detected: true on the record.@consenti/api package for the server and @consenti/ui for the client. The backend provides an admin dashboard and REST API, while the frontend connects to this API to sync consent states.// Backend (Express)
import express from 'express'
import { createConsenti } from '@consenti/api'
const app = express()
const consenti = createConsenti({
storage: { driver: 'node:sqlite', path: './consenti-data' },
auth: {
mode: 'local',
adminEmail: 'admin@example.com',
adminPassword: process.env.CONSENTI_ADMIN_PASSWORD!,
},
dashboard: true,
})
app.use(consenti.router)
app.listen(3000)
// Frontend
import { ConsentiSetup } from '@consenti/ui'
const widget = new ConsentiSetup({
compliance: { type: 'auto' },
api: { enabled: true, baseUrl: 'https://your-api.example.com' },
})cmpId with IAB Europe or MSPA. The widget must use the general-privacy-consent compliance type, and the server must be configured with the cmpId, cmpVersion, and publisherCC (Country Code).// Widget configuration
new ConsentiSetup({
compliance: { type: 'general-privacy-consent' },
api: { enabled: true, baseUrl: 'https://your-api.example.com' },
})
// Server configuration (@consenti/api)
createConsenti({
compliance: {
tcf: { enabled: true, cmpId: 9999, cmpVersion: 1, publisherCC: 'DE' },
},
})consent_records, consent_history, and the visitors record (including IP hash, UA hash, and geolocation).DELETE /consenti/api/v1/consent/:visitorIdgoogleConsentMode option to enabled: true within the ConsentiSetup constructor. When enabled, Consenti automatically triggers gtag('consent', 'update', { ... }) calls. The values for analytics_storage, ad_storage, ad_user_data, and ad_personalization are dynamically derived from the user's actual consent choices.new ConsentiSetup({
compliance: { type: 'opt-in' },
googleConsentMode: { enabled: true },
})// To disable auto-injection and use your own styles
new ConsentiSetup({
core: {
disableCssTemplate: true
}
})