Skip to main content

Cookie Banner

Cookie banner allows users to accept or reject cookies which are not essential to making your service work.

Overview

GitHub Workflow Status

pie-cookie-banner is a Web Component built using Lit.

This component can be easily integrated into various frontend frameworks and customised through a set of properties.

Cookies

pie-cookie-banner purely handles the UI and user interactions for cookie consent. It does not handle the setting or management of cookies or the storage of user preferences. It is the responsibility of the consuming application to handle these aspects. See Events for more information.

Installation

To install pie-cookie-banner in your application, run the following on your command line:

npm i @justeattakeaway/pie-cookie-banner

yarn add @justeattakeaway/pie-cookie-banner

Props

PropOptionsDescriptionDefault
hasPrimaryActionsOnlytrue
false
When true, sets the variant to "primary" for the button which accepts necessary cookies only.false
localeAny locale from this listAssigns the localisation data for the component strings.English language locale
cookieStatementLinkThe URL of the cookie statement page the banner should link to.""
cookieTechnologiesLinkThe URL for the cookie technology link.""
defaultPreferencesall
necessary
functional
analytical
personalized
Allows default preferences to be passed in by the consumer, for example "{ 'functional': true, 'personalized': true, 'analytical': true }"{}

Events

The PIE cookie banner does not directly manage cookies within the application or component. Instead, it has several events that application developers (consumers of this component) can listen for, letting applications manage their own cookies. The table below provides a list of events you can listen for:

EventTypeDescription
pie-cookie-banner-accept-allCustomEventTriggered when the user chooses to accept all cookies.
pie-cookie-banner-necessary-onlyCustomEventTriggered when the user chooses to accept necessary cookies only.
pie-cookie-banner-manage-prefsCustomEventTriggered when the user chooses to manage their cookie preferences.
pie-cookie-banner-prefs-savedCustomEventTriggered when the user saves their cookie preferences.

Localisation

By default, the component displays its content in English. To display the content in another language, you need to import the locale data for that language and pass it in the locale prop. For example, to display the content in Dutch, you need to import the Dutch locale data:

import locale from '@justeattakeaway/pie-cookie-banner/locales/nl-nl.json';

<!-- JSX -->
<PieCookieBanner locale={locale}></PieCookieBanner>

It's possible to import all locales at once, if necessary:

import allLocales from '@justeattakeaway/pie-cookie-banner/locales';

Examples

For HTML:

// import as module into a js file e.g. main.js
import '@justeattakeaway/pie-cookie-banner';

<!-- pass js file into <script> tag -->
<pie-cookie-banner></pie-cookie-banner>
<script type="module" src="/main.js"></script>

For Native JS Applications, Vue, Angular, Svelte etc.:

// Default – for Native JS Applications, Vue, Angular, Svelte, etc.
import '@justeattakeaway/pie-cookie-banner';

// Or, if you need to use the component class
import { PieCookieBanner } from '@justeattakeaway/pie-cookie-banner';

Use of locales in Vue:

// Vue templates (using Nuxt 3)
<script setup lang="ts">
  import '@justeattakeaway/pie-cookie-banner';
  import enGB from "@justeattakeaway/pie-cookie-banner/locales/en-gb.json";
</script>

<pie-cookie-banner
  hasPrimaryActionsOnly
  :locale='enGB'
  cookieTechnologiesLink='https://justeattakeaway.com';
  cookieStatementLink='https://justeattakeaway.com'>
</pie-cookie-banner>;

Default preferences can be configured and passed to the component:

// React templates (using Next 13)
import { PieCookieBanner } from "@justeattakeaway/pie-cookie-banner/dist/react";
import locales from "@justeattakeaway/pie-cookie-banner/locales";

const defaultPreferences= {functional: true, personalized: true, analytical: true}

<PieCookieBanner
    locale={locales.enGB}
    defaultPreferences={defaultPreferences}
/>

Changelog