Google translate widget in an HTML page

What is Google translate widget?

The Google Translate widget adds translation functionality to web sites.

This widget enables visitors to translate the content of the website into various languages with just selecting a language.

Now-a-days, Google offers different cloud services for translation.

Adding Google Translate widget to a web page:

1. Add an HTML <div> element with id="google_translator_div" in your HTML page that you want to translate. This 'div' will contain the Google translate button.

2. Add a JavaScript function named 'translateElement()' inside <script> element and add the code 'new google.translate.TranslateElement({ pageLanguage: 'en' }, 'google_translator_div');' to call the google 'TranslateElement()' function. In the function, pageLanguage: 'en' argument is passed to set English as default language of the page while 'google_translator_div' is the id of div element to be used as container for Google translate button.

3. Add the following Google translate JavaScript link. In the link, translateElement is function name you have created earlier passed as parameter.

Here is the complete code in a sample HTML page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google Translate Widget</title>
</head>
<body>

<div id="google_translator_div"></div>

<h2>
        How to add Google translate widget to a webpage.
    </h2>

<p> 1. Create a div with id="google_translator_div" in your html page. This div will contain the Google translate button.</p>
    <p> 2. Add translateElement() JavaScript function.</p>
    <p> 3. Add Google translate widget JS link.</p>

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

</body>
</html>

In the following Live Code Playground, you can try the sample page with 'Google Translate Widget'

Live Code Playground

In the following HTML code editor, you can practice the above code by adding more text to the html elements and translating them in different languages. Click the 'Run Code' button to render the code; the rendered page will be displayed in the following HTML Code Output frame. Practice until you become comfortable and proficient with your code.

HTML Online Editor

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google Translate Widget</title>
</head>
<body>

<div id="google_translator_div"></div>

<h2>
        How to add Google translate widget to a webpage.
    </h2>

<script type="text/javascript">
        function translateElement() {
            new google.translate.TranslateElement({ pageLanguage: 'en' }, 'google_translator_div');
        }
    </script>
    
    <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=translateElement"></script>

</body>
</html>

HTML Code Output

More Code Examples:

Python Code Examples

JavaScript Code Examples

Java Code Examples

C# Code Examples

C Code Examples

C++ Code Examples

CSS Code Examples

How to add Google translate widget to an HTML page

What is Google translate widget?

Adding Google Translate widget to a web page:

Here is the complete code in a sample HTML page:

In the following Live Code Playground, you can try the sample page with 'Google Translate Widget'

Live Code Playground