Cookie Banner

Overview

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

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:

Localisation

By default, the component displays its content in English en. To display the content in another language, you need to supply a language and country pairing to the language and country props(*).

Currently the following locale languages are supported:

bg (BULGARIAN)
ca (CATALAN)
da (DANISH)
de (GERMAN)
en (ENGLISH)
es (SPANISH)
he (HEBREW)
it (ITALIAN)
nl (DUTCH)
pl (POLISH)
sk (SLOVAK)

And the following bespoke locales are supported (sometimes added to accommodate specific legal wording for a particular country):

en-fr (ENGLISH-FRANCE)
fr-fr (FRENCH-FRANCE)

(*) This is the logic order for loading the locale;

1. We attempt to load the bespoke locale for a given language/country combination, e.g. fr-fr.
2. We would attempt to use the locale file based on the language supplied, e.g. if you supplied language de & country ch we would use the locale file de, if you supplied language fr & country ca then we would use the locale file fr, etc.
3. If you supply an unsupported language in the language/country combination then we would attempt to use the default locale file based on the country supplied, e.g. if you supplied language pt & country es we would use the locale file es, if you supplied language ru & country fr then we would use the locale file fr, etc.
4. If both the language and country are unsupported then we would use the default of en.

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';
</script>

<pie-cookie-banner
  hasPrimaryActionsOnly
  :language='en'
  :country='gb'
  cookieTechnologiesLink='https://justeattakeaway.com';
  cookieStatementLink='https://justeattakeaway.com'>
</pie-cookie-banner>;

Default preferences can be configured and passed to the component:

// React templates
import { PieCookieBanner } from "@justeattakeaway/pie-cookie-banner/dist/react";

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

<PieCookieBanner
    language='en'
    country='gb'
    defaultPreferences={defaultPreferences}
/>

Changelog