You can add this smart plug to your Freshchat account and get Google Translate right within your web.freshchat.com.


For instructions on how to add a smart plug, refer Working with Smart Plugs.


Sample code snippet:

<script>
var googleTranslateConfig = {
  targetLanguage : "EN",
  googleTranslateApiKey: "GOOGLE_CLOUD_TRANSLATE_API_KEY" 
};
</script>
<script>
var languages = [
      {
        "language": "af",
        "name": "Afrikaans"
      },
      {
        "language": "sq",
        "name": "Albanian"
      },
      {
        "language": "am",
        "name": "Amharic"
      },
      {
        "language": "ar",
        "name": "Arabic"
      },
      {
        "language": "hy",
        "name": "Armenian"
      },
      {
        "language": "az",
        "name": "Azerbaijani"
      },
      {
        "language": "eu",
        "name": "Basque"
      },
      {
        "language": "be",
        "name": "Belarusian"
      },
      {
        "language": "bn",
        "name": "Bengali"
      },
      {
        "language": "bs",
        "name": "Bosnian"
      },
      {
        "language": "bg",
        "name": "Bulgarian"
      },
      {
        "language": "ca",
        "name": "Catalan"
      },
      {
        "language": "ceb",
        "name": "Cebuano"
      },
      {
        "language": "ny",
        "name": "Chichewa"
      },
      {
        "language": "zh",
        "name": "Chinese (Simplified)"
      },
      {
        "language": "zh-TW",
        "name": "Chinese (Traditional)"
      },
      {
        "language": "co",
        "name": "Corsican"
      },
      {
        "language": "hr",
        "name": "Croatian"
      },
      {
        "language": "cs",
        "name": "Czech"
      },
      {
        "language": "da",
        "name": "Danish"
      },
      {
        "language": "nl",
        "name": "Dutch"
      },
      {
        "language": "en",
        "name": "English"
      },
      {
        "language": "eo",
        "name": "Esperanto"
      },
      {
        "language": "et",
        "name": "Estonian"
      },
      {
        "language": "tl",
        "name": "Filipino"
      },
      {
        "language": "fi",
        "name": "Finnish"
      },
      {
        "language": "fr",
        "name": "French"
      },
      {
        "language": "fy",
        "name": "Frisian"
      },
      {
        "language": "gl",
        "name": "Galician"
      },
      {
        "language": "ka",
        "name": "Georgian"
      },
      {
        "language": "de",
        "name": "German"
      },
      {
        "language": "el",
        "name": "Greek"
      },
      {
        "language": "gu",
        "name": "Gujarati"
      },
      {
        "language": "ht",
        "name": "Haitian Creole"
      },
      {
        "language": "ha",
        "name": "Hausa"
      },
      {
        "language": "haw",
        "name": "Hawaiian"
      },
      {
        "language": "iw",
        "name": "Hebrew"
      },
      {
        "language": "hi",
        "name": "Hindi"
      },
      {
        "language": "hmn",
        "name": "Hmong"
      },
      {
        "language": "hu",
        "name": "Hungarian"
      },
      {
        "language": "is",
        "name": "Icelandic"
      },
      {
        "language": "ig",
        "name": "Igbo"
      },
      {
        "language": "id",
        "name": "Indonesian"
      },
      {
        "language": "ga",
        "name": "Irish"
      },
      {
        "language": "it",
        "name": "Italian"
      },
      {
        "language": "ja",
        "name": "Japanese"
      },
      {
        "language": "jw",
        "name": "Javanese"
      },
      {
        "language": "kn",
        "name": "Kannada"
      },
      {
        "language": "kk",
        "name": "Kazakh"
      },
      {
        "language": "km",
        "name": "Khmer"
      },
      {
        "language": "ko",
        "name": "Korean"
      },
      {
        "language": "ku",
        "name": "Kurdish (Kurmanji)"
      },
      {
        "language": "ky",
        "name": "Kyrgyz"
      },
      {
        "language": "lo",
        "name": "Lao"
      },
      {
        "language": "la",
        "name": "Latin"
      },
      {
        "language": "lv",
        "name": "Latvian"
      },
      {
        "language": "lt",
        "name": "Lithuanian"
      },
      {
        "language": "lb",
        "name": "Luxembourgish"
      },
      {
        "language": "mk",
        "name": "Macedonian"
      },
      {
        "language": "mg",
        "name": "Malagasy"
      },
      {
        "language": "ms",
        "name": "Malay"
      },
      {
        "language": "ml",
        "name": "Malayalam"
      },
      {
        "language": "mt",
        "name": "Maltese"
      },
      {
        "language": "mi",
        "name": "Maori"
      },
      {
        "language": "mr",
        "name": "Marathi"
      },
      {
        "language": "mn",
        "name": "Mongolian"
      },
      {
        "language": "my",
        "name": "Myanmar (Burmese)"
      },
      {
        "language": "ne",
        "name": "Nepali"
      },
      {
        "language": "no",
        "name": "Norwegian"
      },
      {
        "language": "ps",
        "name": "Pashto"
      },
      {
        "language": "fa",
        "name": "Persian"
      },
      {
        "language": "pl",
        "name": "Polish"
      },
      {
        "language": "pt",
        "name": "Portuguese"
      },
      {
        "language": "pa",
        "name": "Punjabi"
      },
      {
        "language": "ro",
        "name": "Romanian"
      },
      {
        "language": "ru",
        "name": "Russian"
      },
      {
        "language": "sm",
        "name": "Samoan"
      },
      {
        "language": "gd",
        "name": "Scots Gaelic"
      },
      {
        "language": "sr",
        "name": "Serbian"
      },
      {
        "language": "st",
        "name": "Sesotho"
      },
      {
        "language": "sn",
        "name": "Shona"
      },
      {
        "language": "sd",
        "name": "Sindhi"
      },
      {
        "language": "si",
        "name": "Sinhala"
      },
      {
        "language": "sk",
        "name": "Slovak"
      },
      {
        "language": "sl",
        "name": "Slovenian"
      },
      {
        "language": "so",
        "name": "Somali"
      },
      {
        "language": "es",
        "name": "Spanish"
      },
      {
        "language": "su",
        "name": "Sundanese"
      },
      {
        "language": "sw",
        "name": "Swahili"
      },
      {
        "language": "sv",
        "name": "Swedish"
      },
      {
        "language": "tg",
        "name": "Tajik"
      },
      {
        "language": "ta",
        "name": "Tamil"
      },
      {
        "language": "te",
        "name": "Telugu"
      },
      {
        "language": "th",
        "name": "Thai"
      },
      {
        "language": "tr",
        "name": "Turkish"
      },
      {
        "language": "uk",
        "name": "Ukrainian"
      },
      {
        "language": "ur",
        "name": "Urdu"
      },
      {
        "language": "uz",
        "name": "Uzbek"
      },
      {
        "language": "vi",
        "name": "Vietnamese"
      },
      {
        "language": "cy",
        "name": "Welsh"
      },
      {
        "language": "xh",
        "name": "Xhosa"
      },
      {
        "language": "yi",
        "name": "Yiddish"
      },
      {
        "language": "yo",
        "name": "Yoruba"
      },
      {
        "language": "zu",
        "name": "Zulu"
      }
    ]
