Origami Frontend Components & Services

Readme: o-cookie-message

The cookie message and behaviour approved by the FT's legal team.
All FT websites must have a cookie message. Using o-cookie-message will ensure your site is compliant.



Use the following HTML to get a full width banner with the legal approved cookie message.

<div data-o-component="o-cookie-message" class='o-cookie-message o-cookie-message--banner-centric'>


No code will run automatically unless you are using the Build Service.

You must either construct an o-cookie-message object or fire the o.DOMContentLoaded event, which oCookieMessage listens for.

const oCookieMessage = require('o-cookie-message');

const cookieMessage = new oCookieMessage();

Firing an oDomContentLoaded event

document.addEventListener('DOMContentLoaded', function() {
    document.dispatchEvent(new CustomEvent('o.DOMContentLoaded'));


You may listen to two events that bubble out from the oCookieMessage DOM element:-


As with all Origami components, o-cookie-message has a silent mode. To use its compiled CSS (rather than incorporating its mixins into your own Sass) set $o-cookie-message-is-silent : false; in your Sass before you import the o-cookie-message Sass:

$o-cookie-message-is-silent: false;
@import 'o-cookie-message/main';

The default behaviour for this component is to populate any div with a data-o-component attribute of o-cookie-message with some HTML and a cookie message approved by the FT legal team.

If you need a different message, you can instruct the o-cookie-message JavaScript NOT to populate the o-cookie-message div, and instead you can put in any HTML you like.
To prevent o-cookie-message from messing with the inner HTML of your o-cookie-message div, add a second data attribute:

<div data-o-component="o-cookie-message"
    class='o-cookie-message o-cookie-message--banner-centric'>
    <p class="o-cookie-message__description">
        Exciting custom cookie message!
    <div class="o-cookie-message__close-btn-container">
        <button class="o-cookie-message__close-btn" data-o-component="o-cookie-message-close">
            <span class="o-cookie-message__close-btn-label">Close</span>

Migration guide

Migrating from 2.X.X to 3.X.X

The 3.0.0 introduces the new majors of o-colors and o-typography and a new dependency on o-normalise. Updating to this new version will mean updating any other components that you have which are using o-colors or o-typography.
There are some design tweaks but no other breaking changes in this release.

Migrating from 1.X.X to 2.X.X

The 2.0.0 release changes the default behaviour of o-cookie-message. Instead of consumers providing the inner HTML for the cookie message, they now need only provide the outer div ie:

<div class="o-cookie-message__container">
-    <p class="o-cookie-message__description">
-        By continuing to use this site you consent to the use of cookies on your device as described in our <a href="http://help.ft.com/tools-services/how-the-ft-manages-cookies-on-its-websites/">cookie policy</a> unless you have disabled them. You can change your <a href="http://help.ft.com/help/legal-privacy/cookies/how-to-mange-cookies/">cookie settings</a> at any time but parts of our site will not function correctly without them.
-    </p>
-    <div class="o-cookie-message__close-btn-container">
-        <button class="o-cookie-message__close-btn" data-o-component="o-cookie-message-close">
-            <span class="o-cookie-message__close-btn-label">Close</span>
-        </button>
-    </div>

So all you need now is:

<div data-o-component="o-cookie-message" class='o-cookie-message o-cookie-message--banner-centric'>

If you do not want to use the FT legal team approved cookie message (for example if you aren't running an FT site), you can opt out of it by setting the data-o-cookie-message-use-custom-html attribute to "true". All FT sites must use this cookie message unless otherwise cleared by the FT's legal team.


If you have any questions or comments about this component, or need help using it, please either raise an issue, visit #ft-origami or email Origami Support.


This software is published by the Financial Times under the MIT licence.

Support Status
Switch component view

GitHub Repository

Install o-cookie-message

If using the Build Service, add o-cookie-message@^3.3.0 to your script and link tags.

If running a Manual Build, run bower install --save "o-cookie-message@^3.3.0".

Help & Support

o-cookie-message is maintained directly by the Origami team. If you have any questions about o-cookie-message or Origami in general, we are happy to help. 😊

Slack: #ft-origami
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #ft-origami
Email: origami.support@ft.com