React Quickstart

Goal

Show a banner that auto‑selects the right framework (GDPR/TCF in EEA/UK, GPP in US) and blocks non‑essential tags until the user chooses.

Steps

1. Install the React package

pnpm add @digiwedge/cmp-consent-react

2. Wrap your app

// main.tsx / index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { ConsentProvider } from '@digiwedge/cmp-consent-react';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <ConsentProvider
    options={{
      region: 'auto',
      regionEndpoint: '/api/v1/region',
      siteKey: 'YOUR_SITE_KEY',
      // optional: cacheTtlMs: 30 * 60 * 1000,
    }}
  >
    <App />
  </ConsentProvider>,
);

3. Add a “Privacy settings” link (to reopen the banner)

<a href="#" onclick="window.DWConsent && window.DWConsent.open(); return false;"
  >Privacy settings</a
>

Verify

• Portal → Analytics → Diagnostics → Region decision shows your framework; Consent Mode v2 turns ✅ after clicking Accept on your site.

What you’ll see

• Banner with Accept / Reject / Preferences.
• GA4 waits until consent (when using our GA4 template in GTM).

Troubleshooting

Symptom	What you see	Fix
Banner doesn’t show	No banner on first visit	Ensure wrapper renders early; clear cache; correct Site Key
Tags fire on Reject	GA4/Ads events	Use our GA4 template; ensure tags wait for consent