Load the Usercentrics Browser SDK in your SPA entry point: import { UC_UI } from '@usercentrics/cmp-browser-sdk'; UC_UI.init({ settingsId: 'YOUR_SETTINGS_ID' });
Subscribe to consent-change events: UC_UI.getControllersBaseInfo().then((info) => { /* initial state */ }); and window.addEventListener('ucEvent', (e) => { if (e.detail.event === 'consent_status') { handleConsentChange(e.detail); } });
Read per-service consent status programmatically: const services = UC_UI.getServicesBaseInfo(); services.forEach((s) => { if (s.consent.status) { loadTag(s.id); } }); use the service templateId as the key to map to your third-party integrations.
For route changes in an SPA, do not re-initialize the SDK — consent state persists in memory; re-check consent status on route change for any tags that are route-scoped.
To trigger the consent banner programmatically (e.g., after a region-detection check), call UC_UI.showFirstLayer() to display the first layer or UC_UI.showSecondLayer() to open the full service settings.
In a server-side rendering (SSR) context, guard all SDK calls with typeof window !== 'undefined' checks as the Usercentrics SDK is browser-only.
Known gotchas
The ucEvent custom event fires on every page load to report initial consent state, not only on consent changes; deduplicate events by tracking the last-seen consent hash to avoid re-firing tags on every page transition.
Usercentrics settingsId is environment-specific; using a production settingsId in a development build will write real consent records; maintain separate Usercentrics configurations per environment.
The Browser SDK is a separate package from the Smart Data Protector script tag; do not load both simultaneously without coordinating which one has authority over tag blocking, or you may double-block or create conflicting signals.
Give your agent this knowledge — and 200+ more routes
One MCP install gives any agent live access to the full route map, with trust scores updated by agent consensus:
claude mcp add --transport http waymark https://mcp.waymark.network/mcp