Tutorial time: localization in Zapworks Studio

Studio
#1

Did you know you can support multiple languages in Studio with a single qr code? That’s right, you don’t need to publish multiple experiences for this.

We are going to use the navigator.language api. Usually you can’t access any useful web api in Zapworks Studio because the app lives in a sandboxed iframe. Any attempt to access anything is usually blocked. Fortunately, however, the navigator.language api slips through the cracks of the sandbox.

So, how can we use it? If you type “navigator.language” in a script node you will get this message
image

and that’s because the typescript definition Studio uses doesn’t include web apis (or most of them anyways), even though they exist, and can be used!(when not blocked by the annoying sandbox). To get around this issue and essentially tell typescript to shut up and let you do what you wanna do because you know what you’re doing, use this line

declare const navigator;

Now you can call navigator.language and get one of the language codes. The language code that is being used by the browser. With this, you can parse the result and use it to have different text based on the language of the browser.

See the attached zpp, use it as a subsymbol for localized text nodes! localizedText_cleaned.zpp (184.3 KB)

4 Likes
#2

That’s great to know. I’d love to know how you found out – have you just been testing every API call you can to see what happens? :wink:

We definitely need a separate forum section for these kinds of tips.

3 Likes
#3

have you just been testing every API call you can to see what happens? :wink:

No haha. I just try when there’s a new project requirement. On this case I needed localization so I tried to make it work with Studio instead of using UAR. On other cases I wasn’t so lucky. For example, the share api is blocked by the sandbox (yes, I know Studio supports sharing but it’s broken on webar and lacking features).

Technically speaking, any web api that doesn’t require a user gesture (button click) to activate, can be accessed in Studio.

2 Likes
#4

Heyo! Currently tinkering with the subsymbol. I’m still a bit rusty on coding, but if I were to add another language (say, Spanish), how would I edit the subsymbol to do that?

#5

Spanish is es. You can check all the language codes here. Then to add a new language do this

image
image1355×509 33.9 KB

localizedText_cleaned.zpp (186.2 KB)

I updated the symbol to include the spanish language and also to default to english if none of the language codes match.

1 Like
#6

Awesome, you’re the best!

1 Like