Localization‑Aware JavaScript in Webflow with Slater

Detect locale reliably and run per‑language behaviors using safe, attribute‑based patterns you can ship from Slater.

Published April 14, 2026

You can adapt behaviors and strings per language by deriving locale from the page and scoping logic to specific locales—without relying on undocumented globals or load events.

Pick a detection strategy

HTML lang attribute: Most setups expose locale as .
URL prefix/subdomain: Webflow Localization commonly uses subdirectories (/es/, /fr/) or subdomains (es.example.com).
Explicit data attribute: Add data-locale="…" to a top-level wrapper or DOM element when you need total control.

Helpers (choose what matches your project)

function getLocale() {
  // 1) Try <html lang>
  const lang = document.documentElement.lang;
  if (lang) return lang;
  // 2) Try URL prefix like /es/ or /fr-CA/
  const m = location.pathname.match(/^\/([a-z]{2}(?:-[A-Z]{2})?)\//);
  if (m) return m[1];
  // 3) Try explicit data attribute on body
  const a = document.body.getAttribute('data-locale');
  if (a) return a;
  // Fallback
  return 'en';
}

const LOCALE = getLocale();

Run locale‑specific behavior

// Exit early if this file is only for certain locales
const SUPPORTED = new Set(['en', 'es', 'fr']);
if (!SUPPORTED.has(LOCALE)) {
  // Not a targeted locale; exit safely
} else {
  // Localized logic here
}

Tiny dictionary pattern

const dict = {
  en: { cta: 'Add to cart' },
  es: { cta: 'Añadir al carrito' },
  fr: { cta: 'Ajouter au panier' }
};

function t(key) {
  const d = dict[LOCALE] || dict.en;
  return d[key] || key;
}

const btn = document.querySelector('[data-i18n="cta"]');
if (btn) btn.textContent = t('cta');

Right‑to‑left (RTL) basics

const rtlLocales = new Set(['ar', 'he', 'fa', 'ur']);
const base = LOCALE.split('-')[0];
if (rtlLocales.has(base)) {
  document.documentElement.dir = 'rtl';
}

CMS and attributes

For CMS-driven content, localize fields in Webflow. Use data attributes to toggle small UI text when needed.
If variants require different images or links, bind per-locale values in Designer and toggle via attributes.

Publishing and testing

Stage first: Publish to Staging and test on each locale variant path.
Verify: Check that and URLs match the locale your code detects.

FAQ

Does Webflow expose a runtime constant for locale? Webflow’s public docs emphasize lang attributes and URL structures; don’t rely on undocumented globals.
Should I use a full i18n library? Use one if you need plural rules, formatting, or async bundles. For small UI tweaks, a tiny dictionary is enough.
How do I handle locale fallbacks? Return a default (e.g., English) when a key/locale is missing, as shown above.