@nhsbsa/cookie-consent-component v0.0.6
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.
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago