Tutorial — Frontend Only — Step 1 of 6
Install
Add @consenti/ui to your project.
Pick whichever installation method matches your project — each is self-contained, so use only the one you need.
Option A — npm (recommended)
bash
npm install @consenti/uiZero runtime dependencies — the widget uses only browser built-ins.
main.ts
ts
import { ConsentiSetup } from '@consenti/ui'
const widget = new ConsentiSetup({})
// A banner appears on first visit — Consenti auto-detects the right compliance
// group (GDPR, CCPA, etc.) from the visitor's browser locale.Option B — CDN / UMD (no build step)
Exposes a global ConsentiUI object. No stylesheet link needed — styles inject automatically.
index.html
html
<script src="https://cdn.jsdelivr.net/npm/@consenti/ui/dist/index.umd.js"></script>
<script>
const { ConsentiSetup } = ConsentiUI
new ConsentiSetup({})
</script>Option C — ESM in the browser (no bundler)
index.html
html
<script type="module">
import { ConsentiSetup } from 'https://esm.sh/@consenti/ui'
new ConsentiSetup({})
</script>ℹ️No config is required to get a working, compliant banner with any of the three options. Everything from here on is about customizing it. See UI Installation for CSS options and the full package structure (
dist/index.mjs for ESM, dist/index.umd.js for the CDN/UMD bundle, plus dist/react.mjs, dist/vue.mjs, and dist/angular.mjs framework adapters).