Quickly add Google translate widget button to any website

Aman Jain,

Google translator is most popular translation engine to translate any word into any language. Translation of complete website can be a hectic task to developer but using the Google translation we can easily translate complete website into any language.

By adding the Google translate widget to website it increase the SEO visibility and as well reader preferred language.

We can integrate Google translation easily through the quick simple steps as below

Step 1 : Create a webpage

First step to create a simple website index.html or use any existing page.

<!DOCTYPE html>
<html>
<body>

<h1>Readerstacks.com Google Translate example</h1>

  <div id="google_translate_button"></div>
  <p>This is a dummy text to translate into any language</p>
</body>
<html>

As you can see we added simple html to page and a div with id google_translate_button to add the Google translation button to it.

Step 2 : Add translation javascript

Now add JavaScript script to page 

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

We also added googleTranslateInit as a callback function to init our function on load.

Step 3 : Initialize Google translation

After adding the JavaScript element.js of translation we need to initialize it as below

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

So complete html and JavaScript

<!DOCTYPE html>
<html>
<body>

<h1>Readerstacks.com Google Translate example</h1>

  <div id="google_translate_button"></div>

  <p>This is a dummy text to translate into any language</p>
</body>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateInit"></script>
<script type="text/javascript">
    function googleTranslateInit() {
      new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_button');
    }
</script>
<html>

Live Preview : https://stackblitz.com/edit/web-platform-uldq2v

Uncategorized

Related Posts