How can I easily redirect my website to a specific URL with language detection using Webflow?
TL;DR
- Add custom JavaScript in Webflow's Project Settings to detect browser language and redirect users to the corresponding language-specific URL.
- Create and publish separate pages (e.g., /en, /es, /fr) for each language, and test redirection behavior and loop prevention thoroughly.
To redirect users to a specific URL based on their language in Webflow, you'll need to combine Webflow’s flexibility with a small amount of custom code.
1. Add Language Detection Script to Webflow
- Go to Project Settings > Custom Code tab.
- In the Before </body> tag section, paste a JavaScript snippet that:
- Detects the user's browser language (
navigator.languageornavigator.languages). - Redirects them to the appropriate URL based on language.
- Example behavior:
- If the visitor’s language starts with
"es"→ redirect to"yourdomain.com/es" - If it’s
"fr"→ redirect to"yourdomain.com/fr" - Otherwise → stay on the default site or go to
"yourdomain.com/en".
2. Example Redirection Logic (in custom code block)
- Use the following logic pattern inside the Before </body> tag custom code area:
(No raw code displayed per guidelines, but here's what it should do):
- Get
navigator.languageornavigator.languages[0] - Use
startsWith('es'),startsWith('fr'), etc. - Call
window.location.replace('your-url')for redirect
Important: Always check that users aren't stuck in a redirect loop, e.g., don’t redirect again if they’re already on the /es page.
3. Set Up Individual Pages or Redirect Targets in Webflow
- Create folders or pages for each language in Webflow (e.g., /en, /es, /fr).
- Add translated content manually or reference content from CMS Collections with a language field.
- Avoid redirecting all users from the homepage (/); instead, use a separate landing or root logic page.
4. Publish and Test
- Publish the site, then access it using different browser language settings.
- Chrome and Firefox let you change the “Preferred language” in settings.
- Ensure the correct redirect and that loop prevention (if added) works.
Summary
To redirect users to language-specific URLs in Webflow, add custom JavaScript in the Project Settings that checks the browser language and redirects accordingly. Ensure you’ve built out the necessary destination pages (e.g., /es, /fr) either as static pages or CMS templates and thoroughly test browser behavior to prevent loops.