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 project (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"
/>
Once you pasted the code, click "Save changes" above the text field and publish your project. Your website now includes a language switcher.
IMPORTANT NOTE
We have recently experienced issues with jsdelivr. If the language switcher on your website is not working, please copy-paste the new code above and publish your project in Webflow and Linguana.
We are now serving javascript and css assets for the language switcher via Linguana CDN instead of using jsdelivr.
Language switcher customization options
To customize the language switcher, you can add additional variables to the script above. We defined them like this:
LINGUANA_MAIN_LANGUAGE_CODE -> main language code like fr de, en, (en is default)
LINGUANA_SWITCH_CUSTOM_CONTAINER_ID -> This is for customizing completely the switcher, user can add this and create an element wrapper with this id and the script will render the switcher in that place. If you use this it is good idea to also not use the css of linguana, but to create your own css.
LINGUANA_SWITCH_TOGGLE_BUTTON_ID ->The id of the toggle buton, if you change this you need to provide your own css.
LINGUANA_OPTIONS_CONTAINER_ID -> The id of the wrapper div of the Lang link options
LINGUANA_SINGLE_OPTION_CLASS -> Class of a single option container
LINGUANA_SINGLE_OPTION_FLAG_CONTAINER_CLASS -> The class of element containing the flag icon
LINGUANA_SINGLE_OPTION_LABEL_CONTAINER_CLASS -> The class of element containing the label (en, english)
LINGUANA_SHOW_LANGUAGE_CODE -> If you want to show the code of language on label. If this is disabled the label will not be rendered
LINGUANA_SHOW_LANGUAGE_NAME -> IF this is enabled the language name will be rendered, if both this and * LINGUANA_SHOW_LANGUAGE_CODE will be enabled we will show like this "English (EN)"
LINGUANA_MAIN_LANGUAGE_CODE is the original language of your website. For example, if your original website in Webflow is German, set this variable to 'de'.
LINGUANA_SWITCH_CUSTOM_CONTAINER_ID is used to define a custom container, where you would like to position the language switcher. By default, it will be fixed to the bottom left corner of your website.
Styling the language switcher
You can simply style the language switcher using CSS in your global footer code.