</script>
<style>
#goTranslate {
  text-align: center;
  padding: 10px;
}
.seperator {
  margin-top: 10px;
  margin-bottom: 10px;
}
#actionsForPlug {
  text-align: center;
}
</style>
<div id="translate">
  <h4>Google Translate</h4>
  <div id="getTextforTranslate">
    <textarea rows="4" cols="45">
    </textarea>
  </div>
  <div id="goTranslate">
    <button id="translateBtn" type="button" class="btn btn-primary f-right">Translate</button>
  </div>
  <hr class="seperator" />
  <div id="results" class="translateResult hide">
    <h4>Result</h4>
    <div id="translatedContent">
    </div>
    <hr class="seperator" />
    <div id="actionsForPlug">
      <button id="copyTranslatedContent" onClick="googleTranslate.copyContent(document.getElementById('translatedContent').innerHTML);" type="button" class="btn btn-default ember-view copy-btn" data-clipboard-text=""><i class="fa fa-files-o"></i>Copy</button>
      <button id="sendTranslatedContent" onClick="googleTranslate.sendResponseToCustomer();" type="button" class="btn btn-primary f-right" data-clipboard-text="">Send</button>
    </div>
  </div>
</div>
<script>
var googleTranslate = (function($, window) {
  if (window.GOOGLE_TRANSLATE_PLUG) {
    window.GOOGLE_TRANSLATE_PLUG.setItUp(); // pass conversation / user info here
    return window.GOOGLE_TRANSLATE_PLUG;
  }
  var gTranslate = window.GOOGLE_TRANSLATE_PLUG = {
    fcEvents: window.fcAgent.events,
    initialize: function() {
      console.log('Init');
    },
    setItUp: function() {
      console.log('setItUp');
      var _self = this;
      $('#getTextforTranslate textarea').val('');
      $('#translateBtn').on('click', function() {
        console.log('Click');
        var textToTransalte = jQuery('#getTextforTranslate textarea').val();
        _self.initializeTranslate(textToTransalte);
      });
    },
    initializeTranslate:function(text) {
      console.log(text);
      var URL = 'https://translation.googleapis.com/language/translate/v2?q='+encodeURI(text)+'&target='+googleTranslateConfig.targetLanguage+'&key='+googleTranslateConfig.googleTranslateApiKey;
      this.connectToGoogleTranslate(URL);
    },
    connectToGoogleTranslate: function(googleURL) {
      var _self = this;
      $.ajax({
        method: "POST",
        url: "/app/extension_proxy",
        processData: false,
        //async: false,
        data: JSON.stringify({
          url: googleURL,
          method : "GET",
        }),
        success:function(data,response) {
          var result = data.data.translations[0].translatedText;
          var sourceLang = data.data.translations[0].detectedSourceLanguage;
          var found_lang = $.grep(languages, function(v) {
             return v.language === sourceLang;
           });
          _self.showResults(result,found_lang[0].name);
        },
        failure:function(data) {
          console.log('fail');
        }
      });
    },
    showResults: function(result,language) {
      $('#results').removeClass('hide');
      $('#translatedContent').text(result);
      jQuery('#results h4').text('Results - '+language+' Detected')
      console.log(language);
    },
    copyContent: function(str) {
      function listener(e) {
        e.clipboardData.setData("text/html", str);
        e.clipboardData.setData("text/plain", str);
        e.preventDefault();
      }
      document.addEventListener("copy", listener);
      document.execCommand("copy");
      document.removeEventListener("copy", listener);
      $('#copyTranslatedContent').html('<i class="fa fa-files-o"></i>Copied');
      setTimeout(function() {
        $('#copyTranslatedContent').html('<i class="fa fa-files-o"></i>Copy');
      },1000)
    },
    sendResponseToCustomer: function() {
      var response = $('#translatedContent').text();
      this.fcEvents.publish('send_message', { message: response });
    }
  };
  gTranslate.initialize();
  setTimeout(function() {
    gTranslate.setItUp();
  }, 100);
  return gTranslate;
})(jQuery, window);
</script>


Note:

This Smart Plug uses Google Cloud Translation API and you have to generate an API Key from the link below and replace it with "

GOOGLE_CLOUD_TRANSLATE_API_KEY".

https://console.cloud.google.com/home/dashboard