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.
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
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
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:
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.
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.
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
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.
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.
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,
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.
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.