Language switchers

How to add language switcher

To add a language switcher, first navigate to the Settings menu for your project. Then, click on Language switcher. Use the menus to customize the language switcher to your liking. Make sure to check off "Auto-select language based on visitor's browser settings" if you want language auto-selection. Then, click Copy code snippet in the bottom right. Now, you'll embed the code on your website.

How to embed the language switcher for Webflow:

  1. Visit the 'Settings' > 'Custom code' tab.

  2. Paste the lanuage switcher code snippet in the 'Footer code' section.

  3. Click 'Save', then 'Publish'.

Refer to the Webflow documentation for more details.

How to embed the language switcher for Framer:

  1. Visit the 'Site Settings' > 'General' tab.

  2. Scroll down to the 'Custom Code' section.

  3. Paste the lanuage switcher code snippet in the 'End of <head> tag' section.

  4. Click 'Save', then 'Publish'.

Refer to the Framer documentation for more details.

Finally, go back to Linguana, and click Sync content, then Publish. Now your language switcher should be live on your site.

Basic language switcher 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.

PreviousTranslate instances of identical elementsNextCustom domains

Last updated