I had the same problem a few days ago, and I came up with a solution that works. I have a website in Spanish, and until we translate it into English, we offer our users the opportunity to use the Google Website Translator. When users click on the English flag, it opens the Twitter Bootstrap motive, telling the user that the website has not yet been translated, and there is a button that they can click to trigger the translation. I capture the event using JavaScript, set the cookie 'googtrans' with the value '/ es / en' and reload the page. Google script does the rest. After a reboot, I check if a cookie exists and change the English flag for the Spanish flag. When the user clicks on it, I set the cookie to '' (empty line) and reload the page.
For simplicity, I will not include the mutative part of Bootstrap.
HTML
<!DOCTYPE html> <html> <head> (...) <meta name="google-translate-customization" content="(YOUR_TRANSLATE_CUSTOMIZATION_ID)" /> (...) </head> <body> (...) <a id="lang-change-en" class="lang-change" href="javascript:void(0);"> <img src="images/en-flag.png" alt="English Flag"> </a> (...) <script src="js/script.js"></script> <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script> </body> </html>
Javascript (script.js)
function setCookie(cname, cvalue, exdays) { var expires; if (exdays === 0) { expires = ''; } else { var d = new Date(); d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000)); expires = "expires=" + d.toGMTString(); } var domain = (typeof domain === "undefined") ? '' : "; domain="+domain; document.cookie = cname + "=" + cvalue + "; " + expires + "path=" + path + domain; } function getCookie(cname) { var name = cname + "="; var ca = document.cookie.split(';'); for (var i = 0; i < ca.length; i++) { var c = ca[i].trim(); if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); } } return ""; } //Google provides this function function googleTranslateElementInit() { new google.translate.TranslateElement({ pageLanguage: 'es', includedLanguages: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false },'google_translate_element'); } //Using jQuery $(document).ready(function() { $(document).on('click','#lang-change-en', function() { setCookie('googtrans', '/es/en', 0, '.viajoasalta.com'); setCookie('googtrans', '', 0, '/'); location.reload(); }); $(document).on('click', '#lang-change-es', function() { setCookie('googtrans', '', 0, '/', '.viajoasalta.com'); setCookie('googtrans', '', 0, '/'); location.reload(); }); var googTrans = getCookie('googtrans'); if (googTrans === '/es/en') { var src = $('#lang-change-en > img').attr('src').replace('en-flag', 'es-flag'); $('#lang-change-en > img').attr('src', src); $('#lang-change-en').attr('id', 'lang-change-es'); } });
In the Website Translator Setup Wizard, you can select the languages that should be displayed in the list. Then you can have your own <select> , where each <option> has the value the cookie value that it should have, or a regular list with flags with something like data-cookie="value" . Then, using JavaScript, you record the “change” event (for selection) or 'click' for the list and set the cookie accordingly.
Note. I intentionally deleted the div where the website translator is being passed:
<div id="google_translate_element"></div>
To see his work, you can visit www.viajoasalta.com ; at least until we finally translate it.