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.

Example:

<!DOCTYPE html>
<html lang="en-US">

<head>
	<title>
		Hello and welcome to javatpoint website. You will see the google translator in this webpage.
	</title>
</head>

<body>
	<p>Hello, everyone</p>
	<p>Welcome to Javatpoint!</p>

	<p>
		select any preferred language from this dropdown menu to translate the below text written on the page:
	</p>

	<div id="google_translate_element"></div>

	<!-- function which will translate the web page using google translator -->

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

<!-- Script code for google translator API -->
	<script type="text/javascript" 
	src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">
	</script>

	<p>
		This text which you are reading can be converted into any language you want using Google translator. We have added the button on the top of the page and you have to just choose the preferred language.
	</p>
</body>

</html>

Output:

How to Add Google Translate Button on Your Webpage

Explanation:

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:

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.

Example 2:

<!DOCTYPE html>
<html lang="en-US">

<head>
	<title>
		Hello and welcome to javatpoint website. you will see the google translator in this webpage
	</title>
</head>

<body>
	<p>Hello everyone and how are you guys!</p>
	<p>Welcome to Javatpoint</p>

	<p>
		select any preferred language from this dropdown menu to translate the below text written on the page:
	</p>

	<div id="google_translate_element"></div>

	<!-- function which will tranlate the web page using google translator -->

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

<!-- Scipt code for goole translator api -->
	<script type="text/javascript" 
	src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">
	</script>
	<h1 id="random"> only this will be translated</h1>
	<img src="img1.png"/>
	<p>
		This text which your reading can be converted into any language you want using Google translator. we have added the button on the top of the page and you have to just choose the preferred language.
		My name is Ayush Kumar Gupta persuing B.Tech. from IIIT kota 2023 , Jaipur and working for Javatpoint.
	</p>
</body>

</html>

Output:

Explanation:

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.

Next Topic<body> alink Attribute in HTML

← prev next →