How to Add a Free Cookie Consent Banner to Any Website in 5 Minutes

Most guides about adding a cookie banner assume you are using WordPress with a plugin, or that you have already signed up for an expensive SaaS platform. This one does not. Here is how to add a free, fully compliant cookie consent banner to any website — static HTML, Next.js, Vue, whatever — in five minutes flat.

What You'll Need

Just two things: a text editor and access to your website's HTML. No npm account, no build pipeline, no dashboard login. If you prefer a package manager, there is an npm option too — we'll cover that at the end.

Step 1 — Add the Script Tag

Open your HTML file and paste the following snippet just before the closing </body> tag:

<!-- Paste before </body> -->
<script src="https://cdn.jsdelivr.net/npm/@zerakicreative/cookie-consent/dist/zeraki-cookie-consent.iife.js"></script>

This loads the Zeraki Cookie Consent library from jsDelivr's global CDN. It is fast, cached worldwide, and served over HTTPS. The file is around 30 KB minified and gzipped.

Step 2 — Initialise with Your Options

Immediately after the script tag above, add a second script block to initialise the banner with your configuration:

<script>
  ZerakiCookieBanner.init({
    companyName:      'Your Company Name',
    primaryColor:     '#2563EB',
    privacyPolicyUrl: 'https://yoursite.com/privacy',
    cookiePolicyUrl:  'https://yoursite.com/cookies',
    position:         'bottom-bar',
  });
</script>

The companyName, primaryColor, and privacyPolicyUrl options are the most important ones to set. The rest have sensible defaults.

Step 3 — Customise Your Brand Colour

Change the primaryColor value to match your brand. Zeraki accepts any valid CSS colour — hex, RGB, or HSL all work:

primaryColor: '#e11d48'  // hex
primaryColor: 'rgb(225, 29, 72)'  // rgb
primaryColor: 'hsl(346, 77%, 50%)'  // hsl

The banner buttons, toggle switches, floating cookie icon, and preference modal all update automatically. One colour change, consistent everywhere.

Step 4 — Link Your Privacy Policy

Under GDPR and most other privacy laws, your cookie banner must link to your Privacy Policy and, ideally, a separate Cookie Policy. Set both URLs in the config:

privacyPolicyUrl: 'https://yoursite.com/privacy',
cookiePolicyUrl:  'https://yoursite.com/cookies',

If you only have one policy page, you can point both URLs to the same destination. The links appear in the banner text and in the preferences modal.

That's It — What You Get

After these four steps, your visitors will see a beautifully animated cookie consent banner. Here is exactly what the banner provides:

• The main banner — appears at the bottom (or top) of the screen on the first visit. Shows Accept All, Reject All, and Preferences buttons.
• The preferences modal — lets users toggle Analytics, Marketing, and Preferences cookies individually with clear explanations.
• The floating cookie button — after consent is given, a small cookie icon sits in the corner so users can always revisit their choices.
• Google Analytics Consent Mode v2 — if you pass a googleAnalytics config, consent signals are sent to GA4 automatically.
• Consent persistence — choices are saved in localStorage and a first-party cookie. The banner won't reappear on every page visit.

Using React, Vue or Svelte?

If you're using a modern JS framework, install the npm package instead of the CDN script:

npm install @zerakicreative/cookie-consent

import { CookieBanner } from '@zerakicreative/cookie-consent';

new CookieBanner({
  companyName:      'Your Company',
  primaryColor:     '#2563EB',
  privacyPolicyUrl: 'https://yoursite.com/privacy',
}).init();

Call init() inside a client-side lifecycle hook — useEffect in React, onMounted in Vue, or onMount in Svelte — to ensure it runs in the browser.

That is everything. A free, fully compliant, beautifully animated cookie banner on any website — in five minutes.