How To Add A JSON Key To All Bubble Text?

[JustinC]

Bubble text elements are displayed as JSON according to the console but the issue is the keys appear to be random or unreadable and so GTranslate can’t detect which of the keys to translate.

I am trying to add a key to the JSON that Bubble generates using javascript that contains the keys that GTranslate should translate.

I need to specify the keys to be translated in the JSON object by using special key gt_translate_keys. Like this:

{
“name”: “test”,
“description”: “test description”,
“id”: 500,
“months”: [“January”,“February”,“March”],
“content”: “Hello world”,
“domain”: “example.com”,
"gt_translate_keys": [“name”, “description”, {“key”: “months”, “format”: “list”}, {“key”: “content”, “format”: “html”}, {“key”: “domain”, “format”: “domain”}],
“user”: {
“login”: “test”,
“bio”: “test user”,
“profile_link”: “https://example.com/profile/test”,
“gt_translate_keys”: [{“key”: “bio”, “format”: “text”}, {“key”: “profile_link”, “format”: “url”}]
}
}

[williamtisdale]

Looks like all the elements displaying text have a class of “content” and if you grab their key of “innerHTML” and set it to the value of its translation then everything should be translated. I am not familiar with gt translate or how to use it but I just tested this code in my console and it changed all the text.
let elements = document.getElementsByClassName("content")
elements.forEach(element => {element.innerHTML = "Hello"})

[JustinC]

This appears to be a class only and not a key.

I asked GTranslate and other translation services but they confirmed the class can’t be used and that a key must be added to the JSON object containing the texts that are human readable within the code which GTranslate can then host translations for and translate accordingly.

@Bubble Can we please add this in? The multi-language support is insufficient because it doesn’t actually translate the source code or enable other providers (WegLot, GTranslate etc.) to host the translated code on subdomains or directories in order to achieve localized SEO benefits on a global scale.

From the support documents for Gtranslate: They should add gt_translate_keys JSON key to current JSON objects**.**

They can You can get more information about JSON translation here::

https://docs.gtranslate.io/en/articles/1349949-how-to-enable-json-format-translation

[williamtisdale]

You can use the class to give a JSON key to each element. Say if GT Translate needs every element on a page to have a key of “translate” and a value of true. Then you can run the same code on Page Load just slightly altered:

let elements = document.getElementsByClassName("content")
elements.forEach(element => {element.translate = true})

Here I am giving every element that needs to be translated a key of “translate” and setting the value to true. So if GT Translate needs the elements to have a specific key or keys then this is how you can do it.

[JustinC]

How do we run/add this code into Bubble or whatnot?

let elements = document.getElementsByClassName("content")
elements.forEach(element => {element.translate = true})

Or is this something that G Translate must handle?

We are trying to add gt_translate_keys JSON key to current JSON objects for all texts.

[williamtisdale]

There is a free plugin called Toolbox and it has an action called Run Javascript where you can enter the javascript code. Just download the plugin to your app and then under a Page is Loaded workflow add the Run Javascript action.

[williamtisdale]

let elements = document.getElementsByClassName("content")
elements.forEach(element => {
element["gt_translate_keys"] = [{"key": "innerHTML", "format": "html"}]
})

I think this is exactly what you would need.