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.

Markup

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:

<div data-o-component="o-cookie-message" class="o-cookie-message">
    <!-- custom cookie message copy / html here -->
</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 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>Cookies on the FT</h2>
                </div>
                <p>
                    We use
                    <a href="http://help.ft.com/help/legal-privacy/cookies/"
                        class="o-cookie-message__link o-cookie-message__link--external"
                        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">
                    <a href="https://consent.ft.com/__consent/consent-record-cookie?redirect=#" class="o-cookie-message__button">
                        Accept &amp; continue
                    </a>
                </div>

                <div class="o-cookie-message__action o-cookie-message__action--secondary">
                    <a href="https://cookies.ft.com/preferences/manage-cookies?redirect=#" class="o-cookie-message__link">Manage cookies</a>
                </div>
            </div>
        </div>
    </div>
</div>

JavaScript

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: standard and alternative.

If you would like to initialise a standard cookie message, you will need to implement the following:

import oCookieMessage from '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 'o-cookie-message';
const cookieMessage = new oCookieMessage(null, { theme: 'alternative' });

Firing an oDomContentLoaded event

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

Events

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

Sass

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 standard theme:

@include oCookieMessage($opts: (
  $themes: ('standard')
));

Include only the alternative theme:

@include oCookieMessage($opts: (
  $themes: ('alternative')
));

Migration

State Major Version Last Minor Release Migration guide
✨ active 5 N/A migrate to v5
⚠ maintained 4 4.7 migrate to v4
╳ deprecated 3 3.3 migrate to v3
╳ deprecated 2 2.2 migrate to v2
╳ deprecated 1 1.2 -

Contact

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.


Licence

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

Support Status
active
Switch component view

GitHub Repository

Install o-cookie-message

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

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

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: #origami-support
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: #origami-support
Email: origami.support@ft.com