Integrate via npm (React)

Install the package:

npm

npm install @truconsent/consent-notice

yarn

yarn add @truconsent/consent-notice

pnpm

pnpm add @truconsent/consent-notice

bun

bun add @truconsent/consent-notice

Mount TruCookieConsent in your root App component, outside <Routes>, so it persists across navigation and only runs the consent check once.

App.tsx

import { TruCookieConsent } from "@truconsent/consent-notice";
import "@truconsent/consent-notice/banner-styles.css";
import "@truconsent/consent-notice/variables.css";
import "@truconsent/consent-notice/tailwind.css";

const App = () => (
  <QueryClientProvider client={queryClient}>
    <BrowserRouter>
      <TruCookieConsent
        apiUrl={import.meta.env.VITE_TRU_CONSENT_API_URL}
        apiKey={import.meta.env.VITE_TRU_CONSENT_API_KEY}
        orgId={import.meta.env.VITE_TRU_CONSENT_ORGANIZATION_ID}
        assetId={import.meta.env.VITE_TRU_CONSENT_ASSET_ID}
      />
      <Routes>
        <Route path="/" element={<Index />} />
        {/* ... */}
      </Routes>
    </BrowserRouter>
  </QueryClientProvider>
);

Note

Place TruCookieConsent inside <BrowserRouter> but outside any individual page component. Placing it inside a page causes it to unmount and remount on every route change, re-triggering the consent check on every navigation.

Props

* Required

Prop	Type	Description
apiUrl *	string	Base URL of the truConsent API
apiKey *	string	Consent-scope API key
orgId *	string	Your organisation ID
assetId *	string	Your asset UUID
theme	string	”light” (default) or “dark”
onClose	function	Called after the user makes a choice

”Cookie Settings” link

The component registers window.truCookieConsent on mount:

<button onClick={() => window.truCookieConsent?.openSettings()}>
  Cookie Settings
</button>

window.truCookieConsent API

Method	Description
openSettings()	Opens the preferences panel
acceptAll()	Programmatically accepts all categories
rejectAll()	Programmatically rejects all optional categories
hasConsented()	Returns true if the user has already made a choice
reset()	Clears stored consent and re-shows the banner
getCategories()	Returns the current { [slug]: boolean } consent state

Verification

• Open your site — the banner should appear on first visit.
• After accepting, check DevTools → Application → Local Storage — tru_consent should be set.
• To test again: localStorage.removeItem('tru_consent') then reload.

Banner does not appear

• Confirm the cookie notice status in the platform is Active (admin approval required).
• Check that your domain is in Allowed Domains under Settings → API Settings.
• Verify all four env vars are set and non-empty.

403 Forbidden in the network tab

• Your domain is not allowlisted. Add it under Settings → Allowed Domains.

---

← Get API credentialsNext: CDN script tag →