THE WORLD'S LARGEST WEB DEVELOPER SITE

How TO - Google Translate


Learn how to add a Google Translate button on your web page.



Google Translate Button

Start with a simple basic web page.

Add a <div> element with the id "google_translate_element":

Example

<!DOCTYPE html>
<html>
<body>

<h1>My Web Page</h1>

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

</body>
<html>
Try it Yourself »

Add a reference to the translate API at google.com:

Example

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

Add a javascript function:

Example

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

And you are ready to translate the content of your page:

Example

<!DOCTYPE html>
<html lang="en-US">
<body>

<h1>My Web Page</h1>

<p>Hello everybody!</p>

<p>Translate this page:</p>

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

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

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

</body>
</html>
Try it Yourself »

Button Modes

There are currently three different design modes for the Google Translate button.

Example

Vertically:

Try it Yourself »

Example

Horizontally:

Try it Yourself »

Example

A dropdown menu, with no other text:

Try it Yourself »