@nationalarchives/frontend-cookie-banner NPM

TNA Frontend Cookie Banner

Use the cookie banner from TNA Frontend in your service.

HTML

<section class="tna-cookie-banner" data-module="tna-cookie-banner" data-policies="" data-preferenceskey="" data-policieskey="" data-domain="myservice.nationalarchives.gov.uk" data-path="/" data-insecure="false" aria-label="Cookies on my service" hidden>
  <div class="tna-container">
    <div class="tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--prompt">
      <h2 class="tna-heading-m">This website uses cookies</h2>
      
      <p>We use some essential cookies to make this service work.</p>
      <p>We'd also like to use analytics cookies so we can understand how you use the service and make improvements.</p>
      
      <div class="tna-button-group">
        <button class="tna-button" type="button" value="accept">
          Accept cookies
          </button>
        
        <button class="tna-button" type="button" value="reject">
          Reject cookies
          </button>
        
        <a href="/cookies" class="tna-button tna-button--plain">
          Set cookie preferences
          </a>
        
      </div>
    </div>
    <div class="tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--accepted" tabindex="0" hidden>
      
      <p>You have accepted optional cookies. You can change your cookie settings on the <a href="/cookies">cookies page</a>.</p>
      
      <div class="tna-button-group">
        <button class="tna-button" type="button" value="close">
          Hide cookies message
          </button>
        
      </div>
    </div>
    <div class="tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--rejected" tabindex="0" hidden>
      
      <p>You have rejected optional cookies. You can change your cookie settings on the <a href="/cookies">cookies page</a>.</p>
      
      <div class="tna-button-group">
        <button class="tna-button" type="button" value="close">
          Hide cookies message
          </button>
        
      </div>
    </div>
  </div>
</section>

Attributes

Attribute	Purpose	Default
`data-policies`	Extra cookie policies in addition to "essential", "settings" and "usage"	none
`data-preferenceskey`	The cookie name to state that the user preferences have already been set	`cookie_preferences_set`
`data-policieskey`	The cookie name for the policy preferences	`cookies_policy`
`data-domain`	The domain to save cookies for	The current domain
`data-path`	The path that cookies are available within	`/`
`data-insecure`	Allow cookies to be sent in HTTP environments (designed for testing only)	`false`

JavaScript

Initialise the component

Include the JavaScript in your service. This should add a TNAFrontend object to your window. You can then initialise the component:

const $cookieBanner = document.querySelector(
  '[data-module="tna-cookie-banner"]',
);

if ($cookieBanner) {
  new TNAFrontend.CookieBanner($cookieBanner);
}

Work with cookies using the `Cookies` class

import Cookies from "@nationalarchives/frontend/nationalarchives/lib/cookies.mjs";

const cookies = new Cookies();

if (cookies.isPolicyAccepted("usage")) {
  // Add tracking code
}

Use cookie events

import Cookies from "@nationalarchives/frontend/nationalarchives/lib/cookies.mjs";

const cookies = new Cookies();

cookies.on("acceptPolicy", function(policy) {
  if (policy === "usage") {
    console.log("Usage cookies are permitted");
    // Add tracking code
  }
});

cookies.on("rejectPolicy", function(policy) {
  if (policy === "usage") {
    console.log("Usage cookies have been rejected");
    // Remove tracking code
  }
});

Event	Trigger
`setCookie`	Any time a cookie is changed in the browser using the `Cookie` class
`deleteCookie`	When any cookie is deleted using `delete()`
`deleteAllCookies`	When all cookies are deleted using `deleteAll()`
`acceptPolicy`	When any policy is accepted using `acceptPolicy()`
`acceptAllPolicies`	When all policies are accepted using `acceptAllPolicies()`
`rejectPolicy`	When any policy is rejected using `rejectPolicy()`
`rejectAllPolicies`	When all policies are rejected using `rejectAllPolicies()`
`changePolicy`	When any policy is changed using either `acceptPolicy()`, `rejectPolicy()` or `setPolicy()`