How to Add Google Translate Button on Your Webpage?
What is Google Translate?
Google translate is the service provided by Google in which we can translate the text into any language we want with just one click. Google translate service supports mobile apps and websites, and it provides APIs, so developers can deal with it and use it in an efficient manner. It supports more than 100 languages, including Hindi also.
With the help of Google translator, developers do not need to create web pages in multiple languages. He creates the webpage in a single language, and the user can translate the web page according to his preferred language.
There can be various methods also apart from this method to translate the web page.
We will create the web page using HTML and CSS and implement the Google translate functionality to our web page.
In the above example, we have implemented the Google translator service on our web page. We have created one HTML page which contains some paragraphs describing about the page. Then in the script tag, we have used the function which takes two parameters: one is the default language which we have set to English, and the second one is the target element. We have created another script tag in which we inserted the API provided by the Google developers so that we can use the feature of Google translator on our web page.
When we run the code in the browser, it displays the web page with one drop-down menu, from where we can select the preferred language we want to translate. Wwe choose the HINDI language and we got the following output:
Note: Google translator method is not the best method to translate the web page due to certain reasons like:
You cannot control the content which you are translating.
You cannot translate the text on the images, which makes it very inefficient.
In the above code, we have inserted an image and some text and created the web page. Now we have implemented the same code to put the Google translator button. In the image, there are some texts that are written, but when we choose some preferred language to translate the given page, it ignores the image. It only translates the normal text, not the images, which is a drawback of the Google translator.