Language switchers

With Linguana, implementing a language switcher is as easy as copy-pasting some code.

Insert the code below in the global footer code of your Webflow or Framer project. For Webflow, that's located under Project Settings -> Custom Code -> Footer Code.

<script>
var LINGUANA_MAIN_LANGUAGE_CODE = "en"
</script>
<script src="https://static.linguana.io/public/linguana_switcher.min.js"></script>
<link
  type="text/css"
  rel="stylesheet"
  href="https://static.linguana.io/public/linguana_switcher.min.css"
/>

Language switcher customization options

  1. LINGUANA_MAIN_LANGUAGE_CODE: This represents the main language code of your website, such as "fr" for French, "de" for German, or "en" for English. By default, it is set to "en".

  2. LINGUANA_AUTO_DETECT_LANGUAGE: Set this to true to automatically detect and select the visitor's language based on their browser settings. If their preferred language is not available, the main language will be selected.

  3. LINGUANA_SWITCH_CUSTOM_CONTAINER_ID: This is used for completely customizing the language switcher. Add this variable and create an element wrapper with the specified ID. The script will then render the switcher in that location. If you use this, it is advisable to avoid using Linguana's CSS and create your own custom CSS instead.

  4. LINGUANA_SWITCH_TOGGLE_BUTTON_ID: This specifies the ID of the toggle button. If you change this ID, you will need to provide your own CSS for styling the button.

  5. LINGUANA_OPTIONS_CONTAINER_ID: This defines the ID of the wrapper div that contains the language link options.

  6. LINGUANA_SINGLE_OPTION_CLASS: This specifies the class for a single option container within the language switcher.

  7. LINGUANA_SINGLE_OPTION_FLAG_CONTAINER_CLASS: This represents the class of the element that contains the flag icon for each language option.

  8. LINGUANA_SINGLE_OPTION_LABEL_CONTAINER_CLASS: This specifies the class of the element that contains the label for each language option, such as "en" for English.

  9. LINGUANA_SHOW_LANGUAGE_CODE: Set this to true if you want to display the language code (e.g., "EN") on the label. If disabled, the label will not show the language code.

  10. LINGUANA_SHOW_LANGUAGE_NAME: Enable this to display the language name (e.g., "English"). If both this and LINGUANA_SHOW_LANGUAGE_CODE are enabled, the label will show the language in the format: "English (EN)".

Styling the language switcher

You can style the language switcher by simply using CSS in your global footer code.

Last updated