Google Translate Widget showing multiple times

[EdmundWalcot]

Google Translate have now made their service free again for non-profits linked to Covid.  We've been given the code from Google (below) and added it to a page (https://www.walcotfoundation.org.uk/individuals.html) as Embed Code - it looks fine on the Weebly site but when I publish it, the widget shows multiple times - see screenshot below - any ideas?

<div id="google_translate_element"></div>

<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>

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

[seicolegwr]

@EdmundWalcot 

The code itself seems OK. However, in my experience these kinds of code/apps are susceptible to fail when third party apps that block trackers and cookies are being used. I'm thinking of Ghostery, Adblock Plus, Privacy Badger etc. To check whether this is the case here, load your site with a browser in incognito mode. If the Google app loads and works OK, that'll probably be the problem (assuming you haven't duplicated the code?).

Hope this helps, Gary

[EdmundWalcot]

Thanks for the response - I tried the page in Incognito mode in Google Chrome but it still duplicates and I've checked that there is only one set of code in the Embed Code box.

[seicolegwr · Accepted solution]

@EdmundWalcot 

Hi Edmund

I just embedded your code in a test site, published and can confirm it works OK. But, when I located one embed element immediately above another one - both containing the same code - I was able to replicate your display problem exactly and only the first drop down menu worked - again, exactly the same as your website.

The interesting thing is, when I added the second embed element, and shifted both widgets to the right side of the element box, both displays disappeared from my edit screen, even though both elements and their code remained in place. So, are you sure you haven't duplicated the code in vertically aligned embed elements (and for some reason, only one is displaying on your edit screen?).  What happens if you delete your code and the embed element and then publish? Do you get a single working copy on your website? 

Gary

[EdmundWalcot]

Great - that works - we also had it in our footer so that what was causing the problem - thanks!