google.translate.TranslateElement part of page

What is google.translate.TranslateElement part of page?

If you have ever used Google Translate on a website, you might have noticed a widget that pops up on the page allowing you to translate the content into various languages. This widget is called google.translate.TranslateElement and it is a part of the Google Translate API.

How to add google.translate.TranslateElement to your website?

If you want to add this widget to your website, you need to follow these steps:

  • First, you need to get an API key from Google Translate API.
  • Then, you need to add the following code to your HTML page:

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

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

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

The first line of code creates a div with an id of "google_translate_element". This is where the widget will be placed on your page.

The second part of the code is a JavaScript function that initializes the google.translate.TranslateElement. This function sets the pageLanguage to 'en' (English) and the layout to InlineLayout.SIMPLE (a simple layout for the widget).

The third part of the code loads the Google Translate API and calls the googleTranslateElementInit function when it is ready.

Conclusion

Adding google.translate.TranslateElement to your website can be a great way to make your content accessible to a wider audience. With just a few lines of code, you can give your users the ability to translate your content into multiple languages.

Subscribe to The Poor Coder | Algorithm Solutions

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.
[email protected]
Subscribe