Skip to main content

Your privacy settings

We use cookies to help you with journey planning and relevant disruptions, remember your login and show you content you might be interested in. If you’re happy with the use of cookies by West Midlands Combined Authority and our selected partners, click ‘Accept all cookies’. Or click ‘Manage cookies’ to learn more.

Manage Cookies
Beta

This is a new service - your feedback will help us to improve it.

Patterns

Cookies

About

What does it do?

  • Allows users to accept or amend our website's cookie settings.
  • Our cookie preferences should be confirmed before a user can use our website.
  • The Manage cookies pattern allows users to change their cookie preferences.

Cookie banner

When to use it?

  • When a user first visits the Transport for West Midlands website and has not accepted or amended the cookie preferences.
  • The banner should be above the header on every page and only disappear when a user has accepted or amended their cookie preferences.

When not to use it?

  • When a user has accepted or amended the website's cookies.
  • When a returning user visits the Transport for West Midlands website and has already accepted or amended their cookies in a previous session.

How it works

  • When a user has accepted or amended the website's cookies.
  • When a returning user visits the Transport for West Midlands website and has already accepted or amended their cookies in a previous session.

The Cookies banner should be placed above the main header and be on every page


Your privacy settings

We use cookies to help you with journey planning and relevant disruptions, remember your login and show you content you might be interested in. If you’re happy with the use of cookies by West Midlands Combined Authority and our selected partners, click ‘Accept all cookies’. Or click ‘Manage cookies’ to learn more.

Manage Cookies

HTML markup
<div class="bg-white wmnds-p-t-md wmnds-p-b-md wmnds-cookies-banner">
  <div class="wmnds-container">
    <div class="wmnds-col-1 wmnds-col-md-3-4 wmnds-col-lg-2-3">
      <h3>Your privacy settings</h3>
      <p>
        We use cookies to help you with journey planning and relevant disruptions, remember your login and show you
        content you might be interested in. If you’re happy with the use of cookies by West Midlands Combined Authority
        and our selected partners, click ‘Accept all cookies’. Or click ‘Manage cookies’ to learn more.
      </p>
      <div class="wmnds-grid wmnds-grid--justify-between wmnds-cookies-banner__group-buttons">
        <button class="wmnds-btn wmnds-col-1 wmnds-col-sm-1 wmnds-col-md-12-24  wmnds-cookies-banner__accept-all-cookies" type="button">
          Accept all cookies
        </button>
        <a href="/patterns/cookies/#cookies_manager" title="link title" target="_self" class="wmnds-btn wmnds-btn wmnds-col-1 wmnds-col-sm-1 wmnds-col-md-12-24">
          Manage Cookies
        </a>
      </div>
    </div>
  </div>
</div>

