Languages (i18n)

Ship one banner for every market: per-language translations with graceful fallback, auto-detection, lazy-loaded language files, RTL support and runtime switching.

The shape

ConsentLoop.run({
  content: {
    autoDetect: "document",       // read ; "browser" uses navigator.language
    fallback: "en",
    privacyPolicyUrl: "/privacy", // linked in banner + preferences; label pre-translated in all 58 packs
    cookiePolicyUrl: "/cookies",  // optional third link, same treatment
    termsUrl: "/terms",           // same for "Terms & conditions" (labels: banner.privacyPolicy / banner.terms)
    translations: {
      en: {
        banner: {
          title: "We value your privacy",
          description: 'We use cookies. Read our privacy policy.',
          acceptAll: "Accept all", rejectAll: "Reject all", preferences: "Preferences",
          links: [{ label: "Privacy policy", href: "/privacy" }],
        },
        preferences: { title: "Privacy preferences", save: "Save preferences", alwaysOn: "Always on" },
        categories: {
          analytics: { title: "Analytics", description: "Helps us improve the site." },
        },
      },
      de: { banner: { title: "Wir respektieren deine Privatsphäre", acceptAll: "Alle akzeptieren" } },
      fr: "/i18n/fr.json",        // lazy: fetched only when needed, then cached
      ar: { rtl: true, banner: { title: "نحن نحترم خصوصيتك" } },
    },
  },
});

Deep fallback: any missing key falls back to built-in English — partial translations are fine.
Region collapse: de-AT matches de automatically.
Escaping: titles, buttons and labels are HTML-escaped. Descriptions allow HTML (you author them) for inline policy links.
RTL: set rtl: true on a translation to flip the widget’s direction.

58 ready-made languages

Every install ships 58 locale packs — consentloop/locales/<code>.json, from Arabic to Welsh — including every official EU language (full list, RTL flags included). They plug into the URL-translation mechanism and lazy-load only when that language is actually needed:

ConsentLoop.run({
  content: {
    translations: {
      de: "https://cdn.jsdelivr.net/npm/consentloop/locales/de.json",
      ja: "https://cdn.jsdelivr.net/npm/consentloop/locales/ja.json",
      ar: "https://cdn.jsdelivr.net/npm/consentloop/locales/ar.json", // rtl handled automatically
    },
  },
});

Self-hosting? Copy them from node_modules/consentloop/locales/ into your assets and point the URLs there. The packs are maintained in-repo — native-speaker corrections are very welcome as PRs.

Try it

The widget on this page has three languages. Switch live:

await ConsentLoop.setLanguage("de"); // re-renders in place, keeps all state

Detection order

content.lang — hard override (e.g. from your router or the managed adapter).
autoDetect: "document" (default) — <html lang>, the SEO-correct source.
autoDetect: "browser" — navigator.language.
fallback — default en.

Translation workflow tip

Ask your AI assistant: “Translate this ConsentLoop translations.en object to French, German and Spanish; keep keys, translate values, keep HTML tags intact.” The structure is flat and predictable on purpose — see AI integration.