Skip to content

Commit e38043d

Browse files
Update 03. Send the contact an interactive message.md (#491)
Added one section about adding translation to interactive message, once it has been already created and used in the editor
1 parent 849cbed commit e38043d

File tree

1 file changed

+55
-0
lines changed

1 file changed

+55
-0
lines changed

docs/4. Product Features/03. Flows/2. Flow Actions/03. Send the contact an interactive message.md

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -145,3 +145,58 @@ See the <a href="https://drive.google.com/file/d/1uiJQWIi-6U7YZu28OggvXSqZ57FYNu
145145
</p>
146146

147147
<p><b>Note:</b> It’s best to add translations while creating the interactive message. You can also add them later by switching languages in the flow editor and updating category/rule translations. Adding translations during creation—either via auto-translate or manually—automatically populates the corresponding category and rule translation fields.</p>
148+
149+
### Steps to add translations
150+
151+
If translations are to be added after creating and using the interactive message in the flow editor, they need to be updated in two places:
152+
<ul>
153+
<li>In the interactive message – to make them visible to end users.</li>
154+
<li>In the flow editor – to ensure the flow logic remains intact.</li>
155+
</ul>
156+
157+
Step 1: Click on the `edit` icon on the interactive message node.
158+
159+
<img width="366" height="406" alt="Screenshot 2025-10-29 at 8 52 11 PM" src="https://github.com/user-attachments/assets/085151bb-4a3b-4f9b-abb4-81d5d48451ef" />
160+
161+
Step 2: The edit page of the interactive message will open. From the top-right corner, click on the language for which you want to add translations.
162+
163+
<img width="599" height="392" alt="Screenshot 2025-10-29 at 8 53 00 PM" src="https://github.com/user-attachments/assets/5146efa2-a1ff-4ff6-a2bf-27aa8a86b071" />
164+
165+
Enter the translations for the message body and the buttons/list items. Repeat this process for each language you wish to include.
166+
167+
<img width="535" height="335" alt="Screenshot 2025-10-29 at 8 53 21 PM" src="https://github.com/user-attachments/assets/c1399a9d-9dc2-4d59-87bd-e116406ac6d2" />
168+
169+
Step 3: Click on `Save`
170+
171+
Step 4: On the flow editor, navigate to the languages on the top right corner.
172+
173+
<img width="607" height="393" alt="Screenshot 2025-10-29 at 8 54 04 PM" src="https://github.com/user-attachments/assets/38dd4db5-db74-4b76-a9f0-a2198b16c89f" />
174+
175+
Step 5: Select the language you wish to add translations for. The below screenshot shows the `Hindi` language view.
176+
177+
<img width="596" height="381" alt="Screenshot 2025-10-29 at 8 54 34 PM" src="https://github.com/user-attachments/assets/77a8361e-80ce-4336-b17f-3ff7b589718e" />
178+
179+
Note: The values entered under validations such as `has only the phrase`, `has a number`, etc. act as rules to verify whether a user’s response matches the expected input. These are grouped into categories, as shown below. Depending on the design, these categories may or may not be visible to the end user. Learn more about `Wait for Response` [here](https://glific.github.io/docs/docs/Product%20Features/Flows/Flow%20Actions/Wait%20for%20the%20contact%20to%20respond).
180+
181+
<img width="607" height="539" alt="Screenshot 2025-10-29 at 8 55 09 PM" src="https://github.com/user-attachments/assets/e9363434-6d0e-4c4d-b330-909c9b26f009" />
182+
183+
Click on the `Wait for Response` node linked to the interactive message for which you want to add translations.
184+
185+
In the `Rule Translations` tab and enter the corresponding translations for the button text. In cases where the validation type is set to `has any of the words`, you can add the translated terms as comma-separated values, and continue similarly for other validation types.
186+
187+
<img width="631" height="412" alt="Screenshot 2025-10-30 at 8 44 40 AM" src="https://github.com/user-attachments/assets/1cd2c671-3630-4fea-8489-4af66e4ae7b4" />
188+
189+
190+
In the `Category Translation` tab, you can add translated category names as per your design requirements. If no translations are provided here, the system will use the default values when referenced, for example, in the above case, if hindi category translations are not added, when the category name is referenced as `@results.topic_selected.category.` In Hindi, the default category names (which are in english) will be picked.
191+
192+
<img width="638" height="412" alt="Screenshot 2025-10-30 at 8 44 58 AM" src="https://github.com/user-attachments/assets/fe7b3688-4b90-4edc-8909-016a05749e8f" />
193+
194+
Step 5: Click on `Ok`
195+
196+
Step 6: Test the flows in the languages for which the translations were added, to make sure, they have been added correctly and the flow does not break/terminate.
197+
198+
199+
200+
201+
202+

0 commit comments

Comments
 (0)