Recommended javascript (browser compatible)
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var cookies = function cookies() {
  var cookiesBanner = document.querySelector('header .wmnds-cookies-banner');

  var hideCookieBanner = function hideCookieBanner() {
    cookiesBanner.style.display = 'none';
  };

  var showCookieBanner = function showCookieBanner() {
    var codeExample = document.querySelector('.wmnds-website-code-example .wmnds-cookies-banner');
    cookiesBanner.style.display = 'block';
    if (codeExample) codeExample.style.display = 'block'; // Ensure the cookie banner in the component example stays visible even if the user has already accepted cookies
  }; // Set cookie based on name, value and expiry date supplied


  var setCookie = function setCookie(cname, cvalue, exdays) {
    var cookieDomain = 'tfwm.org.uk';
    var d = new Date();
    d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
    var expires = "expires=".concat(d.toUTCString());
    var domain = "domain=.".concat(cookieDomain);
    document.cookie = "".concat(cname, "=").concat(cvalue, ";").concat(expires, ";").concat(domain, ";path=/");
  }; // Get cookie based on name supplied


  var getCookie = function getCookie(cname) {
    var name = "".concat(cname, "=");
    var ca = document.cookie.split(';');

    for (var i = 0; i < ca.length; i += 1) {
      var c = ca[i];

      while (c.charAt(0) === ' ') {
        c = c.substring(1);
      }

      if (c.indexOf(name) === 0) {
        return c.substring(name.length, c.length);
      }
    }

    return '';
  }; // Check if cookie(s) created or not


  var checkCookie = function checkCookie(cname) {
    var isCookieCreated = getCookie(cname);

    if (isCookieCreated === '') {
      return false;
    }

    return true;
  };

  var getCookiePolicy = function getCookiePolicy() {
    return JSON.parse(getCookie('cookies-policy'));
  };

  var updateCookiePreferences = function updateCookiePreferences() {
    if (document.querySelector('.wmnds-cookies-manager__preferences')) {
      hideCookieBanner();
      var cookiesOptions = document.querySelector('.wmnds-cookies-manager__preferences').querySelectorAll('.wmnds-fe-checkboxes__input');
      var currentOptions = [getCookiePolicy().essential, getCookiePolicy().functional, getCookiePolicy().performance];

      for (var i = 0; i < cookiesOptions.length; i += 1) {
        cookiesOptions[i].checked = currentOptions[i];
      }
    }
  };

  var setCookiePolicy = function setCookiePolicy(essentialValue, functionalValue, performanceValue) {
    var cookieValue = {
      essential: essentialValue,
      functional: functionalValue,
      performance: performanceValue
    };
    setCookie('cookies-policy', JSON.stringify(cookieValue), 181);
    updateCookiePreferences();
  };

  var acceptAllCookies = function acceptAllCookies() {
    setCookiePolicy(true, true, true);
    setCookie('cookies-preference', true, 181);
    hideCookieBanner();
  };

  var savePreferences = function savePreferences() {
    if (document.querySelector('.wmnds-cookies-manager__form')) {
      var elements = document.querySelector('.wmnds-cookies-manager__form').querySelectorAll('.wmnds-fe-checkboxes__input');
      var selectedOptions = [];

      for (var i = 0; i < elements.length; i += 1) {
        selectedOptions[i] = elements.item(i).checked;
      }

      setCookiePolicy.apply(void 0, selectedOptions);
      setCookie('cookies-preference', true, 181);
    }
  };

  var cookiesScan = function cookiesScan() {
    // if cookies-preference doesn't exist, show cookie banner
    if (!checkCookie('cookies-preference')) {
      showCookieBanner();
      setCookiePolicy(true, false, false);
    } // verify if we are at Cookies Manager page and update the selected options to match the already created cookie


    updateCookiePreferences();
  };

  var isInIframe = window.frameElement && window.frameElement.nodeName === 'IFRAME'; // check if we are in an iframe
  // Creation of default Cookies permissions when the DOM is fully loaded

  if (!isInIframe) document.addEventListener('DOMContentLoaded', cookiesScan); // When Accept all cookies button is triggered

  var acceptAllCookiesBtn = document.querySelector('.wmnds-cookies-banner__accept-all-cookies');

  if (!isInIframe) {
    acceptAllCookiesBtn.addEventListener('click', acceptAllCookies);
    acceptAllCookiesBtn.addEventListener('keydown', function(event) {
      if (event.key === ' ' || event.key === 'Enter' || event.key === 'Spacebar') {
        event.preventDefault();
        acceptAllCookies();
      }
    });
  } // When Safe Preferences button is triggered


  var cookieForm = document.querySelector('.wmnds-cookies-manager__form');
  if (cookieForm) cookieForm.addEventListener('submit', savePreferences);
};

var _default = cookies;
exports["default"] = _default;

