pie-cookie-banner
is a Web Component built using the Lit library.
This component can be easily integrated into various frontend frameworks and customized through a set of properties.
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.
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
For full information on using PIE components as part of an application, check out the Getting Started Guide.
This is not the recommended way to use the component. However, it may be appropriate for some consumers if they are unable to install the package into their application.
Example (without typography) can be seen in this Codepen
To check for the most up-to-date versions of our cookie banner and css, check their npm pages here and here. It is important to stay up to date. These will be the versions you use in the CDN links.
- Please add the
pie-css
stylesheet to your application. This can be imported from our CDN like so:
<link rel="stylesheet" href="https://pie-design-system-cdn.production.jet-external.com/pie-css/v0.16.0/index.css">
- Now you can add the Cookie Banner script to your application. This can also be imported from our CDN like so:
<script src="https://pie-design-system-cdn.production.jet-external.com/pie-cookie-banner/v1.4.0/index.js"></script>
We would recommend placing this script somewhere in the bottom of your HTML body tag. However what works for each application will be different. Please consider how this could affect the loading of your page.
Visit Cookie Banner | PIE Design System to view more information on this component.
Please head to FAQs | PIE Design System to see our FAQs and get in touch.
Check out our contributing guide for more information on local development and how to run specific component tests.