Translations in a custom widget

TagoIO Analysis and Actions
1

Hi, is it possible to use dictionaries for translating text in a custom widget.

We obviously tried something like:

button.innerHTML = '#CWDGT.BUTTON_TEXT#';

but that didn’t work.

Any guidance would be highly appreciated.

Thanks,

Vincent

2

Hi Vincent,

You’ll need to import the TagoIO SDK in order to be able to utilize your dictionary.

3

Hi Freddy, can you please provide more details?

How do I import an SDK into a custom widget code, this is what I have:

<script type="text/javascript" src="https://admin.tago.io/dist/custom-widget.min.js"></script>

Is that what you mean and if so, what coding is required for the translation.

4

Hi Vincent,

Heres an example using the dictionary in a custom widget, make sure to install the SDK via NPM:

useEffect(() => {
  window.TagoIO.onSyncUserInformation((user) => {
    if (user && !userSettings) {
      setUserSettings(user);
    }
  });
}, [userSettings]);

useEffect(() => {
  const loadDictionary = async () => {
    if (userSettings && apiURL && sseURL) {
      const { language, token, runURL } = userSettings;

      const dictionary = await new Dictionary({
        token,
        language,
        runURL: runURL || "",
        region: {
          api: "apiURL.com",
          sse: "sseURL.com",
        },
      });

      const translation = dictionary.applyToString("#EXAMPLE.EXAMPLE#");
    }
  };
  loadDictionary();
}, [userSettings]);
5

Hi Freddy,

Thanks for sharing the example.

I’m a bit confused and could use some clarification. Specifically:

  1. How would I use the SDK in a basic HTML setup if I’m not compiling widgets but simply writing the HTML manually?
  2. What are the exact values or format expected for the `apiURL` and `sseURL` fields in the `region` object?

Right now, I’m only creating the HTML files without a build pipeline, so I feel like I might be missing some fundamental steps to get this working.

Appreciate your guidance on this.

Best,

Vincent

6

Hi Vincent,

  1. Our SDK is designed to work in environments that support module bundling (such as Webpack, Vite, or similar) or in Node.js. It is not possible to use it directly in a plain HTML file with a tag, because the SDK uses modern JavaScript modules and dependencies that require a build step to run in the browser.

  2. The API and SSE are typically used when you have a TagoDeploy with a on promise database. If you don’t have one, you can leave them blank so the system will use the fallback.

Below is an example of the default values:

{"us-e1": {api: "https://api.tago.io",realtime: "https://realtime.tago.io",sse: "https://sse.tago.io/events",},"eu-w1": {api: "https://api.eu-w1.tago.io",sse: "https://sse.eu-w1.tago.io/events", },