Adding Google Translate to your website can significantly enhance user experience by making your content accessible to a global audience. This guide provides detailed steps on integrating Google Translate into your website.
Within this post, we will explain how to add google translate widget to your website, so that you can use google translation service for translation into different language.
Steps to Add Google Translate
- Access Google Translate Tools:
- Go to the Google Translate Website.
- Sign in with your Google account if necessary.
- Get the Code:
- Click on the “Add to Your Website Now” button.
- Select your website’s language and the languages you want to offer for translation.
- Customize the appearance of the Google Translate button.
- Copy the provided HTML code.
The code can be looking as below and we need to copy and paste it just before the closing of the body tag,
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</body>Now, we will need to add relevant javascript code from google to the place where, we intend to show the google translation widget. Copy below code and paste where you want the translation widget to be seen to website visitor.
<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'bn,gu,hi,kn,ml,mr,pa,ta,te', layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL}, 'google_translate_element');
}
</script>The above code shows only the selected Indian languages into the dropdown menu of the translator. If you set the layout to VERTICAL, you will see the “Powered by” message below the dropdown menu, where as HORIZONTAL layout, it will be shown adjacent to dropdown.
If you want to have all the languages shown into dropdown menu, use below code i.e. which removes included Languages as shows all default languages supported by google translate.
<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>Below code is the final example, which also shows how you can track the translations using the google analytics id.
<!DOCTYPE html>
<html lang="en-US">
<body>
<h4> Vegetables are parts of plants that are consumed by humans or other animals as food. The original meaning is still commonly used and is applied to plants collectively to refer to all edible plant matter, including the flowers, fruits, stems, leaves, roots, and seeds. Reference: Wikipedia </h4>
<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'bn,gu,hi,kn,ml,mr,pa,ta,te', layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL, gaTrack: true, gaId: 'YOUR_GOOGLE_ANALYTICS_ID'}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</body>
How can I get my website Google translated? Can you help?
Hi, you can use the code as mentioned in this post, so you will get an widget from google translate like you can see on this website https://www.greenecosystem.in/fconn/ which will give an options to choose the language to the user. Thanks
Google translation not working after uploading to online server