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.
