> For the complete documentation index, see [llms.txt](https://docs.ownchat.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.ownchat.app/chat-screen/rich-message-composer.md).

# Rich Message Composer

### Overview  

The **Rich Message Composer** is the message input section inside the Chat Screen used to reply and interact with customers.

{% embed url="<https://app.supademo.com/demo/cmleviw8h09r1zqp0xwekv9ed?utm_source=link>" %}

It enables users to:

* Reply to chats
* Send templates
* Share products
* Send media and attachments
* Add emojis and message formatting
* Record audio messages
* Create and send payment links
* Add internal chat notes and mentions

This feature supports **structured communication** and **internal collaboration** within a conversation.

### How to Access &#x20;

#### Navigation Path &#x20;

Dashboard → Inbox → Open Conversation → Message Composer (Bottom of Chat Window)

{% embed url="<https://app.supademo.com/demo/cmoi860et00rb2m0jo4775yi6?utm_source=link>" %}

The Rich Message Composer is located at the bottom of the chat screen.<br>

{% embed url="<https://app.supademo.com/demo/cmoi898nd01fjx70jnmnki8g4?utm_source=link>" %}

### Interface Overview &#x20;

The Rich Message Composer includes:

* Text input field
* Formatting options **(Bold, Italic, Strikethrough)**
* Emoji support
* Attachment option (Images, Videos, Documents)
* Product sharing option
* Template selection
* Audio recorder (bottom-right corner)
* Payment link option (last option in input field)
* Notes section (internal use)

### Sending a Reply &#x20;

Step 1: Open a conversation

{% embed url="<https://app.supademo.com/demo/cmoi87my701fgx70j0twanpgm?utm_source=link>" %}

\
Step 2: Type your message in the input field\
Step 3: (Optional) Apply formatting or add emojis\
Step 4: Click **Send**

### Message Formatting &#x20;

After typing text:

Step 1: Select the text\
Step 2: Choose formatting option

**Available formats:**

**Bold**\
Highlights important text.\
Customers receive bold text in WhatsApp.

**Italic**\
Emphasizes selected words.\
Customers receive italicised text.

**Strikethrough**\
Used for corrections or price reductions.\
Customers see text with strikethrough formatting.

### Sending Products &#x20;

#### Steps &#x20;

Click the **Product** option

{% embed url="<https://app.supademo.com/demo/cmoi8gfmh01frx70jz66kmqp9?utm_source=link>" %}

\
Drag & drop or choose a product

{% embed url="<https://app.supademo.com/demo/cmoi9h1z501vc2m0jl2agomkg?utm_source=link>" %}

Click **Send**\
This allows sharing product details directly in chat.

### Creating Orders from Chat &#x20;

After selecting products, follow these steps to create an order:\
Click the Orders tab to view and manage customer orders

{% embed url="<https://app.supademo.com/demo/cmoiarnba009qx90j993z6cl2?utm_source=link>" %}

\
Click **Create** to add a new order

{% embed url="<https://app.supademo.com/demo/cmoiassv6009sx90jvctypwcp?utm_source=link>" %}

\
Click **Add Address** to specify the delivery location

{% embed url="<https://app.supademo.com/demo/cmoiatrxf01lxx70je09d4xfp?utm_source=link>" %}

\
Select the saved address using the checkbox

{% embed url="<https://app.supademo.com/demo/cmoiauuad0001220jf5alluu1?utm_source=link>" %}

\
Click **Save** to confirm address details<br>

{% embed url="<https://app.supademo.com/demo/cmoiavryn026dz10jqfvjzwqa?utm_source=link>" %}

[<br>](https://app.supademo.com/demo/cmoiavryn026dz10jqfvjzwqa?utm_source=link)Click **Add Products** to include items

{% embed url="<https://app.supademo.com/demo/cmoiaww6502ct2m0jz6tu1fqt?utm_source=link>" %}

\
Click **Checkout** to proceed

{% embed url="<https://app.supademo.com/demo/cmoiay0fl01m2x70j6wq26nkp?utm_source=link>" %}

Click **Create Orders** to finalize the order\
The created order will be visible inside the chat screen<br>

{% embed url="<https://app.supademo.com/demo/cmoib09xv02b3z10jvoqr21m4?utm_source=link>" %}

### Sending Templates &#x20;

Used when:

Customer has not initiated a conversation\
24-hour messaging window is closed

#### Step 1: Click Template

{% embed url="<https://app.supademo.com/demo/cmoia1drx0004y00j2y52ct52?utm_source=link>" %}

#### &#x20;Step 2: Select an approved template

{% embed url="<https://app.supademo.com/demo/cmoib457401mhx70jsnrypq22?utm_source=link>" %}

#### [<br>](https://app.supademo.com/demo/cmoib457401mhx70jsnrypq22?utm_source=link)Step 3: Click Send &#x20;

{% embed url="<https://app.supademo.com/demo/cmoib5ha502dh2m0juvkhhs6v?utm_source=link>" %}

#### Sending Attachments &#x20;

You can send:

* Images
* Videos
* Documents

Step 1: Click Attachment

{% embed url="<https://app.supademo.com/demo/cmoib6u4m01mrx70j1awj64ir?utm_source=link>" %}

\
Step 2: Select file from PC or media source

{% embed url="<https://app.supademo.com/demo/cmoibbq5e00b2x90j1b2hxmcm?utm_source=link>" %}

\
Step 3: Click Send

{% embed url="<https://app.supademo.com/demo/cmoibcw2102dw2m0jxwkwvwpu?utm_source=link>" %}

#### Using Emojis &#x20;

Step 1: Click emoji icon

{% embed url="<https://app.supademo.com/demo/cmoibet1i01n3x70jkgocgobu?utm_source=link>" %}

\
Step 2: Select emoji\
Step 3: Send message

Emojis improve clarity and engagement in conversations.

#### Audio Recorder &#x20;

The Audio Recorder is located at the bottom-right corner of the input field.

Step 1: Click the audio recorder icon\
Step 2: Record your message\
Step 3: Send the audio message

Used when typing is not practical.

### Payment Link &#x20;

The Payment Link option is located as the last option in the input field.

It allows sending secure payment links directly within chat.

#### Payment Link Configuration &#x20;

Before sending payment links, configure the workflow:

Step 1: Set up Workflow Message\
Step 2: Subscribe to **Payment Create Event** from App Connection\
Step 3: Create a new workflow based on this app and event\
Step 4: Configure **Send Payment Action**

* Select WA Payments or Razorpay → Create Payments

**Define Payment Settings**&#x20;

* Generate random order ID from API
* Set expiry time
* Add description (variable or hardcoded)
* Enable/Disable Catalog as required
* Select payment type: Dynamic or Static

If **Dynamic**, pass:

* Product item key
* Name key
* Quantity key
* Price key

Step 5: Click Create to save configuration

#### Creating Payment Link from Chat Screen &#x20;

Step 1: Open Chat Screen\
Step 2: Click Payment Link option

{% embed url="<https://app.supademo.com/demo/cmoibis0h02hfz10j8wtxt0jw?utm_source=link>" %}

\
Step 3: Select Payment Connected&#x20;

{% embed url="<https://app.supademo.com/demo/cmoibnega02ed2m0jfxv3ieio?utm_source=link>" %}

\
Step 4: Choose the connection\
Step 5: Enter amount and description\
Step 6: (Optional) Enable UPI link\
Step 7: Click Create

{% embed url="<https://app.supademo.com/demo/cmoibu5j802eo2m0j6o060714?utm_source=link>" %}

The payment link is generated and sent to the customer.

### Chat Notes &#x20;

**Chat Notes (Per Chat)** &#x20;

* Recorded for each conversation

{% embed url="<https://app.supademo.com/demo/cmoibwdkm01n6x70jthone66j?utm_source=link>" %}

* Include date and time
* Show creator identity
* Used for updates and reference

{% embed url="<https://app.supademo.com/demo/cmoic6azp02hrz10j85gcgcjm?utm_source=link>" %}

These notes improve transparency and accountability.

**Notes (Organization-Level)** &#x20;

Users can create notes about customers that are visible to all organization users.

This supports team collaboration and consistent communication.

**Mentions in Notes** &#x20;

Step 1: Type @username inside note\
Step 2: Select team member

Mentioned notes appear under **Mentions** in Manage Chats.

{% embed url="<https://app.supademo.com/demo/cmoic8jwe01o7x70j4cldvf0p?utm_source=link>" %}

This ensures team members receive visibility and follow up when required.

{% embed url="<https://app.supademo.com/demo/cmoiedxge01tex70jhf46tkto?utm_source=link>" %}

#### Important Notes &#x20;

* Notes are internal and not visible to customers.
* Message formatting is delivered exactly as formatted in WhatsApp.
* Payment links require prior workflow configuration.
* Templates must be pre-approved before sending.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.ownchat.app/chat-screen/rich-message-composer.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.