Documentation

Add flout translate to your website and enable automatic translation.

Copy the Snippet Below.

<script src="https://flouttranslate.com/js/amashv2/flout-tloader-v2.min.js" data-tid="YOUR TID HERE"></script>

Place the code in the <head> section on each page you require translation.

Replace 'YOUR TID HERE' with the unique Translation ID you have received as part of your account set-up process (using "start free" button on the home page). After set-up, you can find your translation ID in the "my account" page.

Do not add 'defer' or 'async' to the snippet.

Inserting the line illustrated above is all you need to get started. It will load the plugin into your page and will display a language selector in the top right corner of the window.

See below for customisation of the translator and the visible selector.

Customise the translation plugin functionality by adding any combination of these items to the snippet.

Example:

<script src="https://flouttranslate.com/js/amashv2/flout-tloader-v2.min.js"
    data-tid="YOUR TID HERE"
    data-base-language="fr"
    data-target-language="auto"
    data-language-list="en,fr,es,de"
    data-translate-on-load="false"
    data-monitor-changes="true"
    data-auto-selector="false">
</script>

Item Name	Description	Values	Default
data-tid	The unique Translation ID (TID) that you have received as part of your subscription process. Each domain configured to your account has one allocated TID for security purposes and protection of your quota usage. flout translate expects the TID used in the snippet to match the domain that is hosting the web pages otherwise translations will not take place. A TID can be used across multiple domains.	As supplied.	No default.
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.	en (English)
data-target-language	Sets the startup language if data-translate-on-load is true.	`"auto"` (attempts to detect the user’s preferred and previously used language or no startup translation) or a fixed language code (e.g., `"fr" for french`)	`auto`
data-language-list	Defines available languages for translation and what is displayed in the visitor’s dropdown selector. Use a comma-separated list of language codes. These also form the content of the selector dropdown list.	Comma-separated list of language codes (e.g., `en,fr,es,de`)	en, fr, de, zh, es, ar, ru, hi, it
data-translate-on-load	Controls whether translation happens automatically when the page loads. Also, see data-target-language to determine what target language will be used.	`true` – Automatically translates on load. `false` – Does not automatically translate on load.	`true`
data-monitor-changes	Detects and translates page content that is dynamically added or modified after page load. It is a convenient way to translate dynamic content changes. IMPORTANT NOTE: If you turn this feature on and there is an excessive amount of dynamic translation on your page, you may use up your subscription translation quota faster than expected. As an alternative, you can keep this feature off and use the flout translate Global Object to manage your own dynamic translations in code in a more optimised way. See later in this document.	`true` – Monitors and translates dynamic content. `false` – Does not translate dynamic changes.	`false`
data-auto-selector	Controls whether the dropdown language selector is automatically displayed. See the sections below describing selector configuration.	`true` – Displays the language selector. `false` – Does not display the the selector.	`true`

Customise the language selector visual element by adding any combination of these items to the snippet.

Example:

<script src="https://flouttranslate.com/js/amashv2/flout-tloader-v2.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-show-flags="false"
</script>

