Guide How to automatically translate your LP in users browser language without effort

[123]

Thought this would be pretty helpful, as I also used this for some of my LPs.
It works with almost any language as google translator is used for it.

I also saw this thread: "How to Translate a HTML Page in Seconds".
I would suggest to check it also, as it maybe works better for you.

Now, to make it work add following code to your html:

<div id="google_translate_element" style="display:  none;"></div>

<script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

<script>
    if(window.navigator.languages[0].includes("-"))  {
         let temp = window.navigator.languages[0].split("-");
          var lang = temp[0];
     } else {
          var lang = window.navigator.languages[0];
     }

    function  googleTranslateElementInit() {
         new google.translate.TranslateElement({
              pageLanguage: 'en',  // Page original language
              includedLanguages: 'en,' +  lang,    // Page  original language + browser settings languange
          }, 'google_translate_element');

         setTimeout(function() {
              //  Set the language to browser lang
              var  selectElement = document.querySelector('#google_translate_element select');
              selectElement.value = lang;
              selectElement.dispatchEvent(new  Event('change'));
         }, 1000);
     }
</script>

Make sure to change the original page language.

Now you have the problem that your body gets moved from googles "top bar". Also every text you hover gets highlighted and an infobox appears.
To remove this add following code to your css:

body {
     top: 0 !important;
}

font {
     background-color: #ffffff00 !important;