Svelte Cookie Banner

A production-ready GDPR compliant banner that allows developers to customize selections.

Features

• Small, discrete, and non-intrusive;
• GDPR Compliant;
• Support for predefined choices (necessary, marketing, etc.)
• Responsive;
• Runs any function on opting-in or opting-out (even on each visit)
• Svelte Ready
• Fully customizable

Installation

Via npm

npm install -D svelte-cookie-banner
Copy

Via CDN

<script
   type="module"
   src="https://unpkg.com/svelte-cookie-banner@latest/dist/cookie-banner.js"
></script>
Copy

Usage

Check out the documentation for a list of the available props.

Svelte / SvelteKit

<script>
   import { CookieBanner } from 'svelte-cookie-banner';
</script>

<CookieBanner heading="foo" description="bar" />
Copy

HTML / Web Components

<cookie-banner heading="foo" description="bar"></cookie-banner>
Copy

Fingerprinting

Accepting analytics or tracking cookies will create a unique UUID to allow you to differentiate events from different users when using server-side cookies in a system such as CAPI.

To enable fingerprinting you must have a configuration like this or use the default one (which is already GDPR compliant):

<CookieBanner
   choices={{
      tracking: {
         label: 'Tracking cookies',
         description: 'Used for advertising purposes.',
         value: true,
      },
      analytics: {
         label: 'Analytics cookies',
         description: 'Used to control Analytics.',
         value: true,
      },
   }}
   fingerprinting={true}
/>
Copy