Skip to content

Documentation

How to Add a Cookie Banner on a React.js Website

How to Add a Cookie Banner on a React.js Website

Last updated Mar 15, 2026

This guide shows you how to add the Kukie.io cookie consent banner to your React.js application. The banner works as a standalone script — no npm package or React wrapper component needed.

Prerequisite: You need a Kukie.io account and at least one site added. If you haven't done this yet, follow Create Your Account & Add Your First Site first.

Step 1: Get Your Embed Code

Log in to your Kukie.io dashboard, navigate to your site, and copy the embed code from the Setup tab. It looks like this:

<script src="https://cdn.kukie.io/s/YOUR-SITE-KEY/c.js" async></script>

Replace YOUR-SITE-KEY with the actual site key shown in your dashboard.

Step 2: Add the Script to React

The Kukie.io banner is a standalone script — it does not need a React wrapper or npm package. Add it to your HTML entry point:

Vite (Recommended)

Open index.html in your project root and add the script inside <head>:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <script src="https://cdn.kukie.io/s/YOUR-SITE-KEY/c.js" async></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My App</title>
</head>
<body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
</body>
</html>

Create React App

Open public/index.html and add the script inside <head>:

<script src="https://cdn.kukie.io/s/YOUR-SITE-KEY/c.js" async></script>

No npm package needed: The Kukie.io banner script is framework-agnostic. It runs independently of React's virtual DOM and does not interfere with your component tree. You do not need to install anything via npm.

If you need to conditionally load scripts based on consent, you can listen for Kukie.io's consent events:

// In any component or useEffect
window.addEventListener('kukie:consent', (event) => {
    const consent = event.detail;
    if (consent.categories.includes('analytics')) {
        // Load analytics scripts
    }
});

Step 3: Verify the Installation

Visit your website in a new browser window (or incognito/private mode). You should see the Kukie.io consent banner appear. If it does not show, check the following:

  • Open your browser's Developer Tools (F12) and look for the script in the Network tab — it should load with a 200 status
  • Check the Console tab for any JavaScript errors
  • Make sure you published/saved your changes in your React app
  • Clear any platform-level cache if applicable

For a detailed verification walkthrough, see How to Verify Your Banner Installation.

Next Steps

Need help? If you run into any issues, contact our support team and we'll help you get set up.

Previous

How to Add a Cookie Banner on an HTML Website
Next

How to Add a Cookie Banner on a Vue.js Website
Was this helpful?