Publii-Google-Translate-Widget-HTML.md

1 - HTML script.md

UPDATE: This method seems to be working again. If it ever stops working again, try GTranslate instead

Google Translate Widget Script

This is an English expansion of the Google Translate widget script covered in this video: https://www.youtube.com/watch?v=5meQKQhGBZg. Thank you to Programming with Vishal !

To get started, place this script in Tools & Plugins > Custom HTML > Footer:

Basic

<script src="https://translate.google.com/translate_a/element.js?cb=loadGoogleTranslate"></script>
<script>
    function loadGoogleTranslate() {
     new google.translate.TranslateElement ("google_element");
    }
</script>

Specific Languages

If you'd like to narrow the number of languages down to a specific selection, use "includedLanguages" and add the language code.

Here's an example:

<script src="https://translate.google.com/translate_a/element.js?cb=loadGoogleTranslate"></script>
<script>
function loadGoogleTranslate() {
new google.translate.TranslateElement ({
    pageLanguage: "en",
    includedLanguages: "am,ny,ht,ha,ig,rw,mg,st,sn,so,sw,xh,yo,zu,bm,ee,kri,ln,lg,om,nso,ti,ts,ak,fr,en",
    }, "google_element");
}
</script>

Proxy

I got this idea from jomocu's Simple Website Translator. Apparently, this improves the privacy of the users by "preventing Google from seeing the IP address of all your clients by proxing the connection". To do so, swap out "https://translate.google.com/translate_a/element.js?cb=loadGoogleTranslate" for "https://corsproxy.io/?https%3A%2F%2Ftranslate.google.com%2Ftranslate_a%2Felement.js%3Fcb%3DloadGoogleTranslate" in the script src="

Here is an example:

<script src="https://corsproxy.io/?https%3A%2F%2Ftranslate.google.com%2Ftranslate_a%2Felement.js%3Fcb%3DloadGoogleTranslate"></script>
<script>
    function loadGoogleTranslate() {
     new google.translate.TranslateElement ("google_element");
    }
</script>

Asynchronous Loading

I got this idea from jomocu's Simple Website Translator as well. According to the plugin author, this should improve the loading speed of your website. To do so, add async berfore the function.

Here's an example:

<script src="https://translate.google.com/translate_a/element.js?cb=loadGoogleTranslate"></script>
<script> async
    function loadGoogleTranslate() {
     new google.translate.TranslateElement ("google_element");
    }
</script>

2 - Language Switcher HTML DIV.md

Language Switcher HTML DIV

Place this div in the part of the website where you'd like this to appear:

<div id="google_element"> </div>

3 - CSS.md

CSS Code

Place this code in your main.css override file or in Tools & Plugins > Custom CSS to give your language switcher a cleaner look. Feel free to use the colours and sizes of your choice.

/* Remove google translate banner and branding */

/*core modifications*/

.skiptranslate iframe {
    display: none; /* Remove Remove Google banner at the top after translating */
}

body {
position: unset !important; /* Remove space created by Google banner at the top */
}

#google_element a {
    display: none; /* Remove Google logo below language switcher dropdown */
}

.goog-te-gadget {
font-size: 0px !important;
color: transparent !important;
/* Remove "Powered by" text below language switcher dropdown */
}

.goog-te-combo, .goog-te-banner *, .goog-te-ftab *, .goog-te-menu *, .goog-te-menu2 *, .goog-te-balloon * {
font-family: var(--body-font) !important; /* change font of language switcher dropdown to match site */
}
    
#goog-gt- > div { /* remove box with original text when translated text is hovered */
    visbility: hidden !important;
    display: none !important;
}

#goog-gt- { /* remove box with original text when translated text is hovered */
    display: none !important;
    visbility: hidden !important;
    color: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none !important;
    font-family: arial;
    font-size: 0px !important;
    width: 0px !important;
    padding: none;
}

.goog-text-highlight { /* remove text styling when translated text is hovered */
    background-color: transparent !important;
    box-shadow: none !important;
}