Google Translate is a free multilingual statistical and neural machine translation service developed by Google, to translate text and websites from one language into another. - Wikipedia

It's the most widely used free machine translator service in the internet. More then 1M - 10M peoples search for this service every month.

But you can't use this service directly to your website for native looks as they have their own tools section prompt when you will use it in your website. There is really easy custom technique to customize this service to use it in your website and feel like native translator service. Google Translate is a really good service and it almost show 95% - 99% accurate translation just one click. As it's a machine translation, sometime there can be little error on the grammatical structures. But it's quiet good to understand as a native speaker of the translated language's.

We will create a nice sticky tab which float on right side of the website attached to the scrollbar. So, how can we customize google translate to make that look in website? Let's breakdown the code step by step.

Final result will be looks like as follow screenshot.

  • Before hover
meta tag example
  • Before hover mobile
meta tag example
  • After hover
meta tag example

Before starting the coding, make sure you have jQuery in your website.

We are going to create a sticky floating tab which will be float in the right sidebar. Let's create the tab and put the languages inside a table, it will show when we will hover the tab. It should be start as bellow..

<div id="sticky-container">
<div class="sticky">
    <div class="head-stk">
        <div class="left-head"> <span class="rotate notranslate">Languages</span></div>
        <div class="con-fild">
            <table class="table notranslate langs">
                <tbody>
                    <tr>
                        <td data-lang="en">English</td>
                        <td data-lang="af">Afrikaans</td>
                        <td data-lang="sq">Albanian</td>
                        <td data-lang="am">Amharic</td>
                        <td data-lang="ar">Arabic</td>
                        <td data-lang="hy">Armenian</td>
                        <td data-lang="az">Azerbaijani</td>
                        <td data-lang="eu">Basque</td>
                        <td data-lang="be">Belarusian</td>
                        <td data-lang="bn">Bengali</td>
                    </tr>
    ....

Then, let's add the CSS code in the HTML page header or footer section.

.skiptranslate{
    display: none;
}

.sticky-container{
    padding: 0px;
    margin: 0px;
    position: fixed;
    right: -247px;
    top: 230px;
    width: 281px;
    z-index: 1100;
    display: none;
}

#sticky-container{
    display: none;
    padding: 0px;
    margin: 0px;
    position: fixed;
    right: -282px;
    top: 230px;
    width: 281px;
    z-index: 1100;
}
.sticky .head-stk{
    list-style-type:none;
    padding:0px;
    margin:0px 0px 1px 0px;
    -webkit-transition:all 0.25s ease-in-out;
    -moz-transition:all 0.25s ease-in-out;
    -o-transition:all 0.25s ease-in-out;
    transition:all 0.25s ease-in-out;
    cursor:pointer;
}
.sticky .head-stk:hover{
    margin-left:-722px;
}
.sticky .head-stk .left-head{
    float: left;
    margin-right: 5px;
    background-color: $secondaryColor;
    height:148px;
    width: 38px;
    margin-left: -38px;
}
.....

After creating the HTML and CSS we need to create a JavaScript function to call the Google translation class library:

function googleTranslateElementInit() {
        $(window).on('load', function () {
            new google.translate.TranslateElement(
                { pageLanguage: "en" },
                "google_translate_element"
            );
        });
    }

In the above function we have called following event
$(window).on('load', function () {}

It will load the script when HTML DOM load finished. So, when the website finished loading this function will fetch the translator class and will fetch the website's words to translate. We have used default language English in the Google translate class config as follows

{ pageLanguage: "en" }

Next, we have added a dom id where the translator tools will render as follows in the translator configuration

google_translate_element

Next, we have to add the google translator service script and need to pass our JavaScript function name through it's call back parameter as cb.

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

In this position our sticky tab will be visible and when we will hover it, it will display looks like as bellow screenshot

  • Before hover
meta tag example
  • After hover
meta tag example

But it will not translate our website language automatically. We need to add jQuery Cookie and JavaScript on loader event to load the translator script and works automatically. So, when someone refresh or visit first time the default configured or user defined langues works. Let’ create the JavaScript function as

$(window).on('load', function () {
    var lang = $.cookie("lang");
    if (lang) {
        $.cookie("googtrans", "/en/" + lang, { path : "/", domain : "yourwebsite.com" });
    } else {
        $.cookie("googtrans", "/en/", { path : "/", domain : "yourwebsite.com" });
    }
    var curLang = $.cookie("lang");
    if( curLang ){
        $(".langs").val( curLang );
    }

    setTimeout(function() {
        $("body").removeAttr("style");
    }, 300);
    
});

In the above script first we are checking if user already selected any language and has been set in our Cookie. If no language found, then it will set the default language in cookie parameter's.

So, we have made default language works perfectly.

But when user will click any of the language from the sticky it will not change the website language. As we haven't added any script for it. So, what we do now?

Let's add another JavaScript event. So, when user click any language's it change the translation of the website.

$(document).ready(function() {
    $(".langs tr td").on("click", function() {
        $.cookie("lang", $(this).data("lang") );
        window.location.href = location.href;
    });
});

In the above script, we have catch the user's defined language and set it in the cookie and reload the website to change the language.

So, finally we have done our Google Translate customization and created a beautiful sticky language tab.

But we are not finished yet! why? if you hover the translated word you will see the reference of the word and some other information in google tooltip. So, we need to stop showing these tooltip with just simple CSS tricks. Add following CSS in the stylesheet.

.goog-tooltip {
    display: none !important;
}
.goog-tooltip:hover {
    display: none !important;
}
.goog-text-highlight {
    background-color: transparent !important;
    border: none !important; 
    box-shadow: none !important;
}

Finally, we have successfully created our customized translation.

Get the full code in separate files from git repo