Cookie banner editor
Find out what you set in each step of the cookie banner editor and when your changes reach your site.
The cookie banner editor consists of three steps: Settings, Appearance and Content. On the right you'll find a live preview, which lets you check how your changes will look in practice. In this article you'll learn how to configure the cookie banner.
The three steps of the editor
| Step | What you set in it |
|---|---|
| 1. Settings | consent template and display region of the cookie banner |
| 2. Appearance | layout, colours, buttons, behaviour, logo and CookieOfficer branding |
| 3. Content | languages, the content of both screens and cookie categories |
You can go through the steps in order or jump straight to the one you are interested in.
Step 1: Settings
By choosing the right consent template, you can set the consent model and the look of the buttons on the cookie banner with a single click. There are three templates to choose from:
- General. A simple cookie banner with no regional requirements.
- GDPR / EU. All buttons look the same, so refusing is as visible as consenting.
- US (CCPA). A button to opt out of the sale of data appears next to the accept button.
Each template sets the consent model and the button colours. In the General template, the accept button is highlighted in colour. If you have previously set your own button colours, the template won't change them.
The General and US templates also set the display region to “Whole world”. The GDPR / EU template doesn't change the region.
The display region determines in which countries the cookie banner appears:
- “Whole world”, meaning the cookie banner is visible to everyone,
- “European Union and EEA”,
- “United Kingdom”,
- “Selected countries”, meaning the countries you specify.
The cookie banner will be shown only to visitors from the selected region. Other visitors won't see it at all, and tracking tools will run for them without asking for consent.
Step 2: Appearance
In this step you customise the look of the cookie banner.
| Section | Scope | Required plan |
|---|---|---|
| Layout and position | type of cookie banner and its position on the screen | Free, “Modal” layout from Basic |
| Card style | corner radius and card shadow | Pro |
| Consent model | how the visitor chooses categories | Free |
| Buttons | which buttons the visitor sees | Free |
| Behaviour | page overlay | Free |
| Behaviour | close icon and page block until a decision is made | Basic |
| Behaviour | entrance animation of the cookie banner | Pro |
| CookieOfficer branding | visibility of our branding | Pro |
| Custom CSS | custom styles for the cookie banner | Pro |
| Logo | your logo on the cookie banner | Basic |
| Theme and colours | light, dark or custom theme, font and colours | Free, font and custom colours from Basic |
The “Buttons” section appears only with the Multi-level and Expanded consent models.
Sections that depend on the plan remain visible, and a badge with the name of the required plan appears next to their names.
Step 3: Content
At the top of this step you choose the language in which you edit the content. The default language is marked with a “Default” badge.
You configure the set of languages, the default language and automatic language detection on the “Languages & geo rules” page. This is described in the article on cookie banner languages.
The content is divided into three groups:
- Main screen, meaning the content of the cookie banner itself,
- Preferences screen, opened with the “Settings” button,
- Consent categories, meaning the names and descriptions of the cookie categories.
The details are described in the article on cookie banner texts.
Live preview
The preview shows the cookie banner the way a visitor will see it. It has two switches:
- “On the page” and “Banner only”. The first shows the cookie banner against the background of your site, the second shows only the card itself.
- “Desktop”, “Tablet” and “Mobile”. You can check how the cookie banner looks at each of the three screen widths.
Draft and publishing
The editor has two buttons:
- “Save draft” saves a working version in your browser. Your changes don't reach your site at that point.
- “Publish changes” sends your changes to your site.
The draft stays saved even after you close the tab or refresh the page, so you can come back to your work the next day. Because it is stored in your browser, other team members can't see it.
Until you publish your changes, visitors won't see them. After publishing, the change reaches them within about five minutes.