Item Name	Description	Values	Default
data-selector-background-color	Controls the color of the selector background.	You can use any valid CSS color value, such as: Named colors: `"red"`, `"blue"`, `"transparent"`, etc. Hexadecimal colors: `"#FF0000"`, `"#00FF00"`, `"#0000FF"`, etc. RGB colors: `"rgb(255, 0, 0)"`, `"rgb(0, 255, 0)"`, `"rgb(0, 0, 255)"`, etc. RGBA colors: `"rgba(255, 0, 0, 0.5)"`, `"rgba(0, 255, 0, 0.5)"`, etc.	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.	`"none"`: No border visible. Same color options as background-color.	`#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.	"fixed": The selector will be fixed in the window position, even when the page scrolls. "with-page": The selector will scroll with the page.	with-page
data-selector-position	Controls the position of the selector on the page.	"top-left" "top-center" "top-right" "bottom-left" "bottom-center" "bottom-right" "static": The selector will appear in the position you place it in the document. You must override the automatic selector by placing "<ft-selector></ft-selector>" in your document where you want the selector to appear.	`top-right`
data-selector-show-flags	Shows the country flag that best matches each language in the drop down selector.	`true` – Shows the flags. `false` – Doesn't show the flags.	`true`

Exclude Elements From Translation

To prevent certain parts of your page from being translated, add the ft-no-translate class to any element. This will exclude that element and all of its descendant nodes from being processed by Flout Translate. The ft-no-translate rule applies to the targeted element node and all child nodes, including other elements and text nodes within.

Example:

<div class="ft-no-translate">
    <p>This content will not be translated.</p>
</div>

Override Auto Translations

You can use the Override section of the Accounts Page on our website to override translations with target language text or with AI context enhanced translations.

Selector Element CSS Style

For developers who want even more control over the appearance of the language selector, you can use CSS styles with the "::part" pseudo-element. This element uses the Shadow Dom for isolation from your web page.

Example:

ft-selector::part(select) {
    font-size: 16px;
    color: blue;
    background-color: #f0f0f0;
    border: 1px solid green;
    padding: 5px;
    border-radius: 5px;
}

Language Changed Event

Developers can monitor for a language change event issued by flout translate whenever the target language is changed or set by the user with the selector, or by using our global object method in code, or when it is initially set on startup even if it is the base language itself.

Example to trap the event:

window.addEventListener("ft-languagechange", (event) => {
    const newLang = event.detail.languageCode;
    console.log("Event: Language changed to:", newLang);
    // other code here
});

Using the flout translate Global Object

flout translate publicly exposes various methods and properties of it's global page scoped object for use in page code so developers can enhance their site visitor experience beyond the plugin's automated functionality.

Example:

Method	Description
FloutTranslator.translateDomNode(node, allDescendants = true)	Pass this method a node object in the DOM and it will translate any content, in place, that is viable for translation. If "allDescendants" is true then the translation will extend to all viable content in all descendant nodes. If it is false only the incoming node will be translated. Any node and it's descendants will be excluded from translation if it has a class of "ft-no-translate". This method does not return any value. This method will translate into the currently selected target language. This is an asynchronous method, and always returns a promise, so if you need to wait for the result you will need to code appropriately.
FloutTranslator.translateTexts(textArray)	Pass this method an array of text strings and it will return an array of translated text strings. This method will assume the incoming text is in the configured base language and will translate into the currently selected target language. If the text provided is not in the base language the results will be unexpected and incorrect. This is an asynchronous method, and always returns a promise, so you will need to code appropriately to wait for the result. The returned array will be the same length and sequence as the original. If translations are not made in any array elements then affected array elements should contain the original text.
FloutTranslator.changeLanguage(languageCode)	Pass this method a language code in the approved list and the target language will be changed, the page will be translated and the language selector will be positioned to the new language. This method will return true if it was successful and false if not. This is an asynchronous method, and always returns a promise, so if you need to wait for the result you will need to code appropriately.

Property	Description
FloutTranslator.targetLanguageCode	Returns the current translation target language code selected.
FloutTranslator.sourceLanguageCode	Returns the translation source (site base) language code.

Language Codes Available	Language Name
af	🇿🇦 Afrikaans (Afrikaans)
sq	🇦🇱 Shqip (Albanian)
am	🇪🇹 አማርኛ (Amharic)
ar	🇸🇦 العربية (Arabic)
hy	🇦🇲 Հայերեն (Armenian)
az	🇦🇿 Azərbaycan dili (Azerbaijani)
eu	🇪🇸 Euskara (Basque)
be	🇧🇾 Беларуская (Belarusian)
bn	🇧🇩 বাংলা (Bengali)
bs	🇧🇦 Bosanski (Bosnian)
bg	🇧🇬 Български (Bulgarian)
ca	🇪🇸 Català (Catalan)
ny	🇲🇼 Chichewa (Chichewa)
zh	🇨🇳 中文 (Chinese)
co	🇫🇷 Corsu (Corsican)
hr	🇭🇷 Hrvatski (Croatian)
cs	🇨🇿 Čeština (Czech)
da	🇩🇰 Dansk (Danish)
nl	🇳🇱 Nederlands (Dutch)
en	🇬🇧 English (English)
eo	🌍 Esperanto (Esperanto)
et	🇪🇪 Eesti (Estonian)
tl	🇵🇭 Filipino (Filipino)
fi	🇫🇮 Suomi (Finnish)
fr	🇫🇷 Français (French)
fy	🇳🇱 Frysk (Frisian)
gl	🇪🇸 Galego (Galician)
ka	🇬🇪 ქართული (Georgian)
de	🇩🇪 Deutsch (German)
el	🇬🇷 Ελληνικά (Greek)
gu	🇮🇳 ગુજરાતી (Gujarati)
ht	🇭🇹 Kreyòl Ayisyen (Haitian Creole)
ha	🇳🇬 Hausa (Hausa)
he	🇮🇱 עברית (Hebrew)
hi	🇮🇳 हिन्दी (Hindi)
hu	🇭🇺 Magyar (Hungarian)
is	🇮🇸 Íslenska (Icelandic)
ig	🇳🇬 Igbo (Igbo)
id	🇮🇩 Bahasa Indonesia (Indonesian)
ga	🇮🇪 Gaeilge (Irish)
it	🇮🇹 Italiano (Italian)
ja	🇯🇵 日本語 (Japanese)
jv	🇮🇩 Basa Jawa (Javanese)
kn	🇮🇳 ಕನ್ನಡ (Kannada)
kk	🇰🇿 Қазақ тілі (Kazakh)
km	🇰🇭 ភាសាខ្មែរ (Khmer)
rw	🇷🇼 Ikinyarwanda (Kinyarwanda)
ko	🇰🇷 한국어 (Korean)
ku	🇹🇷 Kurdî (Kurdish)
ky	🇰🇬 Кыргызча (Kyrgyz)
lo	🇱🇦 ພາສາລາວ (Lao)
la	🇻🇦 Latina (Latin)
lv	🇱🇻 Latviešu valoda (Latvian)
lt	🇱🇹 Lietuvių kalba (Lithuanian)
lb	🇱🇺 Lëtzebuergesch (Luxembourgish)
mk	🇲🇰 Македонски (Macedonian)
mg	🇲🇬 Malagasy (Malagasy)
ms	🇲🇾 Bahasa Melayu (Malay)
ml	🇮🇳 മലയാളം (Malayalam)
mt	🇲🇹 Malti (Maltese)
mi	🇳🇿 Te Reo Māori (Maori)
mr	🇮🇳 मराठी (Marathi)
mn	🇲🇳 Монгол хэл (Mongolian)
my	🇲🇲 မြန်မာစာ (Burmese)
ne	🇳🇵 नेपाली (Nepali)
no	🇳🇴 Norsk (Norwegian)
or	🇮🇳 ଓଡ଼ିଆ (Odia)
ps	🇦🇫 پښتو (Pashto)
fa	🇮🇷 فارسی (Persian)
pl	🇵🇱 Polski (Polish)
pt	🇵🇹 Português (Portuguese)
pa	🇮🇳 ਪੰਜਾਬੀ (Punjabi)
qu	🇵🇪 Runasimi (Quechua)
ro	🇷🇴 Română (Romanian)
ru	🇷🇺 Русский (Russian)
sm	🇼🇸 Gagana Samoa (Samoan)
gd	🏴 Gàidhlig (Scots Gaelic)
sr	🇷🇸 Српски (Serbian)
st	🇱🇸 Sesotho (Sesotho)
sn	🇿🇼 ChiShona (Shona)
sd	🇵🇰 سنڌي (Sindhi)
si	🇱🇰 සිංහල (Sinhala)
sk	🇸🇰 Slovenčina (Slovak)
sl	🇸🇮 Slovenščina (Slovenian)
so	🇸🇴 Soomaali (Somali)
es	🇪🇸 Español (Spanish)
su	🇮🇩 Basa Sunda (Sundanese)
sw	🇹🇿 Kiswahili (Swahili)
sv	🇸🇪 Svenska (Swedish)
tg	🇹🇯 Тоҷикӣ (Tajik)
ta	🇮🇳 தமிழ் (Tamil)
tt	🇷🇺 Татар (Tatar)
te	🇮🇳 తెలుగు (Telugu)
th	🇹🇭 ไทย (Thai)
tr	🇹🇷 Türkçe (Turkish)
tk	🇹🇲 Türkmen dili (Turkmen)
uk	🇺🇦 Українська (Ukrainian)
ur	🇵🇰 اردو (Urdu)
ug	🇨🇳 ئۇيغۇرچە (Uyghur)
uz	🇺🇿 Oʻzbekcha (Uzbek)
vi	🇻🇳 Tiếng Việt (Vietnamese)
cy	🏴 Cymraeg (Welsh)
xh	🇿🇦 isiXhosa (Xhosa)
yi	🇮🇱 ייִדיש (Yiddish)
yo	🇳🇬 Yorùbá (Yoruba)
zu	🇿🇦 isiZulu (Zulu)