Transifex Live integration

I would like to localize my app using Transifex Live (see https://www.transifex.com/blog/2016/better-website-translation-experience/). Can I add Javascript to the page header? It would be like the following.

Would be nice if you had a plugin for that btw and maybe be able to set the options somewhere (does Bubble have parametric plugins or something? else could have an invisible object that I place in a reusable element and then on all of my pages). BTW Transifex is free for opensource projects

<script type=“text/javascript”>
window.liveSettings = {
api_key: “…”,
picker: “top-right”,
detectlang: true,
dynamic: true,
autocollect: true
};
</script>
<script type=“text/javascript” src="//cdn.transifex.com/live.js"></script>

optional end part:

<script type=“text/javascript”>
if (typeof Transifex !== ‘undefined’)
Transifex.live.onTranslatePage(function (lang) {
doSomethingWhenPageTextGetsTranslated
});
</script>

You can add that at the page level

or at the app level

Let us know if it works well, if it des we can look at adding this as a plugin. How different is it from Localize.js (which we have)?

2 Likes

Transifex Live is cloud based automatic localization of the pages. It collects strings from the pages automatically when they change and you can have multiple teams online localize them (or buy professional services to do it) and then push the localizations for the languages you want (there is an optional reviewer check phase for translated strings contributed by translators) to their cloud to appear automagically at your site.

…you can see an example usage at http://social.clipflair.net/Help/Manual.aspx - scroll down a bit (the first phrase seems to have been modified/added after localization and shows in English now) and change language from the top-right floating menu, it switches language automatically (bringing resources from the Transifex CDN)

btw this one is misleading, speaks of the classic Transifex (as used say for native desktop applications), Transifex Live is a different beast

“Systems like Transifex and OneSky are quite effective for routing content, but fail to account for content delivery and collection. Integration with your website or application is your responsibility, with translated assets often left out of date as a consequence” https://help.localizejs.com/docs/localize-vs-the-alternatives

there seems to be an issue with the login popup when trying to use the bubble app from inside Transifex Live - at first I thought only the Facebook login button only having trouble with Transifex Live, but it seems the normal login button also causes this error:

however, if I press the button that says Open Live in your site, there the login works ok and I can collect strings:

Also, they’ve made their script much easier than in the past, making it easier for you to make a plugin for it:

<script type=“text/javascript”>window.liveSettings={api_key:"…"}</script>
<script type=“text/javascript” src="//cdn.transifex.com/live.js"></script>

so it’s enough to just give the API key and it gets your preferred settings (that in the past would be placed in the HTML page) for say where the language floating dropdown menu appears from the cloud via your API key for that TX Live project (in Transifex you can have multiple organizations that have multiple projects)

when one starts a new TX Live project they have a message at the top that says to them to press a button that appears on the toolbar and get the script to place at their site. Once the script starts working the button disappears, but you can still get the API key if you wish from the project settings

btw, if you add a plugin for Transifex Live too, it has some way to mark an HTML tag (say a span) as “non-localizable” (this though shouldn’t be used when a placeholder is shown in the control, since localization of placeholders is needed too), so that it saves you the trouble when managing collected strings of marking content strings that were shown in your app while you were using it to be ignored

probably LocalizedIt has similar concept of marking tags to ignore (assuming it can collect strings automatically like TX Live does)

maybe users could select that some control’s content isn’t to be localized via a checkbox (or have the checkbox always checked to say “Localize”), for example if they have a Text that shows content like a username, they obviously don’t want to localize it


btw, TX Live also supports automatic localization from its translator memory (from previously localized items say from other projects of yours and also from Bing or Google translate if you add API key [Bing’s API key is free], but don’t need to do that from Bubble since those are set at the transifex settings on their site as shown at the article url I had posted at the top of this thread)

I have now integrated Transifex Live successfully (have Greek language apart from the default one of the web app [English]) at http://cpa.bubbleapps.io

Have opted to not show a language selector (since it would cover part of the web app when viewed on mobiles), but just have TX Live autodetect the preferred language(s) and their order as set in the web browser options.

It also supports custom language selectors (to switch language via its API [can do by adding a language part in the URL too I think which would be more easily feasible in Bubble])

Nice feature is that apart from picking strings to translate interactively (via a floating popup toolbar shown on hover), you can also translate the ones that have been picked in the same way (apart from using their classic table based way to translate - of course can also export to ship to third-party for translation or add them to your project as translators etc.)

An important setting needed at TX Live seems to be to tell it to translate the “placeholder” attribute of HTML tags, since Bubble seems to use it

once you add a comma separated list of such attributes to watch for, when you save settings and visit the page again it grabs the strings and shows them at “Manage strings” section (click that header to open the respective dialog) where you can “approve” them (select for translation). Then at “Translate” section can click the “Translate” header to open translate dialog and add translations (can filter there to see only Untranslated items and when translating one-by-one use TAB to save and move to next untranslated item)

Then you click Publish and select which languages to publish (can also select to publish only reviewed items if you added reviewer to the team or want to double-check items and set each one to “Reviewed” first):

btw, they seem to have a bug with Edge/Win10 where it doesn’t pick text in DIV (e.g. the title “Login as Teacher” at my login dialog). In Firefox they pick and translate it ok