How TO - Google Translate
Clash Royale CLAN TAG#URR8PPP <!--
main_leaderboard, all: [728,90][970,90][320,50][468,60]-->
How TO - Google Translate
❮ Previous
Next ❯
Learn how to add a Google Translate button on your web page.
Example
Try it Yourself »
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 »
<!--
mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]-->
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 »
❮ Previous
Next ❯