npm Package — Overview

The @truconsent/consent-notice npm package provides a React component for consent banners. It is a client-side library — all API calls are made directly from the browser.

How it works

Two separate base URLs are involved:

Variable	URL	Used for
VITE_TRU_CONSENT_API_URL	https://trukit-dev.truconsent.io	TruConsentModal at runtime
VITE_TRU_CONSENT_MANAGEMENT_API_URL	https://truapi-dev.truconsent.io	Fetching assetId and bannerId

Installation

npm

npm install @truconsent/consent-notice

yarn

yarn add @truconsent/consent-notice

pnpm

pnpm add @truconsent/consent-notice

Environment variables

Add these to your .env file before starting. Steps 1–3 walk you through finding each value.

# .env

# SDK runtime — used by TruConsentModal
VITE_TRU_CONSENT_API_URL=https://trukit-dev.truconsent.io

# Management API — used to fetch assetId and bannerId
VITE_TRU_CONSENT_MANAGEMENT_API_URL=https://truapi-dev.truconsent.io

# From Step 1 — generated in the platform dashboard
VITE_TRU_CONSENT_ORGANIZATION_ID=your-organization-id
VITE_TRU_CONSENT_ADMIN_API_KEY=your-admin-scope-key
VITE_TRU_CONSENT_API_KEY=your-consent-scope-key

# From Step 2 — discovered via the Management API
VITE_TRU_CONSENT_ASSET_ID=your-assetId

# From Step 3 — discovered via the Management API
VITE_TRU_CONSENT_BANNER_ID=your-bannerId

Allow your domain

Add every domain where the component runs to Settings → API Settings → Allowed Domains. Requests from unlisted domains are rejected with 403 Forbidden.

Setup steps

1. Get API key and org ID — Generate credentials from the platform dashboard.

2. Fetch asset ID — Discover your assetId via the Management API.

3. Fetch collection point details — Discover your bannerId via the Management API.

4. Integrate TruConsentModal — Add CSS imports and mount the component.

---

Next: Get API key and org ID →