Cookie Banner Content (User‐Facing)

XchangeOn uses cookies

We and our partners use cookies (including essential, functional, analytical, and tracking) to enhance your experience, analyze site usage, and show you relevant content. By clicking “Accept All,” you consent to our use of all cookies. You may also click “Manage Preferences” to select which categories of cookies you want to allow.

(Accept All) (Manage Preferences) (Reject Non-Essential)

Below the banner (or in a modal launched by “Manage Preferences”), link to the full Cookies Policy:

  • “Learn More” → opens Cookies Policy page/overlay.

Implementation Guidelines for the Development Team

1. Placement and Timing

  • Show the banner at the bottom (or top) of the viewport on a user’s first visit.
  • Delay display until the page’s HTML and primary CSS have loaded (to avoid flash of unstyled content).
  • Do not allow any non-essential cookies or trackers to fire before the user makes a selection.

2. Cookie Categories and Prefetch Settings

  • Essential: Always enabled — required for site functionality (login sessions, security).
  • Functional: Disabled by default. If enabled, allow cookies that remember language/region and UI preferences.
  • Analytical: Disabled by default. If enabled, allow Google Analytics (or equivalent) after consent.
  • Tracking/Targeting: Disabled by default. If enabled, load third-party ad/marketing scripts post-consent.

3. Banner Behaviour

  • Accept All
    • Close banner.
    • Set a persistent cookie (e.g. xch_cookie_consent=all; max-age=31536000; path=/ ).
    • Immediately load all non-essential scripts (analytics, marketing pixels).
  • Reject Non-Essential
    • Close banner.
    • Set a persistent cookie (e.g. xch_cookie_consent=essential; max-age=31536000; path=/ ).
    • Ensure no functional/analytical/tracking scripts run.
  • Manage Preferences
    • Open a modal or overlay listing four toggles (Essential, Functional, Analytical, Tracking).
    • Essential toggle is locked “On.” The other three start “Off.”
    • User toggles on/off Functional, Analytical, and Tracking.
    • “Save Preferences” button:
      • Store selection in a cookie (e.g. xch_cookie_consent="functional":true,"analytical":false,"tracking":true; max-age=31536000; path=/ ).
      • Close banner and load only the scripts corresponding to allowed categories.

4. Storage Mechanism

  • Use a single cookie named xch_cookie_consent.
  • When “Accept All”: set value "all".
  • When “Reject Non-Essential”: set value "essential".

When “Manage Preferences”: set a JSON string, e.g.:

"functional":true,"analytical":false,"tracking":true

  • Parse this cookie on each page load to determine which scripts to inject.

5. SCRIPT INJECTION

Wrap all non-essential third-party scripts (e.g. Google Analytics, marketing pixels) in conditionals that check xch_cookie_consent

  • Essential scripts (e.g. session management, CSRF tokens) load unconditionally.

6. Accessibility & Styling

  • Ensure banner and modal comply with WCAG AA:
    • Contrast ratio ≄ 4.5:1 for text vs. background.
    • Keyboard-focusable buttons/controls.
    • ARIA labels for toggle switches.
  • Banner height should not exceed 15% of viewport height on initial load.
  • Use a neutral background (e.g., #F5F5F5) and dark text (e.g., #222222).
  • Buttons:
    • “Accept All” in primary color (#0055FF) with white text.
    • “Reject Non-Essential” in outline style: border #888888, text #888888.
    • “Manage Preferences” as secondary (#EEEEEE background, #222222 text).

7. Persistence & Expiration

  • Set max-age (or expires) to one year (31536000 seconds).
  • Banner should not reappear on subsequent visits if a valid xch_cookie_consent exists and is parseable.
  • If the cookie is malformed or absent, re-display the banner.

8. Cookie Preference Modal

  • Four sections, each with a toggle switch:
    • Essential (Locked On): tooltip: “Required for site functionality.”
    • Functional: tooltip: “Remember your settings and preferences.”
    • Analytical: tooltip: “Help us understand site usage to improve XchangeOn.”
    • Tracking: tooltip: “Enable personalized ads and offers.”
  • “Save Preferences” and “Cancel” buttons:
    • Save Preferences: writes consent cookie and loads permitted scripts.
    • Cancel: closes modal without changing existing cookie.

9. Edge Cases

  • If JavaScript is disabled, show a plain banner with:
    • Message: “We use cookies. By continuing, you agree to our Cookies Policy.”
    • Include a link to the Cookies Policy.
    • Provide instructions to enable JavaScript or accept cookies manually.
  • In private/incognito mode, treat as no consent and display banners each session.
  • If the user clears cookies mid-session, re-display the banner on next navigation or reload.

10. Testing

  • Verify that no non-essential scripts load before user action.
  • Test four scenarios:
    • “Accept All”
    • “Reject Non-Essential”
    • “Manage Preferences” (allowing different combinations)
    • “No Interaction” (banner remains until user choice)
  • Confirm cookie values in dev tools match expected JSON or strings.
  • Ensure the banner hides once a valid consent cookie is set.