Skip to content
astro-cookie-consent
Documentation

Installation & Quick Start

import { Steps } from ‘@astrojs/starlight/components’;

Install

Section titled “Install”
Terminal window
npm install astro-cookie-consent

The only peer requirement is Astro >=4.0.0.

Quick start

Section titled “Quick start”

  1. Render <ConsentBanner /> once, globally, from your layout:

    src/layouts/Layout.astro
    ---
    import ConsentBanner from 'astro-cookie-consent/ConsentBanner.astro';
    ---
    

    <html>
      <body>
        <slot />
        <ConsentBanner privacyHref="/privacy" />
      </body>
    </html>

  2. Gate any third-party script behind that consent:

    <script>
      import { gateScript } from 'astro-cookie-consent';
    

      gateScript({ src: 'https://example-widget.com/embed.js' });
    </script>

    gateScript never injects the script until the visitor accepts, and never injects it twice.

  3. That’s it. No CSS to write, no config file — the banner is a self-contained bottom-left card that already follows the visitor’s light/dark preference.

Next steps

Section titled “Next steps”