Cookie Banner Languages in Free Cookie Consent

Show the cookie banner in the language of your visitors

TermsFeed Free Cookie Consent shows every text in 1 of 36 languages: the language the language option sets, or, without the option, a language from the browser language list, else English. The consent banner and the Preferences Center always share one language. No option changes the wording itself, so the texts are the translations that ship with Cookie Consent.

The TermsFeed generator writes the language you pick into the snippet, as "language": "en" by default. A generated snippet therefore shows English to every visitor until you change that line or remove it. Set the language option on a site in one language, or set it per page on a multilingual site, then check it in Chrome DevTools. Setting the option and checking it take about 10 minutes.

How Cookie Consent chooses the language

A set language option alone decides the language, and the browser decides only when the option is missing, null, or an empty string. Cookie Consent matches the option and the browser languages against its 36 codes with the same rules.

1. The value ignores case, the separator, and spaces at either end. "DE", "de-DE", and "de_DE" all match German, and "EN-gb" matches English (UK).
2. The exact code comes first, then the part before the separator. "pt-BR" gives Portuguese and "de-AT" gives German, because only pt and de exist. "en-US" gives English.
3. An unsupported option value gives English. "language": "ko" shows English even to a visitor whose browser asks for German.
4. Without the option, the browser list decides. Cookie Consent reads the languages the visitor ranks in the browser settings, in order. An exact code anywhere in the list takes precedence over a partial match earlier in it, so a browser that lists de-AT then en gets English. No supported language in the list gives English.

Set the language option or remove it

Write one of the 36 language codes into language to start every visitor in the same language. A fixed language suits a site with one language, because the consent banner then matches your pages whatever browser the visitor uses.

<script type="text/javascript" charset="UTF-8">
document.addEventListener('DOMContentLoaded', function () {
cookieconsent.run({
  "notice_banner_type": "headline",
  "consent_type": "express",
  "palette": "light",
  "language": "de"
});
});
</script>

Remove the language line so each visitor gets the browser language instead. Follow the browser on a site that serves an international audience in English, so a German visitor reads the consent banner in German.

Set the language per page on a multilingual site

Pass the language of the page itself, so a French page shows a French consent banner and a German page a German one. Most multilingual sites already declare the page language in the lang attribute of <html>, and the option accepts that value as it stands.

<!DOCTYPE html>
<html lang="fr-FR">
<head>
  <meta charset="utf-8">
  <title>Accueil</title>
</head>
<body>
  <!-- Page content -->

  <script type="text/javascript" src="https://www.termsfeed.com/public/cookie-consent/4.2.0/cookie-consent.js" charset="UTF-8"></script>
  <script type="text/javascript" charset="UTF-8">
  document.addEventListener('DOMContentLoaded', function () {
  cookieconsent.run({
    "notice_banner_type": "headline",
    "consent_type": "express",
    "palette": "light",
    "language": document.documentElement.lang
  });
  });
  </script>
</body>
</html>

fr-FR gives French. A page with an empty lang attribute passes an empty string, which counts as no option, so the browser language applies there. A server template that prints the code directly, such as "language": "{{ page_language }}", works the same way.

Check the language in Chrome DevTools

Turn on debug while you test, because the console then names the language and where it came from.

1. Add "debug": true to the configuration object and deploy it. Close every private window, open a new one, open Chrome DevTools on the Console tab, and load your site.
2. In the Console tab, find the line [i18n] Language set from the language option as: <code>, with the supported code Cookie Consent matched, such as fr for fr-FR, or [i18n] Language set from the browser as: <code> when the option is not set.
3. Select the Elements tab, select div#termsfeed-com---nb, and confirm its lang attribute holds that code in its standard form, such as en-GB for en_gb.
4. To test the browser language, remove the language option and deploy the change. Open Settings, then Languages in Chrome, add a supported language without a region, such as "German" rather than "German (Germany)", and move it to the top. Close every private window, open a new one, open DevTools on the Console tab, and load your site. Confirm the line [i18n] Language set from the browser as: <code> names that language, and that the lang attribute of div#termsfeed-com---nb holds it. Remove "debug": true before you go live.

The 36 language codes

The language menu in the Preferences Center shows each language by its English name, in this order: down the left half of the table, then down the right half.

Occitan works through the option and through the browser language like every other code.

English (UK) differs from English in British spelling, such as "Cookies Preferences Centre", and in shorter purpose texts. A site that needs other wording sets it with a short script on the page, which keeps the hosted script and its fixes. Copy that script from Change the Cookie Banner Text With Free Cookie Consent.

Language values that fall back to English

Some codes look supported but give English, because Cookie Consent matches only the codes in the language code table. Use the code in the "Write instead" column.

How visitors switch the language in the Preferences Center

The language menu at the top of the Preferences Center switches both the Preferences Center and the consent banner to another language at once, for the current page only. Cookie Consent does not store a language choice, so the next page starts in the language from the option or the browser.

A visitor who switches the language and then answers keeps that answer on the next page, in whatever language that page shows.

How Cookie Consent shows right-to-left languages

Arabic (ar) and Hebrew (he) render right to left: both dialogs get dir="rtl" and right-aligned text. Every other language renders left to right. The dialogs carry a lang attribute with the current code in its standard form, such as en-GB, ca-ES, or zh-TW, which marks the language of the text for assistive technology.

Character encoding of the translations

The hosted Cookie Consent script shows every translation correctly on any page, because www.termsfeed.com sends it with charset=utf-8. Your own texts, such as website_name, follow the page encoding, so declare UTF-8 in the <head> of your pages with <meta charset="utf-8">. A self-hosted copy depends on its server and on the charset="UTF-8" attribute of its script tag, so keep that attribute. Fix garbled text with Garbled Accents in the Cookie Banner.