The Flout Translate Dashboard is the place to configure your website translations and language selector. Log in using the account you created during setup. But dont forget that you need to paste the code snippet into your web pages for the translator to work.

Using The Translation Editor

The editor works with the real text currently visible in the live page DOM. This is useful for menus, buttons, headings, product names, short labels, and other page text that needs a manual decision.

• Original shows the base-language text found on the page.
• Override is where your preferred translated text is saved.
• Lang is the target language code for the override, such as fr, de, or mi.
• Rescan Page refreshes the list after menus, popups, tabs, or dynamic content have appeared.
• Save All Changes stores the editor changes for the website.

Use the row action button to open the detailed editor, copy/add another language row, delete an entry, or toggle NoTranslate. A NoTranslate row tells Flout Translate to leave that live DOM text in the original language instead of translating it.

Most Flout Translate configuration belongs in the Dashboard. The developer tools below are for page-level exclusions, manual selector placement, advanced CSS styling, and custom integrations.

Careful consideration, an understanding of HTML/CSS, and proper testing is advised.

Exclude Elements From Translation
This is an important feature so you can block automatic translations where translation is not appropriate.

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. You can also use the dashboard editor's NoTranslate action for specific live DOM text when you do not want to change your website HTML.

<div class="notranslate">
    <p>This content will not be translated.</p>
</div>

<nav>
    <a href="/">Home</a>
    <a href="/contact">Contact</a>
    <ft-selector></ft-selector>
</nav>

/* ::part(container) → the wrapper around the button and dropdown panel. */
ft-selector::part(container) {
    position: relative;
}

/* ::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(icon) → the selector icon image, if one is configured. */
ft-selector::part(icon) {
    height: 22px;
    width: auto;
}

/* ::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. */
ft-selector::part(item) {
    padding: 5px 10px;
    cursor: pointer;
}

ft-selector::part(item):hover {
    background: #f5f5f5;
}
    

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