Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.cookiechimp.com/docs/llms.txt

Use this file to discover all available pages before exploring further.

Astro builds static-by-default sites, but the install pattern depends on whether you’re using View Transitions. With View Transitions enabled, Astro behaves like a single-page app and the script needs to be reinitialized on each navigation. Without them, a standard script tag is enough.
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 install CookieChimp in a standard Astro site?

If you’re not using <ClientRouter /> (formerly <ViewTransitions />), every navigation is a full page load — a single script tag in your root layout works: 
---
// src/layouts/Layout.astro
---
<html lang="en">
  <head>
    <script is:inline src="https://cookiechimp.com/widget/YOUR_ACCOUNT_ID.js"></script>
    <slot name="head" />
  </head>
  <body>
    <slot />
  </body>
</html>
Replace YOUR_ACCOUNT_ID with your actual CookieChimp Account ID from your dashboard.
The is:inline directive tells Astro not to bundle, hash, or process the script — it ships exactly as written so it runs as the first thing in <head>.

​
How do I install CookieChimp with View Transitions?

If your site uses Astro’s <ClientRouter /> (Astro 5+) or <ViewTransitions /> (Astro 3-4), navigation happens client-side without a full reload. Re-inject the CookieChimp script after every transition so it rescans the newly rendered page. astro:page-load fires on the first page load as well, so this single handler covers both cases — no separate static script tag needed. 
---
// src/layouts/Layout.astro
import { ClientRouter } from "astro:transitions";
---
<html lang="en">
  <head>
    <ClientRouter />
    <script is:inline>
      function runCookieChimp() {
        // Remove any previous CookieChimp script before appending a fresh one
        // so we don't accumulate stale tags across navigations.
        document.getElementById("cookiechimp-js")?.remove();

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

      // Fires on the first page load AND after every view transition.
      document.addEventListener("astro:page-load", runCookieChimp);
    </script>
  </head>
  <body>
    <slot />
  </body>
</html>

​
How do I position the Privacy Trigger?

Add a <div id="cookiechimp-container"> somewhere in your layout, and mark it with transition:persist so View Transitions don’t tear it down between routes: 
<!-- src/layouts/Layout.astro -->
<body>
  <div id="cookiechimp-container" transition:persist></div>
  <slot />
</body>
See the Astro docs on maintaining state with transition:persist for more.
Inline Astro scripts run on every page (or just once with View Transitions). Listen for CookieChimp events: 
<script is:inline>
  window.addEventListener("cc:onConsented", function () {
    if (window.CookieChimp.acceptedService("Google Analytics", "analytics")) {
      // load your analytics SDK
    }
  });

  window.addEventListener("cc:onUpdate", function (event) {
    if (event.detail.changedCategories.includes("analytics")) {
      // user toggled analytics on or off
    }
  });
</script>
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 disappears after navigation — you’re using View Transitions but the astro:page-load listener isn’t wired up. Use the View Transitions install pattern above.
  • Privacy Trigger flashes or disappears between pages — add transition:persist to your #cookiechimp-container div.
  • Script doesn’t run first — make sure you used is:inline on the script tag so Astro doesn’t defer it.
  • 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.