Making Multi-Lingual Website in 2 minutes

Yash NirmalYash Nirmal
1 min read

There are only 2 simple steps

  1. Make your website

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Simple Website</title>
  </head>
  <body>
    <h1 style="text-align:center">Simple Multilingual Website</h1>
    <h2 style="text-align:center">Like and follow for more!</h2>    
  </body>
</html>

  1. Integrate Google translate

    To integrate the Google Translate functionality, we will first load the Google translate API script https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit

    After that we will add a div on top of the website having id google_translate_element. In the div we load the Google Widget using the below script.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My Simple Website</title>

    <!-- Loading the Google Translate API -->
    <script type="text/javascript" defer src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

    <script defer type="text/javascript">
      // assigning the element having id 'google_translate_element' to be the Google translate widget and assigning the default language to be English(en)
      function googleTranslateElementInit() {
        new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
      }
    </script>

  </head>
  <body>
    <!-- Below div will act the Google Translate widget -->
    <div style="text-align:center" id="google_translate_element"></div> 
    <h1 style="text-align:center">Simple Multilingual Website</h1>
    <h2 style="text-align:center">Like and follow for more!</h2>    
  </body>
</html>

YEP! That's all. We have our multilingual website ready!

GitHub Gist Link : https://gist.github.com/yashnirmal/282c9e69d13bb2667620d5d94eb631b1

Follow for more Web Dev related content

1
Subscribe to my newsletter

Read articles from Yash Nirmal directly inside your inbox. Subscribe to the newsletter, and don't miss out.

HTML5google translateGoogleWeb DevelopmentAPIs

Written by

Yash Nirmal
Yash Nirmal

I am a full-stack MERN developer, sharing my knowledge and journey