DEV Community

Cover image for How to Build a Cookie Banner That Speaks Every Visitor's Language
Mehwish Malik
Mehwish Malik

Posted on

How to Build a Cookie Banner That Speaks Every Visitor's Language

A cookie banner is the first thing many users see on your site. If it loads in a language they cannot read, they close it or leave. That hurts your numbers and your consent quality. Here is how to fix it, step by step.

Step 1: Detect the language.
There are two common ways. You can read the browser language setting (navigator.language). Or you can use the visitor's location from their IP address. Some setups use both for a better guess. Once you know the language, load the matching text.

Step 2: Keep a clean set of translations.
Store each language in its own small file or object. Load only the language you need, not all of them at once. This keeps the banner fast and light.

Step 3: Handle legal words with care.
Machine translation is fine for normal text. But legal terms need a human check. A phrase like "legitimate interest" has a set meaning under GDPR Article 6(1)(f). A loose translation can weaken your consent. Get a native speaker to review your main markets.

Step 4: Support right-to-left languages.
Arabic, Hebrew, Persian, and Urdu read from right to left. You must flip the whole layout, not just the words. Move buttons, fix text alignment, and set dir="rtl". A banner that is only translated but not mirrored looks broken.

Step 5: Always keep a fallback.
If you cannot match the visitor's language, fall back to a default like English.

Why bother? The law asks for it. GDPR Article 12(1) says information must be in clear, plain language. In 2021 the Dutch privacy watchdog fined TikTok for showing its privacy notice only in English to Dutch users. A multi-language cookie banner solves both the legal and the user side.

If you would rather not build and maintain this yourself, Seers does the detection and translation for you.

Top comments (0)