@nhsbsa/cookie-consent-component NPM

NHS BSA Cookie Component

Cookie component adapted from https://github.com/nhsuk/cookie-consent, the BSA cookie component adds an additional component that allows a user to change their cookie setting.

Usage

Any scripts that use cookies you must add type="text/plain" and data-cookieconsent="statistics" to stop the javascript from running. If the user accepts the cookies, the cookie-consent-component will enable them.

<script src="/example-cookie" type="text/plain" data-cookieconsent="statistics"></script>

Javascript

This component requires client side javascript, you should include cookie-banner.js located in the dist folder into your public folder or if using express add the path to the file to your express.static config

app.use(express.static('./node_modules/@nhsbsa/cookie-component/dist'))

You can then reference the file at the bottom of your HTML.

<script src="/cookie-banner.js" ></script>

Nunjucks

Two components are available to use and ideally should be used together, one is the cookie banner and one is cookie preferences.

If using express and nunjucks you can link to the nunjucks components with the following.

nunjucks.configure(['src/views', 'node_modules/@nhsbsa/cookie-consent-component/component'])

Cookie Banner

The cookie banner should be used to display a message to the user that the website uses cookies, it gives them 2 options to either accept analytic cookies or do not accept.

The cookie banner component accepts the following parameters.

Name	Type	Required	Description
policyUrl	string	Yes	The path where the user can view the cookie policy
linkText	string	Yes	The text to show on the link
cookieBannerHeading	string	Yes (Not required if bannerContentHTML provided)	The heading to display on the cookie banner
cookieBannerContent	string[]	Yes (Not required if bannerContentHTML provided)	An array of strings you wish to display to the user, if you want to inject a link to the cookie policy, add {{cookiePolicyHref}} to your string
okButtonText	string	Yes	The text to display on the yes button, this button typically accepts analytic cookies
notOkButtonText	string	Yes	The text to display on the no button, this button typically rejects analytic cookies
successBannerMessage	string	Yes	Message to display on the success banner, if you want to include a link in the text add {{bannerSuccessHref}} to your string
successLinkText	string	Required if displaying a link	The text to display on the link
bannerContentHTML	string	No	You can pass in HTML to the banner but you should provide your own links if required, replaces cookieBannerHeading and cookieBannerContent
cookieVersion	string	Yes	If cookie rules/regulations change and the cookie itself needs to change, bump this version up. It will then give the user the banner again to consent to the new rules.

Cookie Preferences

Cookie preferences should be displayed on a page where a user can change their preferences at any time. It renders 2 radio buttons, Yes (Accept analytic cookies) and No (Do not accept analytic cookies)

Cookie preferences accepts the follow parameters.

Name	Type	Required	Description
preferenceText	string	Yes	Text to display above the radio buttons.
fieldSetClasses	string	No	Classes to pass into the legend.
isPageHeading	string	No	Choose whether the legend will be the page heading.
radioYesText	string	Yes	Text to display for 'Yes' radio button.
radioNoText	string	Yes	Text to display for 'No' radio button.
saveCookiePreferencesButtonText	string	Yes	Text to display on radio button.
cookieConfirmationURL	string	Yes	URL to navigate the user to after they change their cookie settings, typically a confirmation page.

Cookie preferences flow

Typically three pages should be created for a cookie policy.

Cookie policy - display the cookie policy and allow a user to click a link to amend their cookie preference.
Cookie preferences - display the current user selected cookie option and allow them to change their preference (you can use the cookie preferences component)
Cookie confirmation - display to the user that they have successfully updated their cookie preference.

@nhsbsa/cookie-consent-component nhsuk-frontend nunjucks

@nhsbsa/cookie-consent-component

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago