How to translate your web app in 133 languages

Google Translate is a free multilingual machine translation service. It can translate the Website's text content from one language to another. It offers a huge list of languages to translate and has an efficient, reliable and easy way to translate the webpage in whatever language the user wants and It supports over 100 languages.

To directly translate your documents, you can go to translate.google.com, but to add it on your website, you need to add Google Translate Script on the webpage.

To use google translate script, you need to import google api containing googleTranslateElementInit() function with new google.translate.TranslateElement() and google_translate_element id.

Step 1: Set the CDN path to Google Translate API. This path will add the script of Translator on your page.

<script
    type="text/javascript"
    src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"
></script>

Step 2: Add a <div> element with id=google_translate_element. It is a predefined id in google's script. This div element will be used by the Translator API to give the user a list of languages.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Google Translate</title>
    </head>
    <body>
        <h1>Your Web Page</h1>
        <div id="google_translate_element"></div>
    </body>
</html>

Step 3: Add Script to choose default language of the webpage. Every language has a unique code in Translator, you can check the list from here. We have selected American English as default, and the code is 'en'.

<script type="text/javascript">
    function googleTranslateElementInit() {
        new google.translate.TranslateElement({ pageLanguage: 'en' }, 'google_translate_element');
    }
</script>

Now, add all these together and you are ready to use the Translator.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Google Translate</title>
    </head>
    <body>
        <h2>Your Web Page</h2>
        <p>Click on the dropdown button to translate.</p>
        <p>Translate this page:</p>

        <div id="google_translate_element"></div>

        <p>You can translate the content of this page by selecting a language in the select box.</p>

        <script type="text/javascript">
            function googleTranslateElementInit() {
                new google.translate.TranslateElement({ pageLanguage: 'en' }, 'google_translate_element');
            }
        </script>

        <script
            type="text/javascript"
            src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"
        ></script>
    </body>
</html>

Output

google-translate

I translated my MiroTalk SFU & MiroTalk P2P web app into 133 languages using this method. You can do it too, without going crazy to translating your web app!

Note: There is no better solution than human translation if you require high accuracy. A machine simply doesn't get the full context of what is being translated.

Good fun!

How to translate your web app in 133 languages with few line of code.

Did you find this article valuable?