Cookie banner

Patient facing apps require a cookie consent banner.

Essential cookies are always on and are not presented as rejectable. Analytics cookies (e.g. PostHog page-view tracking) are optional, so the banner offers the patient a choice: accept or reject analytics cookies, with reject as easy to action as accept.

The banner records the patient's actual decision — not merely that the notice was seen — and does not reappear until the consent version changes.

The consent cookie

The decision is stored in a single cookie readable by every DrDoctor patient app on the shared domain, so one decision is respected everywhere:

name

pp-cookie-consent

value

JSON { "version": 2, "analytics": true|false, "decidedOn": "<ISO timestamp>" } — analytics is the patient's decision; decidedOn is when it was made.

scope

Root domain drdoctor.co.uk (localhost locally), path=/, 1-year max-age, secure.

Apps gating analytics on this cookie should enable analytics only when the parsed value has version === 2 && analytics === true; a missing or unparseable cookie means no analytics.

The script compares the stored version against the version it was built with and re-shows the banner on any mismatch. Bumping the consent version therefore re-prompts every patient for a fresh choice once an app points at the new script path.

Accessibility

The banner is a role="region" landmark labelled "Cookie consent". Both choice buttons take their accessible names from their visible text ("Accept analytics cookies" / "Reject analytics cookies") and share the same styling so neither is more prominent. The banner must be reachable and operable by keyboard, must not trap focus, and must not permanently obscure page content behind it (the page gains bottom margin so content can scroll into view). The patient's choice must persist so the banner does not reappear on every page.

Try it

Add it to your app

Simply insert the following into your head tag (or at the bottom of the HTML before the closing body element):

              
<script async type="module" src="https://assets.drdoctor.co.uk/cookie/2/consent.js"></script>
<script async nomodule src="https://assets.drdoctor.co.uk/cookie/2/consent-es5.js"></script>
              
            

Note: async means it is safe to put this script into your HTML's head without blocking the page loading.

module/nomodule pattern is used to serve more optimal newer JavaScript to modern browsers (the vast majority of them) and falling back to ES5 for older browsers that don't support ES6+ or module attribute (typically IE11)

Customise it (optional)

⛔ First, consider if you need to customise it; the cookie banner should be in line with the patient portal design system

If you do, the parent element class, cookie-consent-banner, can be used as a hook for your CSS customisation.