javascript - Adding Google Translate to a web site

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about Collectives
Teams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about Teams
Looking here Google Translate I get the following code.
<meta name="google-translate-customization" content="9f841e7780177523-3214ceb76f765f38-gc38c6fe6f9d06436-c"></meta>
<div id="google_translate_element">
<script type="text/javascript">
  function googleTranslateElementInit() {
    new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
But Looking here html-5-tutorial, at the top right, I see the following code:
<div class="translate">
  <div id="google_translate_element">
    <div dir="ltr" class="skiptranslate goog-te-gadget">
      <div id=":0.targetLanguage">
        <select class="goog-te-combo">
          <option value="">Select Language</option>
          <option value="af">Afrikaans</option>
          <option value="sq">Albanian</option>
          <option value="ar">Arabic</option>
          <option value="hy">Armenian</option>
          <option value="az">Azerbaijani</option>
          <option value="eu">Basque</option>
          <option value="be">Belarusian</option>
          <option value="bn">Bengali</option>
          <option value="bg">Bulgarian</option>
          <option value="ca">Catalan</option>
          <option value="zh-CN">Chinese (Simplified)</option>
          <option value="zh-TW">Chinese (Traditional)</option>
          <option value="hr">Croatian</option>
          <option value="cs">Czech</option>
          <option value="da">Danish</option>
          <option value="nl">Dutch</option>
          <option value="eo">Esperanto</option>
          <option value="et">Estonian</option>
          <option value="tl">Filipino</option>
          <option value="fi">Finnish</option>
          <option value="fr">French</option>
          <option value="gl">Galician</option>
          <option value="ka">Georgian</option>
          <option value="de">German</option>
          <option value="el">Greek</option>
          <option value="gu">Gujarati</option>
          <option value="ht">Haitian Creole</option>
          <option value="iw">Hebrew</option>
          <option value="hi">Hindi</option>
          <option value="hu">Hungarian</option>
          <option value="is">Icelandic</option>
          <option value="id">Indonesian</option>
          <option value="ga">Irish</option>
          <option value="it">Italian</option>
          <option value="ja">Japanese</option>
          <option value="kn">Kannada</option>
          <option value="ko">Korean</option>
          <option value="la">Latin</option>
          <option value="lv">Latvian</option>
          <option value="lt">Lithuanian</option>
          <option value="mk">Macedonian</option>
          <option value="ms">Malay</option>
          <option value="mt">Maltese</option>
          <option value="no">Norwegian</option>
          <option value="fa">Persian</option>
          <option value="pl">Polish</option>
          <option value="pt">Portuguese</option>
          <option value="ro">Romanian</option>
          <option value="ru">Russian</option>
          <option value="sr">Serbian</option>
          <option value="sk">Slovak</option>
          <option value="sl">Slovenian</option>
          <option value="es">Spanish</option>
          <option value="sw">Swahili</option>
          <option value="sv">Swedish</option>
          <option value="ta">Tamil</option>
          <option value="te">Telugu</option>
          <option value="th">Thai</option>
          <option value="tr">Turkish</option>
          <option value="uk">Ukrainian</option>
          <option value="ur">Urdu</option>
          <option value="vi">Vietnamese</option>
          <option value="cy">Welsh</option>
          <option value="yi">Yiddish</option>
        </select>
      Powered by 
      <span style="white-space: nowrap;">
        <a class="goog-logo-link" href="http://translate.google.com" target="_blank">
          <img style="padding-right: 3px;" src="http://www.google.com/images/logos/google_logo_41.png" width="37" height="13">
          Translate
      </span>
  <script>
    function googleTranslateElementInit() {
      new google.translate.TranslateElement({
        pageLanguage: 'en'
      }, 'google_translate_element');
  </script>
The former works on a live site only and not on a local computer and therfore I can not target and style it using CSS. Also it does not contain any SELECT and OPTION markup.
The later contains the SELECT and OPTION markup but if I copy and paste the whole code, it does not work on a live site.
I guess my question would be how to implement the google translate using the later markup?
                I think you should let the user decide to have a poor translation instead of offer this poor translation as your own.
– MatTheCat
                Apr 6, 2016 at 18:02
                Is there a way to amend this script to add an rel attribute to the  Powered by Translate <a> element in the html document?
– Wanderlust Consulting
                Apr 22, 2021 at 10:33
                Thanks for posting this question. I need something like this. Just a question: Does Google offer this as a free service?
– curious1
                Apr 4, 2022 at 15:00
Here's the markup that should work, both locally and remotely - copied from https://www.w3schools.com/howto/howto_google_translate.asp:
<div id="google_translate_element"></div>
<script>
    function googleTranslateElementInit() {
        new google.translate.TranslateElement(
            {pageLanguage: 'en'},
            'google_translate_element'
</script>
<script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
                That does not work. Althought fixing the path makes the SELECT show up on local computer, it does not have any OPTION elements in it and no markup is generated.
– Jawad
                Sep 3, 2012 at 8:00
                It works perfectly for me in Chrome. What browser are you using? If you're using Chrome or Firefox use the developer tools to view the "network" tab and then you can see which requests are failing.
– Robin Winslow
                Sep 3, 2012 at 8:04
                Oh sorry you are right that it doesn't generate a drop-down list. It uses an iFrame, which you won't be able to style. Apologies. I'll look into getting a drop-down to work.
– Robin Winslow
                Sep 3, 2012 at 8:06
                I updated it with code to remove "powered by Google Translate", but also with note that this breaks the Attribution Requirements: developers.google.com/translate/v2/… - though Google probably won't care much for small non-profit projects.
– Robin Winslow
                Sep 3, 2012 at 8:53
                Yeah if I were you I would wrap the whole thing in a <div> and use CSS to give it the right height so you don't get the jumping effect.
– Robin Winslow
                Sep 3, 2012 at 10:50
<div id="google_translate_element"></div>
<script type="text/javascript">
  function googleTranslateElementInit() {
    new google.translate.TranslateElement({
      pageLanguage: 'en',
      includedLanguages: 'es',
      layout: google.translate.TranslateElement.InlineLayout.SIMPLE
    }, 'google_translate_element');
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
                Above answers works, as needed but if you want to hide the google translate button and use limited languages, then you can customise it, by adding little bit of CSS or Javascript, as shown here:  qawithexperts.com/article/javascript/…
– user13993546
                Oct 6, 2022 at 15:35
function googleTranslateElementInit() {
  new google.translate.TranslateElement(
    {pageLanguage: 'en'},
    'google_translate_element'
                As with other answers, this could do with some explanation as to what this achieves exactly.
– Robin Winslow
                Nov 17, 2016 at 12:27
to allow google translate to be mobile friendly get rid of the layout section, layout: google.translate.TranslateElement.InlineLayout.SIMPLE 
<div id="google_translate_element">
<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>
It works on my site and it is mobile friendly. https://livinghisword.org/articles/pages/whoiscernandisourworld.php
2022 This legacy code works in mycase Github works without any Google API Keys
I modified the code of these guys gtranslate.io.
An example of how it works on my website https://pogonyalo.com in all modern browsers.
Updated: If you want to select what should be translated -
just adding class="notranslate" to the elements that shouldn´t be translated.
                good work! but wonder, is there any option to select what should be translated on page and what can be skipped?
– DevAnimal
                Apr 28, 2021 at 7:50
                Thanks for the info. I need something like this. A quick question: Does Google offer this as a free service?
– curious1
                Apr 4, 2022 at 15:00
                @curious1 Yes TRANSLATION is a basic free Google service for users. Here used JavaScript to translate your website content on the web browser side. The disadvantage of this approach is SEO. Because Google Bot will only crawl your website content in one source language.
– Ruslan Novikov
                Apr 5, 2022 at 19:38
                I would like to upvote but you provide a code with obfuscation and it doesn't work, and I can't debug it at all cause of that. Seriously, who obfusque a simple code like this ?? Downvoted
– Thomas Rbt
                Jun 8, 2022 at 18:27
<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'ko', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'ar', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'ar', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
                can you please elaborate a bit ? code-only answer might be flagged as "low quality" and removed.
– Gilles Gouaillardet
                Sep 20, 2017 at 7:39
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'hi', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'fr', layout: google.translate.TranslateElement.FloatPosition.TOP_RIGHT}, 'google_translate_element');
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
                While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value.
– rollstuhlfahrer
                Apr 13, 2018 at 19:10
<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script type="text/javascript">
  function googleTranslateElementInit() {
      new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
</script>
Implementing Google translate html code is very easy. Use this code on your project, hope it will help you.
    <div id="google_translate_element"></div>
<script> 
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'en'
  }, 'google_translate_element');
</script>
<script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script> 
//First create a new js file with the translate-google.js and content given below.
// You can update css as per your requirements.
  // translate-google.js
(function () {
var gtConstEvalStartTime = new Date();
function d(b) {
    var a = document.getElementsByTagName("head")[0];
    a || (a = document.body.parentNode.appendChild(document.createElement("head")));
    a.appendChild(b)
function _loadJs(b) {
    // console.log(b);
    var a = document.createElement("script");
    a.type = "text/javascript";
    a.charset = "UTF-8";
    a.src = b;
function _loadCss(b) {
    var a = document.createElement("link");
    a.type = "text/css";
    a.rel = "stylesheet";
    a.charset = "UTF-8";
    a.href = b;
function _isNS(b) {
    b = b.split(".");
    for (var a = window, c = 0; c < b.length; ++c)
        if (!(a = a[b[c]])) return !1;
    return !0
function _setupNS(b) {
    b = b.split(".");
    for (var a = window, c = 0; c < b.length; ++c) a.hasOwnProperty ? a.hasOwnProperty(b[c]) ? a = a[b[c]] : a = a[b[c]] = {} : a = a[b[c]] || (a[b[c]] = {});
    return a
window.addEventListener && "undefined" == typeof document.readyState && window.addEventListener("DOMContentLoaded", function () {
    document.readyState = "complete"
}, !1);
if (_isNS('google.translate.Element')) {
    return
}(function () {
    var c = _setupNS('google.translate._const');
    c._cest = gtConstEvalStartTime;
    gtConstEvalStartTime = undefined;
    c._cl = 'en';
    c._cuc = 'googleTranslateElementInit2';
    c._cac = '';
    c._cam = '';
    c._ctkk = eval('((function(){var a\x3d3002255536;var b\x3d-2533142796;return 425386+\x27.\x27+(a+b)})())');
    var h = 'translate.googleapis.com';
    var s = (true ? 'https' : window.location.protocol == 'https:' ? 'https' : 'http') + '://';
    var b = s + h;
    c._pah = h;
    c._pas = s;
    c._pbi = b + '/translate_static/img/te_bk.gif';
    c._pci = b + '/translate_static/img/te_ctrl3.gif';
    c._pli = b + '/translate_static/img/loading.gif';
    c._plla = h + '/translate_a/l';
    c._pmi = b + '/translate_static/img/mini_google.png';
    c._ps = b + '/translate_static/css/translateelement.css';
    c._puh = 'translate.google.com';
    _loadCss(c._ps);
    _loadJs(b + '/translate_static/js/element/main.js');
})();
})();
// After that include that file in your html file.
{{-- Google Language Translator  START --}}
<style>
.google-translate {
    display: inline-block;
    vertical-align: top;
    padding-top: 15px;
.goog-logo-link {
    display: none !important;
.goog-te-gadget {
    color: transparent !important;
#google_translate_element {
    display: none;
.goog-te-banner-frame.skiptranslate {
    display: none !important;
body {
    top: 0px !important;
</style>
<script src="{{asset('js/translate-google.js')}}"></script>
<script type="text/javascript">
function googleTranslateElementInit2(){
    new google.translate.TranslateElement({
                    pageLanguage:'en',
                    includedLanguages: 'en,es',
        // https://ctrlq.org/code/19899-google-translate-languages
        // includedLanguages: 'en,it,la,fr',
        // layout:     google.translate.TranslateElement.InlineLayout.SIMPLE,
        autoDisplay:true
    },'google_translate_element2');
    var a = document.querySelector("#google_translate_element select");
    // console.log(a);
    if(a){
        a.selectedIndex=1;
        a.dispatchEvent(new Event('change'));
</script>
<ul class="navbar-nav my-lg-0 m-r-10">
    <div class="google-translate">
        <div id="google_translate_element2"></div>
{{-- Google Language Translator  ENDS --}}
                Without any commenting what the various parts do this is useless to those who come here to ask because they have no clue.
– Thomas Tempelmann
                Jan 28, 2023 at 12:37
<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'th,zh-CN,zh-TW', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
                I've edited this so that your HTML is visible, but it could probably do with some explanation as to what you're trying to do.
– andrewsi
                Jun 28, 2016 at 0:14
<script type="text/javascript"> 
    (function(){
        var d="text/javascript",e="text/css",f="stylesheet",g="script",h="link",k="head",l="complete",m="UTF-8",n=".";
        function p(b){
            var a=document.getElementsByTagName(k)[0];
            a||(a=document.body.parentNode.appendChild(document.createElement(k)));
            a.appendChild(b)}
        function _loadJs(b){
            var a=document.createElement(g);
            a.type=d;
            a.charset=m;
            a.src=b;
            p(a)}
        function _loadCss(b){
            var a=document.createElement(h);
            a.type=e;
            a.rel=f;
            a.charset=m;
            a.href=b;
            p(a)}
        function _isNS(b){
            b=b.split(n);
            for(var a=window,c=0;c<b.length;++c)
                if(!(a=a[b[c]])) return ! 1;
            return ! 0}
        function _setupNS(b){
            b=b.split(n);
            for(var a=window,c=0;c<b.length;++c)
                a.hasOwnProperty?a.hasOwnProperty(b[c])?a=a[b[c]]:a=a[b[c]]={}:a=a[b[c]]||(a[b[c]]={});
            return a}
        window.addEventListener&&"undefined"==typeof document.readyState&&window.addEventListener("DOMContentLoaded",function(){document.readyState=l},!1);
    if (_isNS('google.translate.Element')){return}
    (function(){
        var c=_setupNS('google.translate._const');
        c._cl='en';
        c._cuc='googleTranslateElementInit1';
        c._cac='';
        c._cam='';
        c._ctkk=eval('((function(){var a\x3d2143197373;var b\x3d-58933561;return 408631+\x27.\x27+(a+b)})())');
        var h='translate.googleapis.com';
        var s=(true?'https':window.location.protocol=='https:'?'https':'http')+'://';
        var b=s+h;
        c._pah=h;
        c._pas=s;
        c._pbi=b+'/translate_static/img/te_bk.gif';
        c._pci=b+'/translate_static/img/te_ctrl3.gif';
        c._pli=b+'/translate_static/img/loading.gif';
        c._plla=h+'/translate_a/l';
        c._pmi=b+'/translate_static/img/mini_google.png';
        c._ps=b+'/translate_static/css/translateelement.css';
        c._puh='translate.google.com';
        _loadCss(c._ps);
        _loadJs(b+'/translate_static/js/element/main.js');
    })();
    })();
</script> 
                Please edit with more information. Code-only and "try this" answers are discouraged, because they contain no searchable content, and don't explain why someone should "try this". We make an effort here to be a resource for knowledge.
– Brian Tompsett - 汤莱恩
                Aug 13, 2016 at 9:31