Recommended javascript (ES6)
const cookies = () => {
  const cookiesBanner = document.querySelector('header .wmnds-cookies-banner');

  const hideCookieBanner = () => {
    cookiesBanner.style.display = 'none';
  };
  const showCookieBanner = () => {
    const codeExample = document.querySelector('.wmnds-website-code-example .wmnds-cookies-banner');

    cookiesBanner.style.display = 'block';
    if (codeExample) codeExample.style.display = 'block'; // Ensure the cookie banner in the component example stays visible even if the user has already accepted cookies
  };

  // Set cookie based on name, value and expiry date supplied
  const setCookie = (cname, cvalue, exdays) => {
    const cookieDomain = 'tfwm.org.uk';
    const d = new Date();
    d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
    const expires = `expires=${d.toUTCString()}`;
    const domain = `domain=.${cookieDomain}`;
    document.cookie = `${cname}=${cvalue};${expires};${domain};path=/`;
  };

  // Get cookie based on name supplied
  const getCookie = cname => {
    const name = `${cname}=`;
    const ca = document.cookie.split(';');
    for (let i = 0; i < ca.length; i += 1) {
      let c = ca[i];
      while (c.charAt(0) === ' ') {
        c = c.substring(1);
      }
      if (c.indexOf(name) === 0) {
        return c.substring(name.length, c.length);
      }
    }
    return '';
  };

  // Check if cookie(s) created or not
  const checkCookie = cname => {
    const isCookieCreated = getCookie(cname);
    if (isCookieCreated === '') {
      return false;
    }
    return true;
  };

  const getCookiePolicy = () => JSON.parse(getCookie('cookies-policy'));

  const updateCookiePreferences = () => {
    if (document.querySelector('.wmnds-cookies-manager__preferences')) {
      hideCookieBanner();
      const cookiesOptions = document
        .querySelector('.wmnds-cookies-manager__preferences')
        .querySelectorAll('.wmnds-fe-checkboxes__input');
      const currentOptions = [
        getCookiePolicy().essential,
        getCookiePolicy().functional,
        getCookiePolicy().performance
      ];
      for (let i = 0; i < cookiesOptions.length; i += 1) {
        cookiesOptions[i].checked = currentOptions[i];
      }
    }
  };

  const setCookiePolicy = (essentialValue, functionalValue, performanceValue) => {
    const cookieValue = {
      essential: essentialValue,
      functional: functionalValue,
      performance: performanceValue
    };
    setCookie('cookies-policy', JSON.stringify(cookieValue), 181);
    updateCookiePreferences();
  };

  const acceptAllCookies = () => {
    setCookiePolicy(true, true, true);
    setCookie('cookies-preference', true, 181);
    hideCookieBanner();
  };

  const savePreferences = () => {
    if (document.querySelector('.wmnds-cookies-manager__form')) {
      const elements = document
        .querySelector('.wmnds-cookies-manager__form')
        .querySelectorAll('.wmnds-fe-checkboxes__input');
      const selectedOptions = [];
      for (let i = 0; i < elements.length; i += 1) {
        selectedOptions[i] = elements.item(i).checked;
      }
      setCookiePolicy(...selectedOptions);
      setCookie('cookies-preference', true, 181);
    }
  };

  const cookiesScan = () => {
    // if cookies-preference doesn't exist, show cookie banner
    if (!checkCookie('cookies-preference')) {
      showCookieBanner();
      setCookiePolicy(true, false, false);
    }

    // verify if we are at Cookies Manager page and update the selected options to match the already created cookie
    updateCookiePreferences();
  };

  const isInIframe = window.frameElement && window.frameElement.nodeName === 'IFRAME'; // check if we are in an iframe

  // Creation of default Cookies permissions when the DOM is fully loaded
  if (!isInIframe) document.addEventListener('DOMContentLoaded', cookiesScan);

  // When Accept all cookies button is triggered
  const acceptAllCookiesBtn = document.querySelector('.wmnds-cookies-banner__accept-all-cookies');

  if (!isInIframe) {
    acceptAllCookiesBtn.addEventListener('click', acceptAllCookies);
    acceptAllCookiesBtn.addEventListener('keydown', event => {
      if (event.key === ' ' || event.key === 'Enter' || event.key === 'Spacebar') {
        event.preventDefault();
        acceptAllCookies();
      }
    });
  }

  // When Safe Preferences button is triggered
  const cookieForm = document.querySelector('.wmnds-cookies-manager__form');
  if (cookieForm) cookieForm.addEventListener('submit', savePreferences);
};

export default cookies;

Manage Cookies

When to use it?

  • Users can manage their cookies through the 'Manage cookies' button in the Cookie banner.
  • The Manage cookies pattern is also accessible from the main Policies page, so users can amend their cookie preferences at any time.


