Give visitors a cookie settings link on every page

Add an element with the id open_preferences_center to your footer, and a click on it opens the TermsFeed Free Cookie Consent Preferences Center on any page. The consent banner does not return until the answer expires, after 365 days by default. Until then, this link or your own code that opens the Preferences Center is the only way back to the choices. Under the General Data Protection Regulation (GDPR), withdrawing consent must be as easy as giving it, according to Article 7(3).

The TermsFeed generator writes such a link below the snippet, <a href="#" id="open_preferences_center">Update cookies preferences</a>. Keep that link, or replace it with your own link, a menu item, or a call from your code. Adding the link takes about 10 minutes, plus the check.

You need the Cookie Consent snippet on every page and access to your footer or menu template. Put the link in a part of the page that every page shares, such as the footer, so visitors find it wherever they are. Install the snippet first with Install a Cookie Banner on Any Website.

Step 1: Add an element with the open_preferences_center id

Give a link or a button the id open_preferences_center, and Cookie Consent opens the Preferences Center when a visitor clicks it. Choose a label visitors recognize, such as "Cookie settings" or "Privacy choices".

<footer>
  <a href="#" id="open_preferences_center">Cookie settings</a>
</footer>

A <button> works the same way, with no href to manage.

<button type="button" id="open_preferences_center">Cookie settings</button>

Cookie Consent handles every click on the page and matches it to the element, so the link works in most templates.

  • The element works whenever it appears. A footer that your framework renders after Cookie Consent starts works too.
  • The page does not jump. Once Cookie Consent runs, it prevents the default action of the click, so href="#" neither scrolls to the top nor adds # to the address.
  • A click inside the element counts. A click on an icon or a <span> inside the link opens the Preferences Center.
  • Your own click handlers do not block it. A site script that stops the click on the link or its parents does not block Cookie Consent, which sees the click first. Only a capture listener on window that calls stopPropagation(), or a capture listener added on document before Cookie Consent starts that calls stopImmediatePropagation(), stops the click before it reaches Cookie Consent.

Set open_preferences_center_selector to any CSS selector when you need more than one link, or a menu item whose editor has no id field. HTML allows one element per id, so a header link and a footer link need a class instead.

<a href="#" class="open-cookie-preferences">Cookie settings</a>

<script type="text/javascript" charset="UTF-8">
document.addEventListener('DOMContentLoaded', function () {
cookieconsent.run({
  "notice_banner_type": "headline",
  "consent_type": "express",
  "language": "en",
  "open_preferences_center_selector": "#open_preferences_center, .open-cookie-preferences"
});
});
</script>

The selector replaces the default, so #open_preferences_center stops working unless you list it in the selector too. An invalid selector opens nothing, and the console prints Invalid open_preferences_center_selector, no element will open the Preferences Center: <selector> when debug is on.

Many menu editors accept only a label and a URL. Give the menu item the URL #cookie-settings and match it on its address instead of a class.

<script type="text/javascript" charset="UTF-8">
document.addEventListener('DOMContentLoaded', function () {
cookieconsent.run({
  "notice_banner_type": "headline",
  "consent_type": "express",
  "language": "en",
  "open_preferences_center_selector": "#open_preferences_center, a[href$='#cookie-settings']"
});
});
</script>

The $= match covers menus that write the full address, such as https://www.example.com/#cookie-settings. Add the menu link on WordPress with a CSS class instead, in Step 4: Add a menu link that reopens the Preferences Center.

Step 3: Open the Preferences Center from your own code

Call cookieconsent.openPreferencesCenter() from your own script, such as a settings page of a web app. The function takes no argument and returns nothing.

The function exists only after Cookie Consent starts, which happens after the DOMContentLoaded event and after the script file loads. Calling it earlier throws TypeError. Check that the function exists before you call it.

<button type="button" id="privacy-settings-button">Privacy settings</button>

<script type="text/javascript">
document.getElementById('privacy-settings-button').addEventListener('click', function () {
  if (window.cookieconsent && typeof window.cookieconsent.openPreferencesCenter === 'function') {
    window.cookieconsent.openPreferencesCenter();
  }
});
</script>

cookieconsent.cookieConsentObject.openPreferencesCenter() does the same, for code that holds the Cookie Consent object. Prefer the open_preferences_center id or open_preferences_center_selector for links, because a matched element never throws. A click before Cookie Consent starts opens nothing, and an href="#" link then jumps to the top of the page. Every click after Cookie Consent starts opens the Preferences Center. Open the Preferences Center from a single-page app with Single-Page Apps and Frameworks.

What the Preferences Center shows when it reopens

The Preferences Center opens with each switch on the saved answer, or on the categories that run on page load for a visitor who has not answered. After a page load it first opens on the "Your privacy" tab. Until the next page load, it reopens on the tab the visitor last viewed. A visitor who turns a category off and clicks the "Save my preferences" button stores the new answer at once. The close button and the Escape key close the Preferences Center without saving, and the switches return to their previous state.

The change_my_preferences_button_clicked callback runs only for the button on the consent banner, never for your link or your code. A category turned off does not stop a tagged script that already ran: it keeps running until the next page load, and the cookies it set stay. A page reload after each answer stops those scripts at once. Read when a reload helps, and what Google tags receive without one, in Reload the Page After Consent.

Test the link after answering, because the link matters most once the consent banner is gone. Allow about 5 minutes.

  1. Publish the page that carries your cookie settings link and clear any page cache. Close every private window, open a new one, and load that page. The consent banner appears.
  2. Click the "I agree" button, then open another page of your site and confirm the consent banner stays hidden.
  3. Click your cookie settings link, and confirm the Preferences Center opens on the "Your privacy" tab and that the address bar gains no #. Select the tab of a category you use, such as "Tracking cookies", and confirm its switch reads Active.
  4. Set that switch to Inactive, click the "Save my preferences" button, open Chrome DevTools, and select the Application tab. Open Cookies, select your site, and confirm that cookie_consent_level now holds false for that category, such as %22tracking%22%3Afalse.
  5. Click every other link the selector matches, including the menu item on a small screen, and confirm each link opens the Preferences Center with no # added to the address bar.