Skip to main content

Examples

Learn through Website translator implementation examples.

Change the source code path and Client-ID in the examples to the ones from your generated code. See Full integration guide > Create a new Website translator.

Mark some content as not translatable or different language​

Mark parts of the content you don't want to be translated with translate="no". Mark elements with the corresponding language attribute if it differs from the main page content.

<html lang="en"><head><!-- 👇 Enter the correct source code path --><script src="widget.js"></script></head><body><div class="website-translator"></div><p>This will be translated</p> <!-- This will be translated --><p translate="no">This will not be translated</p> <!-- This will not be translated --><p lang='ja'>これをčĻģしãĶ</p> <!-- This will not be translated --><ul translate="no"> <li>Coffee</li> <!-- This will not be translated --> <li translate="yes">Tea</li> <!-- This will be translated --> <li>Milk</li> <!-- This will not be translated --></ul></body><footer> <script>// Configure plugin<!-- 👇 Change XXXXXXXXXXX to your Client-ID --> WebsiteTranslator.Options.api.clientId = "XXXXXXXXXXX"; WebsiteTranslator.Options.ui.toolbarPosition = "top" WebsiteTranslator.Initialize() </script></footer></html>

Async defer load​

<html lang="en-US">    <head>        <!-- 👇 Enter the correct source code path -->        <script src="widget.js" async defer onload="InitWebsiteTranslation()"></script>    </head>    <body>        <div class="website-translator"></div>        <script>            function InitWebsiteTranslation(){                // Configure                <!-- 👇 Change XXXXXXXXXXX to your Client-ID -->                WebsiteTranslator.Options.api.clientId = 'x-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'                // ...                // Initialize and run translations                WebsiteTranslator.Initialize()            }        </script>    </body></html>

Defer load​

<html lang="en-US">    <head>       <!-- 👇 Enter the correct source code path -->        <script src="widget.js" defer></script>    </head>    <body>        <div class="website-translator"></div>                <script>            window.onload = function(){                // Configure                 <!-- 👇 Change XXXXXXXXXXX to your Client-ID -->                WebsiteTranslator.Options.api.clientId = 'x-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'                // ...                // Initialize and run translations                WebsiteTranslator.Initialize()            }        </script>    </body></html>

Add third party pretranslated languages to menu​

<!DOCTYPE html><head>    <!-- 👇 Enter the correct source code path -->    <script src="widget.js"></script>    </head><body>    <div class="website-translator"></div><p>This is an example</p>  </body><footer>    <script>         <!-- 👇 Enter the correct source code path -->        WebsiteTranslator.Options.api.clientId = 'x-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'        var params = new URLSearchParams(window.location.search);        //   Languages which are already pretranslated and don't need to be machine translated        var thirdPartyLanguages = ["de", "fr", "sv"];        WebsiteTranslator.Options.translation.thirdPartyTranslationLanguages = thirdPartyLanguages;        WebsiteTranslator.Options.translation.onLanguageSelected = function(selectedLanguage) {            return new Promise(function(resolve) {                var translationHandled = false;                console.info("Selecting language", selectedLanguage);                if (thirdPartyLanguages.includes(selectedLanguage)) {                    console.info("Switching to third-party language with external code");                    translationHandled = true;                    // Third party translation                    var newUrl = new URL(window.location.href)                    newUrl.searchParams.set("lang", selectedLanguage)                    window.location.href = newUrl.href                }                resolve(translationHandled);            });        };        // Initialize and run translations        WebsiteTranslator.Initialize()    </script></footer></html>