How To Add English To Hindi Language Translator

This is most important part of  every website to add English to Hindi Language Translator. Because User can translate your website content into afforable readable language. it can be hindi, urdu, arabi and something else.

So We will google language translator for that. Follow the given steps:

1. Make a dropdown menu and add id attribute and it value would be google_translate_element .

<select onchange="changeLanguageByButtonClick()" id="google_translate_element">

  <option value="en">English</option>

  <option value="hi">Hindi</option>

</select>

2. Add Google CDN Link

<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">

3. Initialise Google Translate Element using googleTranslateElementInit()

<script type="text/javascript">

function googleTranslateElementInit() {

  new google.translate.TranslateElement({pageLanguage: "en"}, 'google_translate_element');

}>

</script>

4. Create a function to Handle dropdown.

<script type="text/javascript">

const changeLanguageByButtonClick = () => {

      var language = document.getElementById("google_translate_element").value;

      var selectField = document.querySelector("#google_translate_element select");

      for(var i=0; i < selectField.children.length; i++){

        var option = selectField.children[i];

        if(option.value==language){

           selectField.selectedIndex = i;

           selectField.dispatchEvent(new Event('change'));

           break;

        }

      }

    }

</script>

For more detail watch this video. Watch Video