How to add Google Translate script to your website

by Jay Mistry · Jan 17, 2021

Web-Development

In this post, I will show you how you can add Google Translate button to your website.

Check it out

See the Pen Add Google Translate to your site by Tech no Kami (@technokami) on CodePen.

How to add Google Translate Button

Let’s take a simple HTML file for our example. In this file, where we want to add the Google Translate button, we insert a div with an id of google-translate-dropdown ( this can be anything you want ).

<!DOCTYPE html>
<html>

<head>
  <title>My Google Translate Page</title>
</head>

<body>
  <h1>Welcome to my page</h1>
  <p>I will show you how to add Google Translate to your site</p>

  <p>Translate this page here:</p>
  
  <div id='google-translate-dropdown'></div>
</body>

</html>

Import Google Translate script

Now we import the necessary Google Translate script with the snippet below:

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

Add function to initiate Google Translate button

Use the following snippet to initiate the Google Translate button.

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

We can set the default page language using the pageLanguage parameter, and we need to add our Google Translate Button id which we set in the HTML snippet above, which is google-translate-dropdown.

And viola! The button is added to our site and we can change our site’s language using it.

Here’s how the code will look in the end—

<!DOCTYPE html>
<html>

<head>
  <title>My Google Translate Page</title>
</head>

<body>
  <h1>Welcome to my page</h1>
  <p>I will show you how to add Google Translate to your site</p>

  <p>Translate this page here:</p>
  <div id='google-translate-dropdown'></div>

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

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

</html>

Button Layouts

There are 3 different layouts available for the Google Translate button—

Default Layout

This is the default layout which we used in our example above.

Horizontal Layout

For this layout, modify our JS code and add a layout parameter google.translate.TranslateElement.InlineLayout.HORIZONTAL.

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

The result will look like this— Horizontal layout of Google Translate Button

Simple Layout

For this layout, modify our JS code and add a layout parameter google.translate.TranslateElement.InlineLayout.SIMPLE.

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

The result will look like this— Simple layout of Google Translate Button

Thank you

That’s how you add the Google Translate script to your website.