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.
Check out how to include Origami components in your project to get started with o-cookie-message.
Use the following HTML to get a full width banner with the legal approved cookie message.
<div data-o-component="o-cookie-message"></div>Optionally add a theme attribute to change the colours of the cookie message data-o=cookie-message-theme="alternative", see the registry demos for an example.
To display custom cookie message content with default buttons, add child HTML along with associated aria-labelledby and aria-describedby attributes:
<div
role="dialog"
aria-labelledby="demo-label-element-id"
aria-describedby="demo-description-element-id"
data-o-component="o-cookie-message"
class="o-cookie-message">
<!-- custom cookie message copy / html here -->
<!-- include ids for the aria labelledby and describedby attributes -->
<!-- e.g. -->
<h2 id="demo-label-element-id">Custom Cookie Message</h2>
<p id="demo-description-element-id">We use cookies because...</p>
</div>To support a core experience without JavaScript, add the full o-cookie-message markup as below. Update the anchors redirect query param with your sites URL, preferably the current page the cookie message is displayed on. This is used to send users back after setting cookie preferences in a core experience (where JavaScript is unavailable).
<div
role="dialog"
aria-labelledby="o-cookie-message-label"
aria-describedby="o-cookie-message-description"
data-o-component="o-cookie-message"
class="o-cookie-message">
<div class="o-cookie-message__outer">
<div class="o-cookie-message__inner">
<div class="o-cookie-message__content">
<div class="o-cookie-message__heading">
<h2 id="o-cookie-message-label">Cookies on the FT</h2>
</div>
<p id="o-cookie-message-description">
We use
<a href="https://help.ft.com/help/legal-privacy/cookies/"
class="o-cookie-message__link"
target="_blank"
rel="noopener">cookies</a>
for a number of reasons, such as keeping FT Sites reliable and secure, personalising content and
ads, providing social media features and to analyse how our Sites are used.
</p>
</div>
<div class="o-cookie-message__actions">
<div class="o-cookie-message__action o-cookie-message__action--secondary">
<a href="https://www.ft.com/preferences/manage-cookies?redirect=#" class="o-cookie-message__link">Manage cookies</a>
</div>
<div class="o-cookie-message__action">
<a href="https://consent.ft.com/__consent/consent-record-cookie?redirect=#" class="o-cookie-message__button">
Accept cookies
</a>
</div>
</div>
</div>
</div>
</div>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.
There are two available variations of o-cookie-message the default (standard) cookie message and alternative.
If you would like to initialise a standard cookie message, you will need to implement the following:
import oCookieMessage from '@financial-times/o-cookie-message';
const cookieMessage = new oCookieMessage();If you would like to initialise a alternative cookie message without declaring the data attribute in the markup, you will need to implement the following:
import oCookieMessage from '@financial-times/o-cookie-message';
const cookieMessage = new oCookieMessage(null, { theme: 'alternative' });To use a different cookie management path, use the manageCookiesPath option:
import oCookieMessage from '@financial-times/o-cookie-message';
const cookieMessage = new oCookieMessage(null, { manageCookiesPath: 'preferences/manage-cookies' });document.addEventListener('DOMContentLoaded', function() {
document.dispatchEvent(new CustomEvent('o.DOMContentLoaded'));
});You may listen to three events that bubble out from the oCookieMessage DOM element:-
oCookieMessage.view is emitted when the component has finished initialising and is displayed in the window.oCookieMessage.act is emitted when the user accepts cookies and gives consent.oCookieMessage.close is emitted when the component is removed from the DOM.Use @include oCookieMessage() to include styles for all themes.
Themes may be included granularly with an $opts map.
Include all themes:
@include oCookieMessage();Include only the default cookie message:
@include oCookieMessage($opts: (
'themes': ()
));Note: "standard" used to be required as a theme option to output the default theme, this is now output by default without any themes set.
Include the alternative cookie message theme:
@include oCookieMessage($opts: (
'themes': ('alternative')
));If you have any questions or comments about this component, or need help using it, please either raise an issue, visit #origami-support or email Origami Support.
This software is published by the Financial Times under the MIT licence.