Google Translator API System Integrate Website Change Language

Google translator was very useful for local language website, you can add Google Translator to your website easy, it helps your website convert to reader language, got more visitor, more than 90 languages on Google translate auto-convert to text. This generator let you add translation buttons to your web site very easily. When a user clicks on a button (flag), the page where he is will automatically be translated with Google Translate.

Google Translate is developed by Google, to translate text written in a website from one language into another. It offers a huge list of languages to translate and has a very efficient, reliable, and easy way to translate the webpage.

First Step:

Add the “div” element with id “google_translate_element”:

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

Copy and paste to your website location you want to show Google Translate dropdown or language selector (example: paste in inside the head main menu section).

Second Step:

Add a reference script link to your website top header section top of all css/ js script, is it important because of Google Translate API script load on the first load for best result.

<script type="text/javascript">
function googleTranslateFunction(){
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=googleTranslateFunction"></script>

Third Step:

This is an optional step in this step we can customize the Google Language button style if you can want to do this step, so please paste this code to your style.css file.

.goog-te-gadget-simple {
 background-color: #6f6f6ffc;
  border-left: 0pxsolid#d5d5d5;
   border-top: 0pxsolid#9b9b9b;
    border-bottom: 0pxsolid#e8e8e8;
   border-right: 0pxsolid#d5d5d5;
  font-size: 7pt;
 display: inline-block;
cursor: pointer;
  margin-top: 11px;
 zoom: 1;
display: inline;
}
.goog-te-gadget-icon {
  margin-left: 2px;
   width: 1px;
  height: 0px;
 border: none;
vertical-align: middle;
}

Now you can access the Google 90+ Language selector dropdown to your website API system.