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
countryAny supported country, that is paired with the language (see these supported locales)Used (with the language property) to load the localisation data for the component strings. If not provided or unsupported, the default language-country of en-gb will be used. Note this value is case-insensitive"gb"
languageAny supported language, that is paired with the country (see these supported locales)Used (with the country property) to load the localisation data for the component strings. If not provided or unsupported, the default language of the country will be used. Note this value is case-insensitive"en"
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 GB English. To display the content in another language, you need to supply a supported language and country pairing to the language and country props. You can see the currently supported locale pairings here:

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';
</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 (using Next 13)
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