HTML markup
<div class="wmnds-p-md wmnds-cookies-manager">
  <div class="wmnds-container wmnds-col-1 wmnds-col-sm-1 wmnds-col-lg-3-4">
    <form class="wmnds-cookies-manager__form" action="#">
      <h1>Manage Cookies</h1>
      <p class="wmnds-m-b-md">
        Check your settings below and select the cookies you’re happy with.
      </p>
      <p>
        These settings only apply to wmnetwork.co.uk
      </p>
      <div class="wmnds-cookies-manager__preferences wmnds-p-b-md wmnds-p-t-md">
        <div class="wmnds-fe-group wmnds-m-none">
          <div class="wmnds-fe-checkboxes">
            <span class="wmnds-fe-checkboxes__desc">
              Select all options that apply
            </span>
            <label class="wmnds-fe-checkboxes__container">
              <div class="wmnds-m-b-lg">
                <h3 class="wmnds-m-none wmnds-p-b-sm">Essential cookies</h3>Without these cookies our website won’t work properly. They help you to access secure areas like accounts and tools such as the journey planner.
              </div>
              <input id="checkbox-example_option1" class="wmnds-fe-checkboxes__input" value="option1" name="checkbox-example" type="checkbox" checked="checked" disabled="disabled" />
              <span class="wmnds-fe-checkboxes__checkmark">
                <svg class="wmnds-fe-checkboxes__icon">
                  <use xlink:href="#wmnds-general-checkmark" href="#wmnds-general-checkmark"></use>
                </svg>
              </span>
            </label>
            <label class="wmnds-fe-checkboxes__container">
              <div class="wmnds-m-b-lg">
                <h3 class="wmnds-m-none wmnds-p-b-sm">Functional cookies</h3>These cookies help us to personalise our services to suit your needs, like saving your favourite transport services.
              </div>
              <input id="checkbox-example_option2" class="wmnds-fe-checkboxes__input" value="option2" name="checkbox-example" type="checkbox" />
              <span class="wmnds-fe-checkboxes__checkmark">
                <svg class="wmnds-fe-checkboxes__icon">
                  <use xlink:href="#wmnds-general-checkmark" href="#wmnds-general-checkmark"></use>
                </svg>
              </span>
            </label>
            <label class="wmnds-fe-checkboxes__container">
              <div class="wmnds-m-b-lg">
                <h3 class="wmnds-m-none wmnds-p-b-sm">Performance cookies</h3>These cookies collect information about how you’re using our services, for instance popular pages or errors. We use this information to make decisions when improving our services. We do not use any information collected to identify you as an individual.
              </div>
              <input id="checkbox-example_option3" class="wmnds-fe-checkboxes__input" value="option3" name="checkbox-example" type="checkbox" />
              <span class="wmnds-fe-checkboxes__checkmark">
                <svg class="wmnds-fe-checkboxes__icon">
                  <use xlink:href="#wmnds-general-checkmark" href="#wmnds-general-checkmark"></use>
                </svg>
              </span>
            </label>
          </div>
        </div>
      </div>
      <div>
        <button class="wmnds-btn" type="submit">
          Save Preferences
        </button>
      </div>
      <div class="wmnds-m-t-lg">
        <p>If you change your mind, <a href="">visit our Policies page</a> to change your cookie preferences.</p>
      </div>
    </form>
  </div>
</div>

