For developers → DocsSlovensky

DEVELOPER GUIDES

Cookie consent for React / Vite

The script belongs in index.html. Not in a component — anything inside React runs after render, which is too late for blocking.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <script id="CookieFood" src="https://cookiefood.b-cdn.net/v1/consent.js" data-cfid="YOUR-ID" data-blockingmode="auto"></script> <title>My app</title> </head> <body> <div id="root"></div> <script type="module" src="/src/main.tsx"></script> </body> </html>
React to consent in your code (optional)
useEffect(() => { function onConsent(e) { const c = e.detail || {}; // { necessary, preferences, statistics, marketing } if (c.statistics) enableAnalytics(); } window.addEventListener('CookieFoodOnConsentReady', onConsent); return () => window.removeEventListener('CookieFoodOnConsentReady', onConsent); }, []);

What to watch out for

Do not use react-helmet

It injects the script after render. Blocking has to happen earlier.

One injection is enough for an SPA

Route changes need nothing extra — the banner handles client-side navigation.

Where to get your YOUR-ID

Sign up, add a domain and you get the ID right away — the scan starts by itself. The snippet never changes again; everything else is configured in your account.

Try free for 30 daysScan your site firstNo credit card.

Other environments

Next.jsWordPressShopifyGoogle Tag Managerllms.txt