How Can I Automatically Translate a URL with Query Params into Another Language?

Wappler General How To
#1

I’m doing a demo to a French prospect next week, and I want to be able to automatically translate my booking form into French via the URL.

With a standard URL, I can use query params to google translate:

https://translate.google.com/translate?sl=en&tl=fr&u=https://www.workshop-angel.com

However my booking form has query parameters:

https://app.workshop-angel.com/form.php?h=1&t=1&e=b9783526b91d0976

I can URL encode them, but Google Translate doesn’t create a useful url, and my query params don’t get through:

https://translate.google.com/translate?sl=en&tl=fr&u=https%3A%2F%2Fapp.workshop-angel.com%2Fform.php%3Fh%3D1%26t%3D1%26e%3Db9783526b91d0976

Does anyone know a way I can specify the url to my booking form to a translation service via a url and get my query params to be passed through?

Thanks!
Antony.

#2

Is this for a demonstration or for actual use by end-users?

For demonstration purposes, I suggest you grab an extension for your browser that allows translation (or use your browser’s native translator functionality, if available).

Both Google and Microsoft used to have an embeddable translator widget for websites, but they retired them. They might still be available through Google Cloud Platform and Microsoft Azure as a paid service.

#3

Hi @Apple !

It’s for end users, so needs to be a single click url!

#4

@JonL, translation is your thing… do you have any pointers? :thinking:

#5

Sorry man. I don’t use external translation services so no idea how google translate api works.

#6

@JonL, thanks for your prompt reply!

#7

We fallback on an array of keyed objects for translation @Antony

Still works really well. What we did find is that a lot of users still used Google translate despite this functionality, so the question is was it worth the effort to implement it? Especially when the modern browser makes it so easy to click a button and voila translation.

Anyway here is a quick video on the method if you are interested.

#8

Thanks for this @Cheese!

If I do an actual translation, then I will use a similar kind of method… but right now I just want a URL that will translate everything without the user having to select some translation service after they have arrived on the page!

#9

The above is not a translation service. You compile the translations, then you will use the users browser language to automatically load the array and replace the default language with the browser specified language. BUT for each language you offer YOU have to make the translations and store them in to your database, be it phrases or single words etc. You input them, they are replaced if they exist otherwise the default language is the fall back.

#10

if this will do, simple google widget

add this to your page head

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

Then place this on your page where you want to place the language dropdown

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

This allows you to switch your entire site between languages in a single click from a dropdown

2 Likes
#11

That looks like the kind of thing I will need @Hyperbytes, thank you! :pray:

#12

That widget was actually withdrawn by Google about 5 years ago so you won’t find it on a Google site but it still works if you have the code. It’s like a pre AI universaly translator!