How to add a cookie banner on an Angular website

Last updated 30 September 2026

This guide shows you how to add the Kukie.io cookie consent banner to your Angular application. The banner works outside Angular's change detection system, so no Angular-specific package is 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 Angular

Open src/index.html and add the Kukie.io script inside the <head> tag:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script src="https://cdn.kukie.io/s/YOUR-SITE-KEY/c.js" async></script>
    <title>My Angular App</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <app-root></app-root>
</body>
</html>

That's it. The banner loads independently of Angular's change detection and zone.js - no Angular module or service needed.

If you need to check consent state in your Angular components, create a simple service:

// consent.service.ts
import { Injectable, NgZone } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class ConsentService {
    consent$ = new BehaviorSubject<any>(null);

    constructor(private zone: NgZone) {
        window.addEventListener('kukie:consent', (event: any) => {
            this.zone.run(() => this.consent$.next(event.detail));
        });
    }
}

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 Angular app
Clear any platform-level cache if applicable

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