Given below is a simple HTML page, which has scripts for Google Translator-
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6. <title>Google Translator - Basic Translation</title>
  7. <style>
  8. body {
  9. top: 0 !important;
  10. }
  12. .goog-te-banner-frame {
  13. display: none;
  14. }
  15. </style>
  16. </head>
  18. <body>
  19. <div id="google_translate_element">
  20. </div>
  21. <script type="text/javascript">
  22. function googleTranslateElementInit() {
  23. new google.translate.TranslateElement({
  24. pageLanguage: 'en',
  25. layout: google.translate.TranslateElement.InlineLayout.SIMPLE
  26. }, 'google_translate_element');
  27. }
  28. </script>
  29. <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
  30. <br />
  31. <div>
  32. Hi, Good morning! This is a simple text for testing the Google's translator.
  33. </div>
  34. </body>
  36. </html>
While running page, shown above, in the Browser, Google automatically creates a dropdown structure at the top of the page, inside div provided by us with ID "google_translate_element".


We can reposition this div to our desired position, using css.

The default language was set as English. While clicking the dropdown, we will get a list of languages, available for the translation.

Clicking on any of the language will make a complete Webpage translated to that particular language. Here, the Webpage is translated to Spanish.


For more details of implementing a translator in your Website, please visit this link. Hope, this will be helpful for someone out there.

1 Comment

Join the conversation! Your thoughts help the community grow.

  • Anurag JoshiPosted Jul 8, 2021, 2:54 AM

    I want to implement Hindi typing in my website, i.e. implement a form that will allow typing in Hindi. How do I do that?