Add or modify language support

This section guides how to internationalize your application, allowing you to offer language support beyond the default English.

Add new localization

To expand language options, it's important to set the locales property. This property enables you to define which languages are available for the meeting overlay.

To add a new localization, you’ll need to add an optional parameter called locales inside the Video Conference constructor. You can pass as many localizations as you need.

import { VideoConference } from "@superviz/sdk";

const ptBrLocalization = {
  language: "pt-BR",
  messages: {
    username: "nome",
    loading: "carregando...",
    // Add more messages as needed
  },
};

const daLocalization = {
  language: "da",
  messages: {
    username: " ",
    loading: "indlæser...",
    // Add more messages as needed
  },
};

video = new VideoConference({
  // ...

  // Set the language to be used in the component
  language: "pt-BR",

  // Add the list of possible locales you want to support
  locales: [ptBrLocalization, daLocalization],

  // ...
});

room.addComponent(video);

You can use the Language fields documentation for better understanding on the list of supported fields for translation.

info

If the property language is not provided, then the SDK will use the language of the participant browser or operating system.

Changing default English localization

To change the existing English localization, you can simply override by add a locale with the language en.

import { VideoConference } from "@superviz/sdk";

const enLocale = {
  language: "en",
  messages: {
    username: "User Name",
    loading: "Loading...",
    // Add more messages as needed
  },
};

video = new VideoConference({
  // ...
  locales: [enLocale],
  // ...
});