Translate Web Content With Google Translate API

Demo    Download
Translate Web Content Using Google Translate API
File Size: 20.44 KB
Views Total: 297 views
Last Update:November 10, 2020
Publish Date: November 1, 2020
Official Website: Go to website
License: MIT

A free jQuery plugin with google-translate-flag-dropdown.js is light weight jQuery plugin Translate Web Content Using Google Translate API content that use Google Cloud Translation API to interpret web content between dialects by choosing a nation from a dropdown select containing all upheld dialects with banners.

How to used :

1. Create a country list containing languages from which you can choose to translate your webpage. You need to load the following resources if you want to display flags at the beginning of the country names.

  1. jQuery
  2. Flag Icons
  3. Bootstrap Select Plugin
  4. Bootstrap 3/4
<!-- jQuery Is Required -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>

<!-- Bootstrap -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.min.js"></script>

<!-- Bootstrap Select -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap-select.min.css" />
<script src="/path/to/cdn/bootstrap-select.min.js"></script>

<!-- Flag Icon -->
<link rel="stylesheet" href="/path/to/cdn/flag-icon.min.css" />

2. Load the needed Google Translate API.

<script src="" type="text/javascript"></script>

3. Add the Google Translator Widget to the page.

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

4. The main script to enable the Google Translator on your webpage.

function googleTranslateElementInit() {
  new google.translate.TranslateElement({ pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false }, 'google_translate_element');

function translateLanguage(lang) {
  var $frame = $('.goog-te-menu-frame:first');
  if (!$frame.size()) {
    alert("Error: Could not find Google translate frame.");
    return false;
  $frame.contents().find('.goog-te-menu2-item span.text:contains(' + lang + ')').get(0).click();
  return false;



Nola Arney

Nola Arney is a full stack web developer who has worked at companies of various shapes and sizes, and with technologies just as diverse. Her ambition for development is only matched by his desire to find the perfect meme for every occasion.

Related jQuery Plugins