Using the Translation Extension at the Sender Side
Guide Details
This guide provides detailed examples of using the Translation Extension, specifically for translating messages at the sender’s end.
Please review the following documentation before starting:
Default Translation
If you’re using our V4 UI Kits or widget, enabling the translation extension via the dashboard adds a button to translate messages. This button appears when you hover over or press down on a message in web/mobile. Clicking ‘Translate Message’ translates the message to the default language of your browser or phone. For example, if your system language is English, you will see the English translation.
Translation at the Sender Side
To always display messages in a specific language, translate on the sender’s end. After translating, append the translated message to the message metadata.
You’ll also need to define how to render the message bubble with this translation metadata.
Using the UI Kits
SendButton Function and Set Metadata
Override the default send button with the OnSendButtonClick property of the message composer. This property can be found at the Message Composer level or Message Composer Configuration class.
In the SendButton function:
-
Translate the message using the Translation Extension.
-
Use the SDK to set the metadata of the message.
-
Use the CometChat UI Kit methods to send the message.
Override the Text Message Template
When rendering the UI Kit component, override the message templates to define how to render the translated message.
To do this, override the Message Template for ‘Text’ type messages. Specifically, override the content view to render both the original and translated messages, or just the translated message.
Each time this component loads, the app uses the new Message Template list you defined, allowing it to render the translated message in chat.
Refer to our guide on How to Modify a Particular Message Template.