Recommended javascript (browser compatible)
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var cookies = function cookies() {
  var cookiesBanner = document.querySelector('header .wmnds-cookies-banner');

  var hideCookieBanner = function hideCookieBanner() {
    cookiesBanner.style.display = 'none';
  };

  var showCookieBanner = function showCookieBanner() {
    var codeExample = document.querySelector('.wmnds-website-code-example .wmnds-cookies-banner');
    cookiesBanner.style.display = 'block';
    if (codeExample) codeExample.style.display = 'block'; // Ensure the cookie banner in the component example stays visible even if the user has already accepted cookies
  }; // Set cookie based on name, value and expiry date supplied


  var setCookie = function setCookie(cname, cvalue, exdays) {
    var cookieDomain = 'tfwm.org.uk';
    var d = new Date();
    d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
    var expires = "expires=".concat(d.toUTCString());
    var domain = "domain=.".concat(cookieDomain);
    document.cookie = "".concat(cname, "=").concat(cvalue, ";").concat(expires, ";").concat(domain, ";path=/");
  }; // Get cookie based on name supplied


  var getCookie = function getCookie(cname) {
    var name = "".concat(cname, "=");
    var ca = document.cookie.split(';');

    for (var i = 0; i < ca.length; i += 1) {
      var c = ca[i];

      while (c.charAt(0) === ' ') {
        c = c.substring(1);
      }

      if (c.indexOf(name) === 0) {
        return c.substring(name.length, c.length);
      }
    }

    return '';
  }; // Check if cookie(s) created or not


  var checkCookie = function checkCookie(cname) {
    var isCookieCreated = getCookie(cname);

    if (isCookieCreated === '') {
      return false;
    }

    return true;
  };

  var getCookiePolicy = function getCookiePolicy() {
    return JSON.parse(getCookie('cookies-policy'));
  };

  var updateCookiePreferences = function updateCookiePreferences() {
    if (document.querySelector('.wmnds-cookies-manager__preferences')) {
      hideCookieBanner();
      var cookiesOptions = document.querySelector('.wmnds-cookies-manager__preferences').querySelectorAll('.wmnds-fe-checkboxes__input');
      var currentOptions = [getCookiePolicy().essential, getCookiePolicy().functional, getCookiePolicy().performance];

      for (var i = 0; i < cookiesOptions.length; i += 1) {
        cookiesOptions[i].checked = currentOptions[i];
      }
    }
  };

  var setCookiePolicy = function setCookiePolicy(essentialValue, functionalValue, performanceValue) {
    var cookieValue = {
      essential: essentialValue,
      functional: functionalValue,
      performance: performanceValue
    };
    setCookie('cookies-policy', JSON.stringify(cookieValue), 181);
    updateCookiePreferences();
  };

  var acceptAllCookies = function acceptAllCookies() {
    setCookiePolicy(true, true, true);
    setCookie('cookies-preference', true, 181);
    hideCookieBanner();
  };

  var savePreferences = function savePreferences() {
    if (document.querySelector('.wmnds-cookies-manager__form')) {
      var elements = document.querySelector('.wmnds-cookies-manager__form').querySelectorAll('.wmnds-fe-checkboxes__input');
      var selectedOptions = [];

      for (var i = 0; i < elements.length; i += 1) {
        selectedOptions[i] = elements.item(i).checked;
      }

      setCookiePolicy.apply(void 0, selectedOptions);
      setCookie('cookies-preference', true, 181);
    }
  };

  var cookiesScan = function cookiesScan() {
    // if cookies-preference doesn't exist, show cookie banner
    if (!checkCookie('cookies-preference')) {
      showCookieBanner();
      setCookiePolicy(true, false, false);
    } // verify if we are at Cookies Manager page and update the selected options to match the already created cookie


    updateCookiePreferences();
  };

  var isInIframe = window.frameElement && window.frameElement.nodeName === 'IFRAME'; // check if we are in an iframe
  // Creation of default Cookies permissions when the DOM is fully loaded

  if (!isInIframe) document.addEventListener('DOMContentLoaded', cookiesScan); // When Accept all cookies button is triggered

  var acceptAllCookiesBtn = document.querySelector('.wmnds-cookies-banner__accept-all-cookies');

  if (!isInIframe) {
    acceptAllCookiesBtn.addEventListener('click', acceptAllCookies);
    acceptAllCookiesBtn.addEventListener('keydown', function(event) {
      if (event.key === ' ' || event.key === 'Enter' || event.key === 'Spacebar') {
        event.preventDefault();
        acceptAllCookies();
      }
    });
  } // When Safe Preferences button is triggered


  var cookieForm = document.querySelector('.wmnds-cookies-manager__form');
  if (cookieForm) cookieForm.addEventListener('submit', savePreferences);
};

var _default = cookies;
exports["default"] = _default;

