Skip to content
English - United States
Nous Contacter
  • There are no suggestions because the search field is empty.

How to display a language selector on Webflow

Improve the user experience of your multilingual hotel website

Key points:

  • The language selector allows visitors to easily change the language.
  • You can create it manually or use an automatic widget (Weglot).
  • It can be integrated into the main menu, header, or footer of the website.

Displaying a language selector on Webflow is essential if your hotel website is available in multiple languages. This small element improves navigation, strengthens your international image, and optimizes the user experience, especially for international guests.

Option 1: Create a language selector manually

  1. Create language versions of your pages. First, make sure your site has multiple versions, for example:
    • / → French
    • /en/ → English
  2. Add a text block or dropdown menu to the header. In the Designer, open your header (Header or Navbar).
    • Click on Add (+) > Text Block or Dropdown Menu.
    • Rename the text using the language codes or names: FR | EN or French / English
  3. Link each language to its corresponding version of the website.
    • Select the text “FR” → create a link to the French homepage (/).
    • Select “EN” → link to the English homepage (/en/). 💡 Tip: If you have multiple languages ​​(e.g., DE, ES), simply add them to the end.
  4. Style the selector. Use the Style panel to:
    • Harmonize the typography with your visual identity.
    • Add a slight spacing between the languages.
    • Highlight the active language in bold or a different color.
  5. Make the selector visible on all pages
    • If your header is a Symbol (Global Component), modify it only once.
    • The change will automatically propagate across the entire site.

💡 Design tip: add a small globe icon 🌐 next to the selector to make it more intuitive.

Option 2: Add an automatic selector with Weglot

If you use Weglot, the language selector is integrated automatically.

  1. Install Weglot on your Webflow site
    • Visit weglot.com.
    • Connect your Webflow project and copy the Weglot API key.
    • Paste it into Project Settings > Custom Code > Head.
  2. Customize the selector in the Weglot dashboard
    • Go to Settings > Language Switcher.
    • Choose the style (drop-down menu, flags, text, icon).
    • Position it (top right, bottom, fixed, or integrated into the menu).
  3. Hide the widget on certain pages if necessary. In Webflow Designer, you can disable its display on specific sections by applying a CSS rule or using the `display: none` option.

💡 Tip: Weglot offers customizable positioning code if you want to place the selector in a specific component of your site (e.g., navbar).

Best practices

  • Don't overload the header: the selector should remain discreet but visible.
  • For clarity, please use language codes (FR, EN) rather than flags alone.
  • Check the selector's consistency on mobile: it must remain accessible in the hamburger menu.
  • Test the redirects between languages ​​to ensure they lead to the correct pages.

Conclusion

Adding a language selector to Webflow is a key step in making your hotel website accessible to an international clientele. Whether you opt for a manual version integrated into your header or an automatic widget via Weglot, the important thing is to ensure smooth, intuitive, and consistent navigation across all pages.