The Flout Translate plugin adds automatic translation to your website by using a **snippet** of code you place in the <head> section of each website page you want to translate.
The basic snippet is all you need to run the plugin successfully. Because there are many options to configure the plugin we built a configurator tool to easily generate and copy a correctly configured snippet. This tool is available in your Flout Translate dashboard, in the Domains section.
<meta name="google" content="notranslate"> <script src="https://flouttranslate.com/js/amashv3.1/flout-tloader.min.js"</script>
The snippet will load the plugin and display a language selector in the top right corner of the window by default. The plugin can be customised by adding more options to the snippet.
The line <meta name="google" content="notranslate"> is important for website visitors viewing your site in a different language. Our plugin uses a smart algorithm to decide which language to open your pages in to give the user a seamless and very friendly experience. Google may show them a pop-up option to change languages and this can be confusing because your site languages are managed by our plugin. This line of code, when placed in your head section, suppresses the Google pop-ups and is provided by Google for this very purpose.
Do not add 'defer' or 'async' to the snippet.
Add Flout Translate to your Shopify store using the theme editor:
Flout Translate will now automatically translate your storefront content for visitors.
Add Flout Translate to your WordPress site using a simple script embed:
You can also use a header injection plugin if you prefer not to edit theme files directly.
To add Flout Translate to your Wix site:
Your site will now display translations automatically based on the visitor’s selected language.
Embed Flout Translate into your Squarespace website in a few easy steps:
Translations will appear automatically for all visitors once installed.
Add Flout Translate to your Webflow site via the global site settings:
Visitors will now see your content in their language of choice.
WooCommerce runs on WordPress, so follow the same steps as a WordPress site:
Flout Translate will work seamlessly with your product pages and checkout flow.
Here’s how to install Flout Translate on a BigCommerce store:
Your BigCommerce storefront will now automatically display in multiple languages.
To embed Flout Translate on your Joomla site:
Flout Translate will now automatically translate your Joomla content for visitors.
To install Flout Translate on your Drupal site:
Your Drupal site will now show content in the visitor’s preferred language.
Add Flout Translate to your Magento 2 site by updating the layout templates:
Your Magento storefront will now support instant multilingual translation.
The Flout Translate Dashboard is your central control panel for managing every aspect of your website translations. Login to it using the credentials you set up on the account.
Key features include:
Developers can control some functionality of the plugin and can also configure fine-grained settings at the web page level. These will override anything configured in the Plugin Settings Panel located in the user dashboard.
Careful consideration, an understanding of HTML and proper testing is advised.
To prevent parts of your page from being translated, add the `notranslate` class to any element. This will exclude that element and all of its descendant nodes from being translated by Flout Translate.
<div class="notranslate">
<p>This content will not be translated.</p>
</div>
If `data-auto-selector` is set to `true`, the language selector is automatically displayed. You can customize its visual style and position by adding any of the following attributes to your snippet.
<script src="https://flouttranslate.com/js/amashv3.1/flout-tloader.min.js"
data-selector-background-color="pink"
data-selector-text-color="red"
data-selector-border-color="green"
data-selector-vertical-scroll="fixed"
data-selector-position="top-left"
data-selector-icon-url="https://flouttranslate.com/images/selector-translate-dark.svg"
data-selector-show-flags="false">
</script>
| Item Name | Description | Values | Default If Not Present |
|---|---|---|---|
| data-selector-background-color | Controls the color of the selector background. |
You can use any valid CSS color value, such as:
|
white |
| data-selector-text-color | Controls the color of the selector language names. | Same color options as background-color. | #404040 |
| data-selector-border-color | Controls the visibilty and color of the selector border. |
|
#404040 |
| data-selector-vertical-scroll | Controls whether the selector scrolls with the page or is fixed in the window position as configured in data-selector-position. |
|
with-page |
| data-selector-position | Controls the position of the selector on the page. |
|
top-right |
| data-selector-icon-url | This overrides the default language selector placeholder visual. You can use your own icon just add your own link. |
|
|
| data-selector-show-flags | Shows the country flag that best matches each language in the drop down selector. |
|
true |
For more control, you can place the language selector element tag <ft-selector></ft-selector> anywhere in your HTML. It must only be used once on the page. If you implement this feature, you will be in control of where the language selector appears, so do not use the positioning attributes described above.
Also, you must set data-auto-selector="false" so the plugin does not create one automatically. And set data-selector-position="static".
Note that the selector will still be auto filled with the languages and will still operate the in the default manner. This feature is only for manual placement of the selector on the page.
You can use the ::part pseudo-element to style the selector by targeting its shadow DOM parts individually.
The selector is now split into three parts: button, panel, and item.
This gives you fine-grained control over each part’s appearance.
/* ::part(button) → the clickable element that shows the currently selected language (the dropdown trigger). */
ft-selector::part(button) {
font-size: 16px;
color: blue;
background-color: #f0f0f0;
border: 1px solid green;
padding: 5px;
border-radius: 5px;
}
/* ::part(panel) → the dropdown container that appears when you click the button (the list background).*/
ft-selector::part(panel) {
background: white;
border: 1px solid #ccc;
padding: 10px;
max-height: 200px;
overflow-y: auto;
}
/* ::part(item) → each individual language option inside the dropdown list. */
padding: 5px 10px;
cursor: pointer;
}
ft-selector::part(item):hover {
background: #f5f5f5;
}
<script src="https://flouttranslate.com/js/amashv3.1/flout-tloader.min.js"
data-base-language="fr"
data-target-language="auto"
data-language-list="en,fr,es,de"
data-translate-on-load="false"
data-auto-selector="false">
</script>
| Item Name | Description | Values | Default If Not Present |
|---|---|---|---|
| data-base-language | Two character language code that defines the base language the web site content is produced in. | Must be one of the flout translate language codes, see the list later in this document. | We derive it from scanning the page to determine the base language. |
| data-target-language | Sets the startup language if data-translate-on-load is true. | "auto" (attempts to detect the user’s preferred language) or a fixed language code (e.g., "fr" for french) |
auto |
| data-language-list | Defines available languages for translation and is also the content of the visible language selector. Use a comma-separated list of language codes. These also form the content of the selector dropdown list. It is standard practise to have the base language code for the page at the beginning of the list. | Comma-separated list of language codes (e.g., en,fr,es,de)Some price tiers have limits for the number of languages permitted. See the Pricing Page for details. |
If this item is not present the default list is en,fr,de,zh,es,ar,ru,hi,it. If there is only one item in the list then all languages will be included. |
| data-translate-on-load | Controls whether translation happens automatically when the page loads. Also, see data-target-language to determine which target language will be used. |
|
true |
| data-auto-selector | Controls whether the Flout Translate dropdown language selector is automatically added to the page. See the sections below describing advanced selector configuration. |
|
true |
Developers can monitor for a language change event issued by flout translate whenever the target language is changed.
window.addEventListener("ft-languagechange", (event) => {
const newLang = event.detail.languageCode;
console.log("Event: Language changed to:", newLang);
// other code here
});
Flout Translate publicly exposes some methods and properties of its global page scoped object for use in page code so developers can enhance their site visitor experience beyond the plugin's automated functionality.
WARNING: Ensure you configure the plugin functionality to stop automatic features that will conflict with your code. If these are not carefully managed, you can encounter infinite process loops between the plugin automatic features and your own code use of the plugin object methods. This can be catastrophic for your website.
| Method | Description |
|---|---|
| `FloutTranslator.translateTexts(textArray)` | Pass this method an array of text strings and it will return an array of translated text strings. This is an asynchronous method and returns a promise. |
| `FloutTranslator.changeLanguage(languageCode, runTranslate = true)` | Changes the target language and can trigger a page translation. This is typically used if the developer wants to manage their own language selector UI. This method returns true on success and false if not. This is an asynchronous method and returns a promise. |
| Property | Description |
|---|---|
| `FloutTranslator.targetLanguageCode` | Returns the current translation target language code selected. |
| `FloutTranslator.sourceLanguageCode` | Returns the translation source (site base) language code. |
| Code | Language Name |
|---|---|
| af | 🇿🇦 Afrikaans (Afrikaans) |
| am | 🇪🇹 አማርኛ (Amharic) |
| ar | 🇸🇦 العربية (Arabic) |
| az | 🇦🇿 Azərbaycan dili (Azerbaijani) |
| be | 🇧🇾 Беларуская (Belarusian) |
| bg | 🇧🇬 Български (Bulgarian) |
| bn | 🇧🇩 বাংলা (Bengali) |
| bs | 🇧🇦 Bosanski (Bosnian) |
| ca | 🇪🇸 Català (Catalan) |
| cs | 🇨🇿 Čeština (Czech) |
| cy | 🏴 Cymraeg (Welsh) |
| da | 🇩🇰 Dansk (Danish) |
| de | 🇩🇪 Deutsch (German) |
| el | 🇬🇷 Ελληνικά (Greek) |
| en | 🇬🇧 English (English) |
| es | 🇪🇸 Español (Spanish) |
| et | 🇪🇪 Eesti (Estonian) |
| fa | 🇮🇷 فارسی (Persian) |
| fi | 🇫🇮 Suomi (Finnish) |
| fr | 🇫🇷 Français (French) |
| ga | 🇮🇪 Gaeilge (Irish) |
| gl | 🇪🇸 Galego (Galician) |
| gu | 🇮🇳 ગુજરાતી (Gujarati) |
| he | 🇮🇱 עברית (Hebrew) |
| hi | 🇮🇳 हिन्दी (Hindi) |
| hr | 🇭🇷 Hrvatski (Croatian) |
| ht | 🇭🇹 Kreyòl Ayisyen (Haitian Creole) |
| hu | 🇭🇺 Magyar (Hungarian) |
| hy | 🇦🇲 Հայերեն (Armenian) |
| id | 🇮🇩 Bahasa Indonesia (Indonesian) |
| is | 🇮🇸 Íslenska (Icelandic) |
| it | 🇮🇹 Italiano (Italian) |
| ja | 🇯🇵 日本語 (Japanese) |
| ka | 🇬🇪 ქართული (Georgian) |
| kk | 🇰🇿 Қазақ тілі (Kazakh) |
| km | 🇰🇭 ភាសាខ្មែរ (Khmer) |
| kn | 🇮🇳 ಕನ್ನಡ (Kannada) |
| ko | 🇰🇷 한국어 (Korean) |
| ku | 🇹🇷 Kurdî (Kurdish) |
| lt | 🇱🇹 Lietuvių kalba (Lithuanian) |
| lv | 🇱🇻 Latviešu valoda (Latvian) |
| mi | 🇳🇿 Te Reo Māori (Maori) |
| mk | 🇲🇰 Македонски (Macedonian) |
| ml | 🇮🇳 മലയാളം (Malayalam) |
| mn | 🇲🇳 Монгол хэл (Mongolian) |
| mr | 🇮🇳 मराठी (Marathi) |
| ms | 🇲🇾 Bahasa Melayu (Malay) |
| mt | 🇲🇹 Malti (Maltese) |
| my | 🇲🇲 မြန်မာစာ (Burmese) |
| ne | 🇳🇵 नेपाली (Nepali) |
| nl | 🇳🇱 Nederlands (Dutch) |
| no | 🇳🇴 Norsk (Norwegian) |
| pa | 🇮🇳 ਪੰਜਾਬੀ (Punjabi) |
| pl | 🇵🇱 Polski (Polish) |
| ps | 🇦🇫 پښتو (Pashto) |
| pt | 🇵🇹 Português (Portuguese) |
| ro | 🇷🇴 Română (Romanian) |
| ru | 🇷🇺 Русский (Russian) |
| sk | 🇸🇰 Slovenčina (Slovak) |
| sl | 🇸🇮 Slovenščina (Slovenian) |
| sm | 🇼🇸 Gagana Samoa (Samoan) |
| so | 🇸🇴 Soomaali (Somali) |
| sq | 🇦🇱 Shqip (Albanian) |
| sr | 🇷🇸 Српски (Serbian) |
| su | 🇮🇩 Basa Sunda (Sundanese) |
| sv | 🇸🇪 Svenska (Swedish) |
| sw | 🇹🇿 Kiswahili (Swahili) |
| ta | 🇮🇳 தமிழ் (Tamil) |
| te | 🇮🇳 తెలుగు (Telugu) |
| th | 🇹🇭 ไทย (Thai) |
| to | 🇹🇴 Lea fakatonga (Tongan) |
| tr | 🇹🇷 Türkçe (Turkish) |
| ug | 🇨🇳 ئۇيغۇرچە (Uyghur) |
| uk | 🇺🇦 Українська (Ukrainian) |
| ur | 🇵🇰 اردو (Urdu) |
| uz | 🇺🇿 Oʻzbekcha (Uzbek) |
| vi | 🇻🇳 Tiếng Việt (Vietnamese) |
| xh | 🇿🇦 isiXhosa (Xhosa) |
| yi | 🇮🇱 ייִדיש (Yiddish) |
| yo | 🇳🇬 Yorùbá (Yoruba) |
| zh | 🇨🇳 简体中文 (Simplified Chinese - Mainland) |
| zt | 🀄️ 繁體中文 (Traditional Chinese - Hong Kong / Taiwan / Macau) |
| zu | 🇿🇦 isiZulu (Zulu) |