A simple multilingual support library for WebFlow
This library is based on the ideas and work of @angro, @donaldev, and @memetican in this WebFlow forum post.
This library is designed to provide simple switchable language support that is compatible with the Webflow hosting design, designer canvas, and editor tools.
- An easy way to specify and edit short language-specific strings for labels, headings, and instructional text.
- Easy support for switching out rich-text objects
- Support for swapping other localized elements such as image and video elements
- Auto-detection for a user's language preferences
- Easy ability to create custom-style language-selector buttons
- Ability to override any langua
- Ability to remember the language setting across browser sessions ( if local storage is supported )
There are three primary known limitations-
- Support for SUBMIT button text
- Support for INPUT placeholder text
- Support for UC Browser (Chinese)
See Issues for further details.
How to Use
First add a reference to this library to your site-wide custom Footer code. You can do this using a CDN reference through jsDelivr;
Decide on the languages you want to support, and find their 2-letter ISO codes.
en (for English) and
zh (for Chinese) in our examples.
In any text string you want to make multilingual, codify it as follows;
[[en]]Some Title[[zh]]CHINESE TEXT
Strings will be tokenized by the language labels, and displayed only when the specified language is selected.
For RichText elements and images, add a custom attribute indicating the language that element represents. When this is specified, it will only show the element when the language matches the currently specified language;
To create custom buttons, create a the element you want and add a custom attribute, e.g.
Live Working Examples
CB Dairy - https://www.cbdairy.org/
None at present.