# Set up the consent banner

This article explains how to create your site’s cookie consent banner, give it its shape and place, and reopen it. You will know how to offer the objection to audience measurement, show the Global Privacy Control signal and read your visitors’ answers.

## Before you start

- The consent banner is a composition: a set of blocks written once. Your site displays it by itself, on every page, until the visitor has answered, in the form you give it: a bar at the bottom of the screen, a card in a corner, a window in the center or a side panel. You do not place it in any template.
- Your site loads no advertising tag and no third-party measurement tool. The banner therefore has no third-party tool to get accepted.
- Your analytics are counted by your site itself. They are counted without waiting for the visitor’s answer. The **Audience measurement objection** block lets a visitor stop being counted.

## Create the banner

The design catalog footers create the banner with their **Manage my cookies** link. A home page creation therefore creates it with your header and footer. If your site has no banner, create it this way.

1. In the **Dashboard** of your Staging’s admin, click the step **Place the consent banner**. The **Templates** > **Compositions** screen opens.
2. Create a composition. In its panel, choose the **Role** **Consent banner**.
3. Insert one of the three creations from the catalog: **Consent banner: bottom bar**, **Consent banner: corner card** or **Consent banner: window**. Each places a heading, a paragraph and the **Cookie consent manager** block with its two buttons.
4. Publish the composition. The banner appears on your visitors’ next page.

The step **Place the consent banner** is checked when a composition holds this role and carries the **Cookie consent manager** block. A banner designed without this block asks a question whose answer is not recorded.

A role belongs to a language. On a multilingual site, each translation of the banner holds the role in its language. Each page displays the banner of its language.

## Understand when the banner is displayed

| Visitor’s situation | What they see |
| --- | --- |
| They have not answered yet. | The banner is on every page. |
| They close a window or a panel without answering, with the Esc key or a click on the background. | Nothing is recorded. The banner returns on the next page. A bar or a card does not close: it stays until an answer. |
| They accept, reject or save a choice with the **Save** button. | The page reloads without the banner. It no longer displays by itself. |
| Thirteen months have passed since their first visit. | The banner returns. |

The banner is written at the start of the page. A screen reader meets it before the header and the first tab stops enter it.

**Note:** Do not place the banner in a template or in a page: it would display twice.

## Choose the shape of the banner

The banner is designed in the editor of its composition, with the settings of any block. A bar or a card leaves the page usable: the visitor reads and answers whenever they want. A window or a side panel waits for the answer: the page below is inert as long as it is open.

### A bar or a card

1. Select the **Container** block at the root of the composition.
2. In the **Size & Spacing** panel, set **Position** to **Fixed**.
3. In **Offset**, give the edge: **Bottom** 0, **Left** 0 and **Right** 0 for a bar; **Bottom** 24 px and **Right** 24 px for a card at the bottom right, with a maximum width in the same panel.
4. In the **Effects** panel, give a **Z-index**, for example 1000, so that the banner passes in front of a sticky header.
5. In **HTML tag**, choose **aside** and write the **Region name**, for example **Cookie consent**. Screen readers announce the banner under this name.

The three creations from the catalog apply these settings. To move the card to the left, empty **Right** and give **Left** 24 px.

### A window or a side panel

1. Insert the **Overlay** block, alone at the root of the composition. This block is offered only in a template’s editor and in the editor of the composition that holds the role **Consent banner**: give the role, then reopen the editor.
2. In its toolbar, set **Position** to **Center** for a window or to **Side panel**.
3. Write the banner in the block’s panel: a heading first, which names the window for screen readers, then the text and the **Cookie consent manager**.
4. Give the panel its background, its borders and its maximum width: it has no starting style. The background behind the window is colored in the background block.

The window opens as soon as the page is read. It closes without an answer with the Esc key or a click on the background, and returns on the next page: the two buttons are the real way out. The **Dismiss overlay** block adds a cross.

## Reopen the banner from a link

So that a visitor can change their mind, add a link that reopens the banner, for example **Manage my cookies** in your footer. The design catalog footers already carry one.

1. Select a button, a menu link or a link in a text.
2. In the **Link** panel, click the **Search or paste a URL…** field. The list opens before any search.
3. Choose **Consent banner**, marked **Composition**. **Link opening** disappears from the panel: the banner always displays in its own form.
4. Save, then publish.

On click, the banner displays as you designed it, even if the visitor has already answered. Their new answer replaces the old one. As long as they have not answered, a bar or a card is already on the page: the link leads to it. A window they closed reopens. On a multilingual site, the link displays the banner of the page’s language.

## Compose the banner

The banner is edited in the editor like a page: texts, colors, layout and animations. Buttons and toggles are placed only in the **Cookie consent manager** block, whose toolbar offers **Block**, **Flex** and **Grid** like that of a container: **Flex** puts the two buttons side by side.

