If we want to add Google Translator in our Website we can follow the below Steps
In this Example we have Added Two language , English is the Default language and one more language we have added is French
if we want to add or change the language we can modify the code in includedLanguages: ‘en,fr’ we can add the language code here.
Script
<script type=”text/javascript” src=”https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit”></script>
<script type=”text/javascript”>
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: ‘en’,includedLanguages: ‘en,fr’}, ‘google_translate_element’);
}
</script>
Add the code in html file
Add the below code in that section where we want to show the drop-down for language Select
<div id=”google_translate_element” class=”language-translator”></div>
Add the below CSS code to hide the unwanted watermark.
.VIpgJd-ZVi9od-l4eHX-hSRGPd,
.goog-te-gadget img,
.VIpgJd-ZVi9od-ORHb-OEVmcd {
display: none;
}
.language-translator {
display:none;
position: absolute;
z-index: 9999;
}
.goog-te-gadget .goog-te-combo {
outline: none;
}
select.goog-te-combo{
padding:$sc-padding-lv1;
padding-right: $sc-padding-lv6;
font-size: $pcin-font-size-md;
}
.skiptranslate.goog-te-gadget {
color: transparent;
}
.VIpgJd-yAWNEb-L7lbkb {
display: none !important;
}