Home » How to » How to add google translate to your website

How To Google Translate Button on Website

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. It supports over 100 languages. Use this website translator to convert webpages into your choice of language.

So, How to add Google Translate Button on a website?

To directly translate your documents, you can go to https://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.

We will use a CDN path, provided by Google, to implement the google translator. Just follow the whole tutorial to earn how to add google translate ( translate google com ). You can download complete html code of examples from Try-it Editor.


Google Translate Button

We will implement it in a simple web page, but you can make a beautiful design and then place the translator button properly.

Google Translate implementation will need three steps:

  • Set up CDN Path for Google API.
  • Set up a div element to place Translator.
  • Set up Default Language for the Webpage.

Let's implement all the steps:

Step 1: Set the CDN path to Google Translate API. This CDN will only work if you have an active internet connection otherwise not. This path will add the script of Translator on your page.

Google Translate API Script

<script type="text/javascript" src="//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 Website Heading</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'.

Google Translate: Select Default Language

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

Now, add all these together. You are ready to use the Translator. Go to the Try-it editor to see the results. You can also download the full code from the Editor. Click on Try This Code.


<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Google Translater for Website </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> <script type="text/javascript"> function googleTranslateElementInit() { new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element'); } </script> <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script> <p>You can translate the content of this page by selecting a language in the select box.</p> </body> </html>

Output

Google Translater for Website

Your Web Page

Click on the dropdown button to translate.

Translate this page:

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


Translate only a Specific segment

If you want to change only one paragraph and want others to remain in the default language, then what would you do?

There are two classes which can be used, translate and notranslate.

  • translate: It is the default class. There is no need to declare it.
  • notranslate: If you don't want to translate any particular paragraph then use class="notranslate". The translator will not translate the paragraph and it will remain in it default language. The rest of the text content on the page will be translated.

Look at the example below to understand it easily, download the code. Try it in the Editor.


<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Google Translater for Website </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> <script type="text/javascript"> function googleTranslateElementInit() { new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element'); } </script> <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script> <p class="notranslate"> This Paragraph will remain same because it is using notranslate class.</p> <p class="translate"> This Paragraph will change because it is using translate class. </p> </body> </html>

We've learned how to translate a website through google translate script, now we will learn how to translate a website without Coding means using third party app the "Chrome Translate Extension".

For this you just need to search for google translate extension on your browser and click on "Add to Chrome". At the time of Adding this extension to chrome (or any browser) it will ask your permition (through popup message) and alert you that what kind of data it'll access, just click on add button. Then a small file will download on your computer, and here your google translate externsion is successfully intregrated to your browser.

Now how to translate a website is still a question, So let's start and check how to translate a website or any web page, whenver you visit to any website which have different language content, you just need to click on "Google translate extension" which is jsut top right of your browser and click on "translate" or select your language. That's it. It will change whole website to your prefered language. There is also a feature on that google translate plugin from where you can change language permanently. For this you've click on translate extension and it show 3 dot setting menu and slect "always translate". So whenever you'll visit on that website it will translate langauge automatically.


Summary: In this tutorial we learned how to translate a website using coding (Google Translate Script) or without coding.