How to Add Google Translate to Your Website
calendar_month 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.
Ashwani Kumar
I'm a dedicated full-stack developer, entrepreneur, and proud owner of buildwithphp.com. I reside in India, where I draw inspiration to create helpful tutorials and tips for fellow artisans. I'm deeply passionate about technologies like Bootstrap, PHP, CodeIgniter, Laravel, Node, React, JavaScript, and jQuery. I believe in working hard consistently, which keeps me motivated and driven. Challenges are opportunities to learn, setbacks are lessons. I find inspiration in the endless potential of technology and aim to make a meaningful impact with my work.
Buddy! I hope you relished the tutorial, and it was good to see you again. Keep learning. Keep visiting.
