0.0.6 • Published 2 years ago

@nhsbsa/cookie-consent-component v0.0.6

Weekly downloads
-
License
Apache-2.0
Repository
gitlab
Last release
2 years ago

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.

NameTypeRequiredDescription
policyUrlstringYesThe path where the user can view the cookie policy
linkTextstringYesThe text to show on the link
cookieBannerHeadingstringYes (Not required if bannerContentHTML provided)The heading to display on the cookie banner
cookieBannerContentstring[]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
okButtonTextstringYesThe text to display on the yes button, this button typically accepts analytic cookies
notOkButtonTextstringYesThe text to display on the no button, this button typically rejects analytic cookies
successBannerMessagestringYesMessage to display on the success banner, if you want to include a link in the text add {{bannerSuccessHref}} to your string
successLinkTextstringRequired if displaying a linkThe text to display on the link
bannerContentHTMLstringNoYou can pass in HTML to the banner but you should provide your own links if required, replaces cookieBannerHeading and cookieBannerContent
cookieVersionstringYesIf 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.

NameTypeRequiredDescription
preferenceTextstringYesText to display above the radio buttons.
fieldSetClassesstringNoClasses to pass into the legend.
isPageHeadingstringNoChoose whether the legend will be the page heading.
radioYesTextstringYesText to display for 'Yes' radio button.
radioNoTextstringYesText to display for 'No' radio button.
saveCookiePreferencesButtonTextstringYesText to display on radio button.
cookieConfirmationURLstringYesURL 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.
0.0.6-beta.4

2 years ago

0.0.6-beta.3

2 years ago

0.0.6-beta.2

2 years ago

0.0.6-beta.1

2 years ago

0.0.6-beta.0

2 years ago

0.0.6

2 years ago

0.0.5

2 years ago

0.0.4

2 years ago

0.0.3

2 years ago

0.0.2

2 years ago

0.0.1

2 years ago