How to Add Google Translate to Your Website

10 May 2022 | Javascript

In this tutorial, you will learn how to add google translate to your website. Google Translate is used to translate text from one language to another one. It is a free tool provided by Google to make your website multilingual. Google Translate supports more than 100 languages. you need to add some code snippets to your web page to create a multilingual website. This code automatically adds a Google Translate select box on your web page, and you can translate the website content by selecting a language in the select box.

Just follow these steps to add google translate button on your webpage.

Step 1: Add a <div>

Add a <div> element with the attribute id "google_translate_element" where you want to create a language selection box

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

Step 2: Add Script

Add a reference to the google translation API

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

Step 3: Add a javascript function

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

Complete Code:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>How to Add Google Translate to Your Website</title>
</head>
<body>

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

	<ul>
		<li>Home</li>
		<li>About Us</li>
		<li>Contact Us</li>
	</ul>



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

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

</body>
</html>

Now the above code is ready to run.

Buddy! I hope you relished the tutorial, and it was good to see you again. Keep learning. Keep visiting.

Build With PHP

how to add google translate to your website