Designing and embedding a cookie banner – design, languages and integration on your website

In the “Design” tab you define what the cookie banner looks like and what it says in each language. In the “Integration” tab you find the script for your website and see after every scan whether it is embedded correctly and which content is not blocked yet.

Prerequisites

• The cookie banner has been ordered, and your user group has the “Edit” right for “Cookie banner”.
• To embed it, you need access to your website’s source code or content management system.

Set the design and texts

1. Open the cookie banner and switch to the “Design” tab. The “Preview” shows the cookie banner as visitors see it; switch between “First level” and “Settings”.
2. In the design section, click “Edit”. Choose the “Layout” (“Bottom bar”, “Box, bottom left”, “Box, bottom right” or “Dialogue, Centre”), the “Logo” and the colours for “Background”, “Text” and “Buttons”. The contrast between button and text must be at least 4.5:1.
3. Under the texts, enter the “Heading” and the “First-level text” for each language of the cookie banner, plus the addresses of your “Privacy notice” and “Legal notice” on the website. Both links are required for approval because the cookie banner often covers the footer.
4. Click “Save”. The preview shows the change immediately, the website only after the next approval.

You set the languages themselves via “Edit” on the cookie banner. “Reject all” and “Accept all” always appear side by side with equal weight, and no category except “Required” is preselected. These rules cannot be switched off.

Embed the script

1. Switch to the “Integration” tab and copy the embed code under “Script” using the copy icon.
2. Insert the script as the first element in the <head> of every page. It always loads the most recently approved version; after a new approval you do not need to replace anything. If your website uses a content security policy, allow the address shown in script-src and connect-src.
3. Mark every script that needs consent with type="text/plain" and its category in the data-preeco-category attribute. The example in the integration tab shows the syntax.
4. Embed content such as YouTube, Google Maps or Vimeo with data-preeco-src instead of src, plus category and service. Until consent is given, the cookie banner shows a placeholder in its place. Only content marked this way is reliably not loaded by the browser before consent.
5. If needed, also add the “Link to reopen”, for example in the footer; the floating button stays in place as well.

Check the integration

After every completed scan, the “Review of integration” section shows for each domain whether the script was found, whether it comes before other scripts and which integrations are not blocked. If it says “Not yet checked”, the next completed scan checks the integration; you can trigger it yourself with “Start scan” in the “Scans” tab.

Practical tip

The script delivers nothing until the first approval. You can therefore embed it while you are still preparing services and texts, and approve the cookie banner afterwards. After approval, check the “Unblocked integrations”: every entry there loads before consent and still needs to be marked with data-preeco-src or data-preeco-category.