| Block | Role | Settings |
| --- | --- | --- |
| **Cookie consent manager** | Wraps all the consent blocks. Required. | Flex or grid layout, colors, typography, borders, effects and animations. |
| **Accept all cookies** | A button that records the visitor’s consent. | Its label (**Accept all** if left empty) and its styles. |
| **Reject all cookies** | A button that records the visitor’s refusal. | Its label (**Reject all** if left empty) and its styles. |
| **Tracker toggles** | One toggle per third-party tool enabled, then a **Save** button. | Its layout. The block displays nothing as long as no third-party tool is enabled. |
| **Audience measurement objection** | A toggle that removes the visitor from your analytics, then a **Save** button. | Its label (**Object to anonymous audience measurement** if left empty) and its styles. |
| **Global Privacy Control notice** | A sentence displayed only to visitors whose browser sends this signal. | Its text and its styles. |

In the creation’s banner, the two buttons are called **Accept** and **Reject**. Change their label by writing in the button.

**Tip:** Your site enables no third-party tool: the **Tracker toggles** block stays empty. Remove it and say instead, in a paragraph, that your site uses only the cookies needed for its operation and its audience measurement.

## Understand the visitor’s answer

1. The visitor clicks a button in the banner, or flips a toggle then clicks **Save**.
2. Their choice is encrypted then recorded in your site’s `cookie_consent` cookie.
3. The page reloads, without the banner.

A new choice replaces the previous one: rejecting after accepting removes the consent. An objection to audience measurement stays in place when the visitor then answers the banner.

The `cookie_consent` cookie is set from the first visit, even with no answer. It carries a randomly drawn identifier that tells new visitors from returning ones and links the campaigns through which the same visitor arrived. As long as the visitor has chosen nothing, their consent counts as “no”. The cookie lasts 13 months from the first visit: a new visit or a new choice does not extend it.

Twenty-five months after the first visit, your site erases this identifier from your analytics. It keeps anonymous visits: a country, a device, pages and their dates.

## Offer the objection to audience measurement

The **Audience measurement objection** block collects a visitor’s refusal to be counted. A visitor who turns it on disappears from your analytics. Without this block, your visitors cannot object to the measurement.

1. Open the page that explains your use of cookies, for example your privacy policy.
2. Insert a **Cookie consent manager** block.
3. In this block, insert **Audience measurement objection**.
4. Optional: write its label. Left empty, it displays **Object to anonymous audience measurement**.
5. Save the page.

The objection and the refusal of cookies stay independent: rejecting cookies does not remove the visitor from your analytics. Objecting to the measurement changes nothing about their other choice.

**Note:** The measurement of your pages’ speed and of time spent comes from the browser of the visitors counted. A visitor who objects does not contribute to it either.

## Respect the Global Privacy Control signal

Global Privacy Control is a browser setting by which the visitor asks that the data of their visit be neither sold nor shared. Brave and DuckDuckGo send it by default and Firefox offers it. Your site respects it, whether or not you place the block: no advertising tag fires, even after **Accept all**. Your analytics stay on your site.

Your site declares it at the address `/.well-known/gpc.json`, which some audit tools read.

The **Global Privacy Control notice** block announces it to the visitor concerned. Left empty, it displays **Your browser sends a Global Privacy Control signal, and we honor it.** in the visitor’s language. Other visitors see nothing. In the editor, the sentence stays visible so that you can style it.

## Read your visitors’ answers

Each answer to the banner is a submission of the **Cookie banner** form.

1. In the **Forms** menu, click **Cookie banner** in the list of forms.
2. Read the **Answer breakdown** card: the share of visitors who chose **Accept all**, **Reject all**, a **Detailed choice** or **Object to anonymous audience measurement**.
3. Optional: read the list of submissions. The **Visitor choice** column gives each answer, with its channel, its page and its country.

![The Answer breakdown card of the Cookie banner form: Accept all 227, or 59%, Reject all 111, or 29%, Detailed choice 33, or 9%, then Object to anonymous audience measurement 14, or 4%.](https://static.lovelyrender.com/uploads/2026/10/1020-doc-trouve-consentement.png)

Choices are counted without being decrypted.

## List your cookies in your policy

The **Cookie table** block lists in a legal document each cookie a visitor can receive, what it is for and how long it lasts. It updates by itself when the site sets a new cookie. [Show the cookie table](https://lovelyrender.com/documentation/cookie-table/) explains how to place it.

## See also

- [Read your analytics](https://lovelyrender.com/documentation/read-analytics/)
- [Show the cookie table](https://lovelyrender.com/documentation/cookie-table/)
- [Write the header, menu and footer once](https://lovelyrender.com/documentation/header-menu-footer-once/)
- [Get to know your site](https://lovelyrender.com/documentation/site-first-steps/)