Update 03. Send the contact an interactive message.md

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

@@ -1 +1,147 @@
-> Refer : [Interactive Messages](https://glific.github.io/docs/docs/Product%20Features/Interactive%20Messages)
+># Send a contact an interactive message
+
+
+<table>
+  <tr>
+    <td><b>4-minute read</b></td>
+    <td style={{paddingLeft: '40px'}}><b>Level: Beginner</b></td>
+    <td style={{paddingLeft: '40px'}}><b>Last Updated: October 2025</b></td>
+  </tr>
+</table>
+
+Interactive messages let you send messages that include interactive elements—such as buttons, list menus, or a location request—so your end users (chatbot users) can engage in dynamic conversations.<br />
+This is especially useful for:
+
+<ul>
+  <li><b>Enhancing the user experience:</b> Buttons or lists reduce typing effort for end users.</li>
+  <li><b>Supporting NGOs in data collection:</b> Interactive inputs help gather cleaner, structured data that’s easier to categorize and validate.</li>
+</ul>
+
+Note: You must first create an interactive message by following the steps outlined <a href="#create-interactive-message">here</a>. Only then can you use it inside the flow editor as part of a chatbot flow.<br />
+This document covers:
+
+<ol>
+  <li>Types of interactive messages</li>
+  <li>How to create an interactive message</li>
+  <li>How to use an interactive message in the flow editor</li>
+</ol>
+<hr />
+
+<h2 id="types">Types of interactive messages</h2>
+<ol>
+  <li>
+    <b>Reply Buttons</b> – Include up to three clickable buttons within a single message.
+    <br />
+    <img width="438" height="236" alt="Reply buttons preview" src="https://github.com/user-attachments/assets/050c74f6-c6df-4daf-b92e-96dc519c9e54" />
+    <br />
+    <b>Important guidelines:</b>
+    <ul>
+      <li><b>Using emojis:</b> Emojis are allowed on buttons. If you use them, copy the entire button text (including emojis) when configuring <i>Wait for Response</i>. Use the “Phrase” match to validate the full response string. See the <a href="https://glific.github.io/docs/docs/Product%20Features/Flows/Flow%20Actions/Wait%20for%20the%20contact%20to%20respond">Wait for Response</a> documentation.</li>
+      <li><b>Character limit:</b> Per Meta guidelines, each button label can be a maximum of 20 characters. For example, “Yes I want to participate” (26 characters) is not allowed.</li>
+      <li><b>Markdown restrictions:</b> Markdown characters like <code>*</code> and <code>_</code> are not allowed in button labels. Using them will trigger “Character policy violated”.</li>
+    </ul>
+    <img width="633" height="190" alt="Character policy violation example" src="https://github.com/user-attachments/assets/ad7cdc81-842e-4008-b354-a7a5c247d802" />
+  </li>
+
+  <li>
+    <b>List Message</b> – Present up to 10 options in a list within a message.
+    <br /><br />
+    <b>Important guidelines:</b>
+    <ul>
+      <li>Lists add extra steps for users: (1) open the list, (2) select an option, (3) confirm and send.</li>
+      <li>Emojis are not allowed in the <b>title</b> field of list options.</li>
+      <li>Meta limits: up to <b>24 characters</b> for list titles and <b>60 characters</b> for descriptions.</li>
+    </ul>
+    <img width="466" height="437" alt="List message preview" src="https://github.com/user-attachments/assets/f4a03466-41d2-4ff8-b241-7a9be1fdaf09" />
+  </li>
+
+  <li>
+    <b>Location Request</b> – Ask the end user to share their location.
+    <br /><br />
+    <img width="596" height="175" alt="Location request preview" src="https://github.com/user-attachments/assets/050591c5-583d-4c31-aa0f-8df00323dc34" />
+  </li>
+</ol>
+
+All interactive messages follow this structure: <b>Message body</b> + <b>Interaction method</b> (buttons, list options, or a location request). You cannot send only the interaction options without a message body.
+
+<hr />
+
+<h2 id="create-interactive-message">Steps to create an interactive message</h2>
+<p>
+<b>Step 1:</b> Log in to Glific.<br />
+<b>Step 2:</b> From the left menu, click <b>Quick Tools</b> → <b>Interactive msg</b>.<br />
+<img width="156" height="522" alt="Quick Tools menu" src="https://github.com/user-attachments/assets/1b03370b-dbe9-49e0-bb3b-731e866d9c42" /><br />
+<b>Step 3:</b> Click <b>+ Create</b> (top right).<br />
+<img width="593" height="313" alt="Create interactive message button" src="https://github.com/user-attachments/assets/887f0d24-a9fd-46e2-b80f-db53e900420d" /><br />
+<b>Step 4:</b> On the <b>Add a new Interactive message</b> page, fill in the details below.<br />
+<img width="632" height="389" alt="Add new interactive message form" src="https://github.com/user-attachments/assets/5b713f0a-5198-4ccf-a78d-3b0ceca22277" /><br />
+</p>
+
+<ul>
+  <li>
+    <b>Type</b> – Choose <i>Reply Buttons</i>, <i>List Message</i>, or <i>Location Request</i>.
+    <ul>
+      <li>
+        <b>Reply Buttons</b><br />
+        <img width="407" height="328" alt="Reply buttons form" src="https://github.com/user-attachments/assets/8f4baf63-7429-4df1-9498-92b520b15823" />
+        <ol>
+          <li>Enter the text for the first button.</li>
+          <li>Click <b>+</b> to add the second (and third) button.</li>
+          <li>(Optional) Select an <b>Attachment Type</b>.</li>
+          <li>(Optional) Provide an <b>Attachment URL</b>. If <b>Allow dynamic media</b> is checked, you can use an expression to fetch the media URL dynamically.</li>
+        </ol>
+      </li>
+      <li>
+        <b>List Message</b><br />
+        <img width="455" height="417" alt="List message form" src="https://github.com/user-attachments/assets/ac1b4802-7dce-4d1b-861b-62b368009641" />
+        <ol>
+          <li>Enter the <b>List Header</b>—the text shown on the list button (see the preview).</li>
+          <li>Enter the <b>Title</b> for <b>List 1</b> (see how titles and items appear in the preview).</li>
+          <li>Enter the <b>Title</b> for the first item in <b>List 1</b>.</li>
+          <li>Enter the <b>Description</b> for the item.</li>
+          <li>Click <b>Add list item</b> to add more items.</li>
+          <li>Click <b>Add list</b> to add another list section.</li>
+        </ol>
+      </li>
+      <li>
+        <b>Location Request</b><br />
+        <img width="263" height="298" alt="Location request form" src="https://github.com/user-attachments/assets/91278ec8-60f4-4e77-92ef-3ae5581d8a34" />
+        <ol>
+          <li>Write the message that will appear with the <b>Send Location</b> button.</li>
+          <li>To learn how to convert shared coordinates into meaningful place data, see <a href="https://glific.github.io/docs/docs/Integrations/Google%20Maps%20API%20for%20reverse%20geo%20location">Google Maps API for reverse geolocation</a>.</li>
+        </ol>
+      </li>
+    </ul>
+  </li>
+  <li><b>Title</b> – A name for easy search. If you check the box, this title also appears at the top of the message for end users.</li>
+  <li><b>Message</b> – The content you want to send, along with the chosen interaction (buttons, list, or location request).</li>
+  <li><b>Footer</b> – Optional subtext displayed at the bottom of the message.</li>
+  <li><b>Tag</b> – Create or select a tag to make future searching and categorization easier.</li>
+  <li><b>Translate</b> – See <a href="#translations">Using interactive messages in different languages</a>.</li>
+</ul>
+
+<h2 id="use-in-flow">How to add interactive messages in the flow editor</h2>
+<p>
+<b>Step 1:</b> Create a flow.<br />
+<b>Step 2:</b> When adding a new node, select <b>Send the contact an interactive message</b> as the action type.<br />
+<b>Step 3:</b> Use the dropdown to choose the interactive message you created. You can also type its title to filter the list.<br />
+<img width="409" height="383" alt="Flow editor interactive message selection" src="https://github.com/user-attachments/assets/625115f7-1f67-4535-a607-0c6c05d2acc1" /><br />
+<b>Step 4:</b> Click <b>OK</b>.<br />
+See the <a href="https://drive.google.com/file/d/1uiJQWIi-6U7YZu28OggvXSqZ57FYNudf/view?usp=drive_link">sample flow</a>.
+</p>
+
+<h3 id="translations">Using interactive messages in different languages</h3>
+<p>
+<b>Step 1:</b> Create the interactive message in your default language (see <a href="#create-interactive-message">steps above</a>).<br />
+<b>Step 2:</b> After saving, click <b>Translate</b>.<br />
+<img width="637" height="322" alt="Translate button" src="https://github.com/user-attachments/assets/f2f1bc52-675b-4b3e-85f5-40d3ec5242aa" /><br />
+A pop-up appears. Selecting <b>Auto translate the content</b> will translate the message box text into your preconfigured languages.<br />
+<img width="634" height="343" alt="Auto translate popup" src="https://github.com/user-attachments/assets/533d3907-ae7a-4e45-a42b-53dd231089df" /><br />
+<b>Step 3:</b> The message content (including list header, list names, list options, and button options) is translated for all specified languages. The language-specific interactive message will automatically appear for contacts whose profile language matches.<br />
+<img width="633" height="346" alt="Translations preview" src="https://github.com/user-attachments/assets/0236450a-f56d-49a6-8de2-3022f19002f1" /><br />
+Please verify and, if needed, edit the translated fields before saving.<br />
+<b>Step 4:</b> Click <b>SAVE</b>.<br />
+See the <a href="https://drive.google.com/file/d/1uiJQWIi-6U7YZu28OggvXSqZ57FYNudf/view?usp=drive_link">sample flow</a>.
+</p>
+
+<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>