Documentation · Guides

The consent banner

This page as Markdown, or in an AI chatMore ways to read this page

In hard mode, tidekeeper asks your visitors whether they may be recognised next time: in your type and colours, light or dark as your page is, with tidekeeper's label on its edge. What it does, and what you can choose.

# The consent banner

> tidekeeper's documentation: https://tidekeeper.eu/docs/banner

In hard mode, tidekeeper asks your visitors whether they may be recognised next time: in your type and colours, light or dark as your page is, with tidekeeper's label on its edge. What it does, and what you can choose.

## What it asks, and when

One question, with No thanks and Yes as two halves of one control, and what it means a press away. A new banner asks when a visit shows interest: on a page reached from your own site, or after half a minute on the first. Nothing is stored on the visitor's device before an answer; left unanswered, it asks again on the next page.

## Light and dark

Automatic, the starting choice, decides by the first of these it finds, and follows a change while the page is open:

- What you tell it: `data-tk-theme="light"` or `"dark"` on `<html>`, or on the element you put the question in.
- Your page's own `color-scheme` on `<html>`, when it is one of the two, not both.
- The visitor's system, by `prefers-color-scheme`.

```js
document.documentElement.dataset.tkTheme = dark ? "dark" : "light";
```

## Your type and colours

The banner takes your page's font. Its colours are the editor's two pairs, light and dark, or your own, read from these properties on your page, so a change to your stylesheet changes the banner too:

```css
:root {
  --tk-banner-bg: #fff8ee;
  --tk-banner-fg: #3b2417;
  --tk-banner-accent: #b5481e;
  --tk-banner-radius: 22px;
  --tk-banner-font: "Work Sans", sans-serif;
}
:root[data-tk-theme="dark"] {
  --tk-banner-bg: #221812;
  --tk-banner-fg: #f6e9da;
}
```

The editor holds the colours you give it to 4.5 to 1 in each pair it shows. Colours set in your own stylesheet are yours to check.

## In the page

With the shape In the page, nothing is laid over the page: the question is drawn where you put this element, and asked only on the pages that have one.

```html
<div data-tk-ask></div>
```

## The way back

A visitor changes their answer under Privacy choices: a link of yours, on every page, marked `data-tk-privacy`, or the small icon the editor offers instead.

```html
<a href="/privacy" data-tk-privacy>Privacy choices</a>
```

## Options, and the law

Some owners ask for a banner that must be answered, for pay or consent, or for Yes in their accent. tidekeeper offers them, and does not say whether any of them is lawful where you are: that is yours to decide, with whoever advises you. What regulators have said, to read:

- [The EDPB's report of its cookie banner taskforce (2023)](https://www.edpb.europa.eu/system/files/2023-01/edpb_20230118_report_cookie_banner_taskforce_en.pdf)
- [The EDPB's Opinion 08/2024, on consent or pay](https://edpb.europa.eu/system/files/2024-04/edpb_opinion_202408_consentorpay_en.pdf)
- [The CNIL's sheet 16, on analytics](https://www.cnil.fr/en/sheet-ndeg16-use-analytics-your-websites-and-applications)
- [Datatilsynet, the Danish authority](https://www.datatilsynet.dk/)

What tidekeeper's own site uses: equal answers, a banner that may be left, asked when a visit shows interest.

Nothing on this page is legal advice.

What it asks, and when

One question, with No thanks and Yes as two halves of one control, and what it means a press away. A new banner asks when a visit shows interest: on a page reached from your own site, or after half a minute on the first. Nothing is stored on the visitor's device before an answer; left unanswered, it asks again on the next page.

Light and dark

Automatic, the starting choice, decides by the first of these it finds, and follows a change while the page is open:

What you tell it: data-tk-theme="light" or "dark" on <html>, or on the element you put the question in.
Your page's own color-scheme on <html>, when it is one of the two, not both.
The visitor's system, by prefers-color-scheme.

A site with a theme switch, where it sets its own

document.documentElement.dataset.tkTheme = dark ? "dark" : "light";

Your type and colours

The banner takes your page's font. Its colours are the editor's two pairs, light and dark, or your own, read from these properties on your page, so a change to your stylesheet changes the banner too:

In your stylesheet

:root {
  --tk-banner-bg: #fff8ee;
  --tk-banner-fg: #3b2417;
  --tk-banner-accent: #b5481e;
  --tk-banner-radius: 22px;
  --tk-banner-font: "Work Sans", sans-serif;
}
:root[data-tk-theme="dark"] {
  --tk-banner-bg: #221812;
  --tk-banner-fg: #f6e9da;
}

The editor holds the colours you give it to 4.5 to 1 in each pair it shows. Colours set in your own stylesheet are yours to check.

In the page

With the shape In the page, nothing is laid over the page: the question is drawn where you put this element, and asked only on the pages that have one.

Where a reader has finished something

<div data-tk-ask></div>

The way back

A visitor changes their answer under Privacy choices: a link of yours, on every page, marked data-tk-privacy, or the small icon the editor offers instead.

In your footer

<a href="/privacy" data-tk-privacy>Privacy choices</a>

Options, and the law

Some owners ask for a banner that must be answered, for pay or consent, or for Yes in their accent. tidekeeper offers them, and does not say whether any of them is lawful where you are: that is yours to decide, with whoever advises you. What regulators have said, to read:

What tidekeeper's own site uses: equal answers, a banner that may be left, asked when a visit shows interest.

Nothing on this page is legal advice.