Next.js, React, Astro, Vite

npm install kindnod

Next.js app router

// app/layout.tsx
import { KindnodConsent } from "kindnod/react";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <KindnodConsent />
        {children}
      </body>
    </html>
  );
}

KindnodConsent is a client component that injects the 17 KB banner script once. With no props the site is provisioned on first load from a public domain (keyless). Props: siteKey, owner (email, gets the claim link), via, config (inline overrides), src (self-hosted script).

Pages router

Same component in pages/_app.tsx.

Gating analytics and pixels

import { Gated, useConsent, allowed } from "kindnod/react";

// Declarative
<Gated category="statistics">
  <GoogleAnalytics gaId="G-XXXX" />
</Gated>

// Imperative
const consent = useConsent();
useEffect(() => { if (consent?.marketing) initPixel(); }, [consent?.marketing]);

Categories: preferences, statistics, marketing. necessary is always allowed.

Astro, Vite, plain HTML

Use the script tag; no package needed:

<script src="https://kindnod.com/kindnod.js" async></script>

Or from JavaScript:

import { loadKindnod, onConsent } from "kindnod";
loadKindnod();
onConsent((c) => { if (c.statistics) loadAnalytics(); });

Google Tag Manager

Nothing to gate by hand. Kindnod pushes Consent Mode v2 defaults before GTM loads and cookie_consent_statistics, cookie_consent_marketing, cookie_consent_preferences events on decision. See the Tag Manager guide.

Claiming the dashboard

The banner works unclaimed forever. To edit it or see the consent log, the site owner claims it: through the emailed link if owner was set, or at /claim by adding their email to the tag.