Custom Google Translate Dropdown

[2X16 (Matt Rogers)]

---

I have successfully created a custom Google Translate dropdown that allows a user to switch languages. This also hides the Google Translate top bar and tool tips.

My problem:

• everything seems to work 100% in Preview except that it starts in Spanish rather than English
• when I check the live site, switching languages in the dropdown does nothing except append the URL - e.g. …/#googtrans(en|es)

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Resources/code that I used to achieve this…

Google Translate - Webflow

Multilingual website with Google Translate & jQuery

Hey! Not sure if you still need this but I figured out a way to remove this code glitch. Here’s the script and styles that work for me: /* Remove Google top bar and margin */ .VIpgJd-ZVi9od-ORHb, .VIpgJd-ZVi9od-ORHb table, .skiptranslate, .skiptranslate iframe { display: none !important; } body { top: 0px !important; } */ /* Disable google translate original text tooltips */ #goog-gt-tt, .goog-te-balloon-frame { display: none !important; } .goog-text-highlight…

[AJ_Dev (from Memberstack)]

Hey @2X16 ,

I believe the script is directing to the link before translation process occurs, you can check this script out and see if this works for your project. You can check this cloneable first for testing purposes and implement it or take inspiration from it if it solves the use-case.

Hope this helps.

[2X16 (Matt Rogers)]

Thanks @AJ_Dev ! I’ve been off the grid for a little while but will give that a try early next week.

[2X16 (Matt Rogers)]

@AJ_Dev this solution works great and so easy to implement! It works perfectly on my published site but my only issue is on the WF Preview of the site. In Preview the site defaults to Spanish even if I switch back to English it jumps back to Spanish. Any ideas why this might be happening?

[AJ_Dev (from Memberstack)]

Hey @2X16 ,

Glad to know it helped.

I don’t usually test custom code in preview mode, since there might be some issues due to caching / scripts not executing etc. But, if it works in published site for the projects, I believe it is good to go.

And also when I do enable the custom code for your site on preview mode, by default I am able to see the site in English language:

[2X16 (Matt Rogers)]

Thanks @AJ_Dev ! I’m sure it’s probably a caching issue in Preview—and as you say, better to test custom code in live environment.

Thanks again for sharing this solution! I’ve been fighting with this using a few different solutions offered by others, but yours was easy to implement and worked first time!