This SDK enables automatic, real-time translation of chat messages in your React application.
Make sure your project already includes react
and react-dom
.
Before users can chat, create a new Quetzal chat on the backend:
Use the useQuetzalChat
hook in your component:
This will call getChatMetadata
under the hood and store the quetzalChatId
and participants in context.
If a participant changes their language in your app:
The SDK tracks whether a message is showing the translated or original version:
You can use this to implement “Show original” / “Show translation” toggles.
Step | Description |
---|---|
1️⃣ | Backend calls /chat/new with participants and internal chat ID |
2️⃣ | Frontend calls setUpChat(externalChatId) |
3️⃣ | Call setCurrentParticipantId(participantId) |
4️⃣ | Fetch your app’s chat messages |
5️⃣ | Call fetchTranslationsByExternalIdAndStore(messageIds) |
6️⃣ | Use translateBatchMessagesAndStore() if needed |
7️⃣ | Use getTranslationForCurrentParticipant(msg.id) for each message |
8️⃣ | Use setTranslatedMessageDisplayState() to control toggle UI |
9️⃣ | On language change, call maybeUpdateChat() |
Hosted Demo: http://chatdemo.getquetzal.com/
Demo Project Repo: https://github.com/mubtAAhij/thumbtack-quetzal-demo
Start translating conversations effortlessly with Quetzal.
This SDK enables automatic, real-time translation of chat messages in your React application.
Make sure your project already includes react
and react-dom
.
Before users can chat, create a new Quetzal chat on the backend:
Use the useQuetzalChat
hook in your component:
This will call getChatMetadata
under the hood and store the quetzalChatId
and participants in context.
If a participant changes their language in your app:
The SDK tracks whether a message is showing the translated or original version:
You can use this to implement “Show original” / “Show translation” toggles.
Step | Description |
---|---|
1️⃣ | Backend calls /chat/new with participants and internal chat ID |
2️⃣ | Frontend calls setUpChat(externalChatId) |
3️⃣ | Call setCurrentParticipantId(participantId) |
4️⃣ | Fetch your app’s chat messages |
5️⃣ | Call fetchTranslationsByExternalIdAndStore(messageIds) |
6️⃣ | Use translateBatchMessagesAndStore() if needed |
7️⃣ | Use getTranslationForCurrentParticipant(msg.id) for each message |
8️⃣ | Use setTranslatedMessageDisplayState() to control toggle UI |
9️⃣ | On language change, call maybeUpdateChat() |
Hosted Demo: http://chatdemo.getquetzal.com/
Demo Project Repo: https://github.com/mubtAAhij/thumbtack-quetzal-demo
Start translating conversations effortlessly with Quetzal.