Unlocking Multilingual Conversations: A Guide to Translating Sendbird Chat Messages
In this article, I will demonstrate how to use Sendbird message translation.
Before diving into the details, it’s essential to note that this article is tailored for those who already possess a basic understanding of Sendbird.
If you’re unfamiliar with Sendbird, you can refer to the introductory article here: Build a React Chat App with Sendbird UIKit .
For this example, we will utilize an existing starter provided by Sendbird: Sendbird UIKit React Starter.
Let’s get started:
There are two ways to translate messages in Sendbird: auto-translate and on-demand translate.
Auto-translation:
This method automatically translates all messages in a channel into the user’s preferred language. Users can set their preferred language either in the Sendbird Dashboard or through the Platform API.
To set up auto-translate in Sendbird, firstly, we need to create a custom input component.
This component allows us to add the list of languages we want to translate to, through the sendUserMessage() method.
The only thing left is to create a custom message component that will render our message based on the user’s default language.
On-demand Translation:
This method empowers users to translate specific messages into different languages based on their needs. Users can choose which messages they want to translate and the languages they want to translate them into.
If you want to see the code or try it yourself, you can find everything here: Sendbird Translation Repository.
And here’s the demo link to see how it works: Sendbird UIKit Translation Demo
If you found this helpful, share it with your friends! You can also reach out to me on X (Twitter) or LinkedIn.
Thanks for reading.
Resources :
https://docs.sendbird.com/docs/chat/sdk/v4/javascript/message/translating-messages/auto-translate-messages
https://docs.sendbird.com/docs/chat/sdk/v4/javascript/message/translating-messages/translate-messages-on-demand
