We use cookies
Enhance your experience
Cookie preferences
Manage your settings
We use cookies
Analyze our traffic
Cookie Consent for React
2 Minutes to Compliance
Add a GDPR-compliant cookie banner to your React or Next.js app. Design your banner in our visual builder, copy one line of code, and you're done.
How It Works
Three simple steps to add cookie consent to your React app
Design Your Banner
Use our visual builder to create a cookie banner that matches your brand. Choose colors, text, button styles, and compliance settings.
Copy the Script Tag
We generate a unique script tag for your banner. Copy it from the dashboard and paste it into your React app's layout or HTML.
You're Done!
Deploy your app and the banner appears. Update it anytime from the dashboard - no code changes needed.
Installation Guide
Add the script tag to your React app in 2 minutes
Create Your Banner in the Dashboard
Sign up and use our visual builder
Head to our dashboard and create a free account. Use the visual builder to:
- ✓Choose your banner colors and styles
- ✓Write your cookie consent message
- ✓Configure cookie categories (Analytics, Marketing, etc.)
- ✓Set up compliance for GDPR, PIPEDA, or CCPA
When you're happy with your design, click "Get Code" to get your unique script tag.
Next.js App Router (Recommended)
Add the script to your root layout
Open your app/layout.tsx file and add the Script component:
// app/layout.tsx
import Script from 'next/script'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<head>
{/* Cookie Consent Banner */}
<Script
src="https://www.cookie-banner.ca/api/scripts/YOUR_BANNER_ID.js"
strategy="beforeInteractive"
/>
</head>
<body>{children}</body>
</html>
)
}Replace YOUR_BANNER_ID with the actual ID from your dashboard. The script URL will be provided when you click "Get Code" in the builder.
Next.js Pages Router (Alternative)
Add to _document.tsx
If you're using the Pages Router, add the script to your pages/_document.tsx file:
// pages/_document.tsx
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html lang="en">
<Head>
{/* Cookie Consent Banner */}
<script
src="https://www.cookie-banner.ca/api/scripts/YOUR_BANNER_ID.js"
async
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}Create React App / Vite (Alternative)
Add to index.html
For CRA or Vite projects, add the script tag directly to your public/index.html or index.html file:
<!-- public/index.html (CRA) or index.html (Vite) -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My React App</title>
<!-- Cookie Consent Banner - Place BEFORE analytics scripts -->
<script
src="https://www.cookie-banner.ca/api/scripts/YOUR_BANNER_ID.js"
async
></script>
<!-- Your Google Analytics and other tracking scripts go here -->
</head>
<body>
<div id="root"></div>
</body>
</html>Important: Place the cookie consent script BEFORE any analytics or tracking scripts (Google Analytics, Facebook Pixel, etc.) to ensure they only load after the user consents.
Deploy and Test
Your cookie banner is now live!
Deploy your React app and the cookie banner will appear automatically on your site.
Want to make changes? Just log back into your dashboard, update your banner design or text, and click "Push Live". Your changes will appear on your live site within seconds - no code changes or redeployment needed!
Frequently Asked Questions
Does this work with Next.js 14 and the App Router?
Yes! Our solution works perfectly with Next.js 14, 13, and older versions. It's compatible with both the App Router (app directory) and Pages Router (pages directory). Just use the appropriate installation method shown above.
Will this affect my Core Web Vitals?
No. Our script is lightweight and loads asynchronously. It won't block your page rendering or negatively impact your Largest Contentful Paint (LCP), First Input Delay (FID), or Cumulative Layout Shift (CLS) scores.
Do I need to redeploy to update my banner?
No! That's the benefit of our hosted solution. Make changes in our dashboard and click "Push Live" - your changes appear on your site within seconds. No code changes, no redeployment, no downtime.
Is there an npm package available?
We use a hosted script approach instead of an npm package because it's simpler and more flexible. You get instant updates without needing to update dependencies or rebuild your app. The script loads from our CDN which is optimized for fast global delivery.
How do I customize the banner colors and text?
Use our visual builder in the dashboard. You can customize colors, fonts, text, button styles, position, and all compliance settings. See your changes in real-time before deploying.
Does this block Google Analytics and Facebook Pixel automatically?
Yes, when you use strategy="beforeInteractive" in Next.js or place our script tag before your analytics scripts in the HTML. Our banner will load first and prevent tracking scripts from running until the user gives consent.
Looking for Other Platforms?
We support all major web platforms with the same easy integration
Ready to Get Started?
Free forever. No credit card required.