Remix

Remix is a full-stack React framework with server rendering and client-side navigation. CookieChimp installs in your root document and re-evaluates on each client transition.

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 app/root.tsx inside <head> — before Remix’s <Links />, <Meta />, and <Scripts /> components so it runs first:

// app/root.tsx
import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "@remix-run/react";

export default function App() {
  return (
    <html lang="en">
      <head>
        <script
          src="https://cookiechimp.com/widget/YOUR_ACCOUNT_ID.js"
          suppressHydrationWarning
        />
        <Meta />
        <Links />
      </head>
      <body>
        <div id="cookiechimp-container" />
        <Outlet />
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

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

The suppressHydrationWarning prop prevents React from warning about the third-party script mutating <head> after server render.

Remix uses client-side transitions for in-app links. Re-inject the CookieChimp script on every navigation by listening to the location. The static <script> tag from server-rendered HTML handles the first load, so we skip the initial render.

// app/components/CookieChimpReinit.tsx
import { useEffect, useRef } from "react";
import { useLocation } from "@remix-run/react";

export default function CookieChimpReinit() {
  const location = useLocation();
  const isFirstRender = useRef(true);

  useEffect(() => {
    if (isFirstRender.current) {
      isFirstRender.current = false;
      return;
    }

    // Re-inject the CookieChimp script so it rescans the new route's DOM.
    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);
  }, [location.pathname]);

  return null;
}

Add it to your root layout:

// app/root.tsx
<body>
  <div id="cookiechimp-container" />
  <CookieChimpReinit />
  <Outlet />
  {/* ... */}
</body>

Listen for the cc:onConsented and cc:onUpdate events inside a client-only effect:

// app/components/ConsentLogger.tsx
import { useEffect } from "react";

export default function ConsentLogger() {
  useEffect(() => {
    function logConsent() {
      // @ts-ignore
      const allowed = window.CookieConsent?.acceptedService?.("Google Analytics", "analytics");
      console.log(allowed ? "✅ analytics allowed" : "❌ analytics blocked");
    }

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

    return () => {
      window.removeEventListener("cc:onConsented", logConsent);
      window.removeEventListener("cc:onUpdate", logConsent);
    };
  }, []);

  return null;
}

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

For all available events, see Callbacks & Events.

Troubleshooting

Hydration warnings — make sure the CookieChimp script tag uses suppressHydrationWarning.
Banner shows on first load but not after navigation — verify CookieChimpReinit is mounted inside the <body> of root.tsx.

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