SvelteKit

SvelteKit uses client-side navigation by default. CookieChimp installs in app.html and reinitializes on every navigation via the afterNavigate lifecycle hook.

Before you start: have your CookieChimp Account ID ready (replace YOUR_ACCOUNT_ID in the snippets below). If you're testing on localhost, add localhost to Additional Domains in your Account Settings — otherwise the banner won't show locally.

How do I load the CookieChimp script?

Add the script tag to src/app.html inside <head>, before %sveltekit.head% and any other tags so it loads first:

<!-- src/app.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <script src="https://cookiechimp.com/widget/YOUR_ACCOUNT_ID.js"></script>
    %sveltekit.head%
  </head>
  <body data-sveltekit-preload-data="hover">
    <div style="display: contents">%sveltekit.body%</div>
  </body>
</html>

Replace YOUR_ACCOUNT_ID with your actual CookieChimp Account ID from your dashboard.

SvelteKit transitions between pages without a full reload. Use afterNavigate in your root layout to re-inject the CookieChimp script on every navigation — this triggers a rescan of the newly mounted route’s DOM. The static <script> tag in app.html handles the first page load, so we skip the initial afterNavigate call.

<!-- src/routes/+layout.svelte -->
<script lang="ts">
  import { afterNavigate } from "$app/navigation";
  import { browser } from "$app/environment";

  let isInitial = true;

  afterNavigate(() => {
    if (!browser) return;
    if (isInitial) {
      isInitial = false;
      return;
    }

    document.getElementById("cookiechimp-js")?.remove();

    const script = document.createElement("script");
    script.src = "https://cookiechimp.com/widget/YOUR_ACCOUNT_ID.js";
    script.id = "cookiechimp-js";
    document.head.appendChild(script);
  });
</script>

<div id="cookiechimp-container"></div>

<slot />

The browser check guards against SSR — document and window don’t exist on the server, so any DOM access must be wrapped.

Wrap the CookieChimp events in a Svelte store so any component can subscribe:

// src/lib/stores/consent.ts
import { writable } from "svelte/store";
import { browser } from "$app/environment";

export const consent = writable<Record<string, boolean>>({});

if (browser) {
  function update() {
    consent.set({
      // @ts-ignore
      analytics: !!window.CookieConsent?.acceptedService?.("Google Analytics", "analytics"),
    });
  }

  update();
  window.addEventListener("cc:onConsented", update);
  window.addEventListener("cc:onUpdate", update);
}

Use it in a component:

<script lang="ts">
  import { consent } from "$lib/stores/consent";
</script>

{#if $consent.analytics}
  <p>Analytics is enabled.</p>
{/if}

Replace "Google Analytics" and "analytics" with the exact service and category names you configured in CookieChimp.

For all available events, see Callbacks & Events.

Troubleshooting

Banner shows on first load but not after navigation — make sure afterNavigate is called from your root +layout.svelte, not from a nested layout.
window is not defined / document is not defined errors — wrap any DOM or window access in a browser check from $app/environment.

Banner doesn't appear at all — confirm localhost (or your domain) is in Additional Domains in Account Settings.
Enable Debug mode in the CookieChimp dashboard and check the browser console for logs.

Get Started

Platform Specific Installation

Features

Integrations

Advanced

How do I load the CookieChimp script?

How do I handle client-side navigation?

Troubleshooting

​How do I load the CookieChimp script?

​How do I handle client-side navigation?

​How do I check consent status in code?

​Troubleshooting

How do I load the CookieChimp script?

How do I handle client-side navigation?

How do I check consent status in code?

Troubleshooting