Bubble + Weglot: Create Multilingual No-Code Web Apps

Translation tool Weglot now offers an easy and fast way to make your Bubble web application multilingual. Simply add it to your app and in (actual) minutes, Weglot detects the content, translates it using neural machine translation, and then displays it under language subdomains – no more multiple pages for multiple countries!


This is a companion discussion topic for the original entry at https://bubble.io/blog/weglot-plugin/
7 Likes

@vivienne It’s a great plugin.

I tried to use the " Subdomains" Weglot feature that allows defining the language based on the subdomain (ex. de.website.com for the German language). But Bubble’s SSL certificate doesn’t support that. Which changes the URL to HTTP instead of HTTPS. That will affect the translated version’s SEO and will make the app un-secure to use.

Is that something Bubble has a solution for?

hi @vivienne - Looks cool! How will this work with Option sets or in general Dynamic content?

Hi @trvry

Weglot Support here, we’re glad you could have tested our subdomain-based integration.
Note that the certificate SSL of your subdomains (the translated versions) is managed on our end, so maybe this could be the reason you notice an issue on your end.
All the domains (your original one and the subdomains) should have a valid certificate SSL and it shouldn’t affect your SEO.
If you’re still experiencing an issue, don’t hesitate to contact us directly at support@weglot.com so we can investigate further.
Have a great day,
Cheers

4 Likes

I’ve just installed the plugin “Browser Timezone and Locale” to offer my app in the user’s active language without the need to change it. Do I still need that plugin with the Weglot plugin?

1 Like

Hi guys, just installed weglot free version - works fine.
I wonder If I can trigger the translation through other way than the language select in the bottom of the page? someone can give a light on it, please? I am beginner on Bubble…
tks
leo

Hi @leonardospencer!

Weglot support here. You can do that through your Weglot Dashboard, by navigating to the URLs page in your ‘Translations’ tab. Click on the “Missing a URL? Scan your website” link at the bottom of the page.

After scanning your website, you’ll have further URLs suggested. Check the URL(s) you want to add to your list and click “Add URL(s)”. You can then click on the sync icon and this will generate the translations.

Full tutorial here if needed.

Hope that helps!

1 Like

Thanks @remy1, but I think I wasn’t very clear in my question. I am wondering how my end user can select the language clicking in a flag (for example) instead of clicking in the bottom of the page (like the basic integration of weglot). My translation overall is fine, but I am struggling to integrate the functionality with my current design.
Any lights on it would be appreciated and crucial to keep furthering using the Weglot solution.
thanks

1 Like

Got you! You can make design edits to your language switcher through your Weglot Dashboard, by going to ‘Dashboard > Settings > Language switcher’. You can toggle on or off a number of options, or do this through the visual switcher editor, and/or also add custom CSS to change the appearance.

More details in our help doc here.

Great, that helps!
What If I want to display the language option in the top of may page? or inside an header? a specific element of my app? Is there any code I can copy or use to put it wherever I want but in the bottom? thanks for your help

You can do that through the switcher editor which allows you to drag and drop the switcher to where you’d like on your site. Note, your website needs to be live in order to use the switcher editor

Hi @remy1,

Would the above solution with switcher editor (for user to change language themselves on the app), work when I convert my Bubble app to native mobile appsv(iOS and Android)?

Can Weglot be configured to display other languages dynamically on the page, or does it need a sub-domain? If sub-domain, how will that work on a native mobile app?

Hi @chris30,

Thanks a lot for your message.

If by “native mobile app” do you mean for instance React Native apps, Weglot shouldn’t work on such environments. However Weglot should work fine on the mobile version of your Bubble website.

About the question “Can Weglot be configured to display other languages dynamically on the page” I’m not sure to perfectly understand the question. With the Javascript integration (not the subdomain-based) the translation is client-side made, and dynamically made on the website, ont the website front.

Don’t hesitate to contact us at support@weglot.com if you need further help.

Have a great day,
Cheers,

Thanks for the quick response.

I’ve purchased a plugin in Bubble which wraps the app with a container to allow conversion to iOS and Android: Convert Your Bubble Application Into Native iOS & Android Apps

Are you aware of Weglot still functioning after such a service?

Hi @chris30
Thanks a lot for your answer.
Actually, we don’t have so much experience with such a configuration.
I could advise you to test directly on your environment, and contact us at support@weglot.com if it doesn’t seem to work so we can investigate further and check if we can propose a solution.
Have a great day,
Cheers,

Hi @remy1 , I installed the weglot plugin in January and everything was working fine until few days ago. I am not sure what is causing it but the language switcher isn’t displayed on my app anymore. When I inspect the css I still see the 2 scripts from weglot alongside this which I assume allows to display the selector widget.


Could it be linked to that display: none ? I am not sur what that stylesheet user-agent is and how to override it.

I have also tried the following without success:

  • use the switcher language editor to make it show.
  • use the header script instead of the api key with the plugin.

Any idea what could be causing it not to show?

This is the site I am working on if you want to check it https://covaly.io/

Have a nice day,

Benoît

Hi @benoit.devilliers , the problem is that you changed your original language (probably a mistake) to French here https://dashboard.weglot.com/settings/
As a result, it removed the French from your translated language. And because there is no translated language anymore, the button doesn’t appear.
To fix this:

Thanks a lot @remy1 it worked, I also disabled auto-switch to browser language, I thought it might be linked!
Have a nice week :grinning:

Hi @remy1 I just enabled the subdomain settings for the same website.
I added the CNAME on my DNS and everything is running smoothly for the landing page.

Problem is when I am switching language in the app (any other page than landing page), I get this error

I tried to add this in my header in bubble but it didn’t fix the issue

Do I need to do something on weglot’s side so that the other page will have another URL as well?

Thanks!

Turns out this is only happening when looking at this with bubble debugger enabled! It’s working just fine.

Another question I had:
Is there was a way to add the fr at the end and have something like covaly.io/fr instead of fr.covaly.io when you switch language?

Thanks