Recommended javascript (ES6)
const cookies = () => {
  const cookiesBanner = document.querySelector('header .wmnds-cookies-banner');

  const hideCookieBanner = () => {
    cookiesBanner.style.display = 'none';
  };
  const showCookieBanner = () => {
    const codeExample = document.querySelector('.wmnds-website-code-example .wmnds-cookies-banner');

    cookiesBanner.style.display = 'block';
    if (codeExample) codeExample.style.display = 'block'; // Ensure the cookie banner in the component example stays visible even if the user has already accepted cookies
  };

  // Set cookie based on name, value and expiry date supplied
  const setCookie = (cname, cvalue, exdays) => {
    const cookieDomain = 'tfwm.org.uk';
    const d = new Date();
    d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
    const expires = `expires=${d.toUTCString()}`;
    const domain = `domain=.${cookieDomain}`;
    document.cookie = `${cname}=${cvalue};${expires};${domain};path=/`;
  };

  // Get cookie based on name supplied
  const getCookie = cname => {
    const name = `${cname}=`;
    const ca = document.cookie.split(';');
    for (let i = 0; i < ca.length; i += 1) {
      let c = ca[i];
      while (c.charAt(0) === ' ') {
        c = c.substring(1);
      }
      if (c.indexOf(name) === 0) {
        return c.substring(name.length, c.length);
      }
    }
    return '';
  };

  // Check if cookie(s) created or not
  const checkCookie = cname => {
    const isCookieCreated = getCookie(cname);
    if (isCookieCreated === '') {
      return false;
    }
    return true;
  };

  const getCookiePolicy = () => JSON.parse(getCookie('cookies-policy'));

  const updateCookiePreferences = () => {
    if (document.querySelector('.wmnds-cookies-manager__preferences')) {
      hideCookieBanner();
      const cookiesOptions = document
        .querySelector('.wmnds-cookies-manager__preferences')
        .querySelectorAll('.wmnds-fe-checkboxes__input');
      const currentOptions = [
        getCookiePolicy().essential,
        getCookiePolicy().functional,
        getCookiePolicy().performance
      ];
      for (let i = 0; i < cookiesOptions.length; i += 1) {
        cookiesOptions[i].checked = currentOptions[i];
      }
    }
  };

  const setCookiePolicy = (essentialValue, functionalValue, performanceValue) => {
    const cookieValue = {
      essential: essentialValue,
      functional: functionalValue,
      performance: performanceValue
    };
    setCookie('cookies-policy', JSON.stringify(cookieValue), 181);
    updateCookiePreferences();
  };

  const acceptAllCookies = () => {
    setCookiePolicy(true, true, true);
    setCookie('cookies-preference', true, 181);
    hideCookieBanner();
  };

  const savePreferences = () => {
    if (document.querySelector('.wmnds-cookies-manager__form')) {
      const elements = document
        .querySelector('.wmnds-cookies-manager__form')
        .querySelectorAll('.wmnds-fe-checkboxes__input');
      const selectedOptions = [];
      for (let i = 0; i < elements.length; i += 1) {
        selectedOptions[i] = elements.item(i).checked;
      }
      setCookiePolicy(...selectedOptions);
      setCookie('cookies-preference', true, 181);
    }
  };

  const cookiesScan = () => {
    // if cookies-preference doesn't exist, show cookie banner
    if (!checkCookie('cookies-preference')) {
      showCookieBanner();
      setCookiePolicy(true, false, false);
    }

    // verify if we are at Cookies Manager page and update the selected options to match the already created cookie
    updateCookiePreferences();
  };

  const isInIframe = window.frameElement && window.frameElement.nodeName === 'IFRAME'; // check if we are in an iframe

  // Creation of default Cookies permissions when the DOM is fully loaded
  if (!isInIframe) document.addEventListener('DOMContentLoaded', cookiesScan);

  // When Accept all cookies button is triggered
  const acceptAllCookiesBtn = document.querySelector('.wmnds-cookies-banner__accept-all-cookies');

  if (!isInIframe) {
    acceptAllCookiesBtn.addEventListener('click', acceptAllCookies);
    acceptAllCookiesBtn.addEventListener('keydown', event => {
      if (event.key === ' ' || event.key === 'Enter' || event.key === 'Spacebar') {
        event.preventDefault();
        acceptAllCookies();
      }
    });
  }

  // When Safe Preferences button is triggered
  const cookieForm = document.querySelector('.wmnds-cookies-manager__form');
  if (cookieForm) cookieForm.addEventListener('submit', savePreferences);
};

export default cookies;