---
title: "Rich Card"
slug: "rich-card"
updated: 2026-08-10T17:10:52Z
published: 2026-08-10T17:10:52Z
canonical: "help.csgi.com/rich-card"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://help.csgi.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Rich Card

The user lands on the RCS (Rich Card) Editor after clicking **Create Template**. The Rich Card template editor lets you build rich, interactive message templates.

- **Left Panel:** Content configuration (Rich Card Settings)
- **Center Panel:** Template layout
- **Right Panel:** Live preview on a mobile mockup

![](https://cdn.document360.io/c578bb14-e570-4b6e-93ed-f6c5b8a2d8a1/Images/Documentation/RCS Editor(2).png?sv=2026-02-06&spr=https&st=2026-10-26T12%3A27%3A18Z&se=2026-10-26T13%3A27%3A18Z&sr=c&sp=r&sig=1O5u4%2Bc3yup1sRB%2BfFHlOEUm%2FjW9cUCkxodGg%2Bao6u8%3D)

### Image/Video Upload

- Toggle **Image/Video** ON to enable media (default setting: ON).
- Hover on the **tooltip** beside the Image/Video Toggle button for **Upload Guardrail** information.

> ![Note](https://cdn.document360.io/c578bb14-e570-4b6e-93ed-f6c5b8a2d8a1/Images/Documentation/Note.png?sv=2026-02-06&spr=https&st=2026-10-26T12%3A27%3A18Z&se=2026-10-26T13%3A27%3A18Z&sr=c&sp=r&sig=1O5u4%2Bc3yup1sRB%2BfFHlOEUm%2FjW9cUCkxodGg%2Bao6u8%3D)
> 
> **Upload Guardrail**
> 
> **Image**: JPEG, PNG, GIF
> 
> **Video**: MP4, MPEG, WebM, H.263, M4V, MPEG‑4
> 
> **Image/ Video Maximum File Size**: 4 MB

- Click **Upload File** to add new media from your local device.
- Browse your folders and select the desired image file.
- Click **Open** to upload the image into the Rich Card or click **Cancel** if you do not want to proceed with the upload.

![](https://cdn.document360.io/c578bb14-e570-4b6e-93ed-f6c5b8a2d8a1/Images/Documentation/upload image.jpg?sv=2026-02-06&spr=https&st=2026-10-26T12%3A27%3A18Z&se=2026-10-26T13%3A27%3A18Z&sr=c&sp=r&sig=1O5u4%2Bc3yup1sRB%2BfFHlOEUm%2FjW9cUCkxodGg%2Bao6u8%3D)

- **The** **Uploading File (Modal)** appears while the system checks file size and compatibility.
- Click **Cancel** if you do not want to proceed with the upload.

![](https://cdn.document360.io/c578bb14-e570-4b6e-93ed-f6c5b8a2d8a1/Images/Documentation/uploading file.jpg?sv=2026-02-06&spr=https&st=2026-10-26T12%3A27%3A18Z&se=2026-10-26T13%3A27%3A18Z&sr=c&sp=r&sig=1O5u4%2Bc3yup1sRB%2BfFHlOEUm%2FjW9cUCkxodGg%2Bao6u8%3D)

- In case the uploaded file is not supported, the ‘**Upload Failed’** modal displays.
- Click **Cancel** to close the modal and return to the editor without making change or click **Upload another file** to reopen the file picker and select a new media file
- The modal also displays file formats and size limits that are supported
  - **Image:** JPEG, PNG, GIF
  - **Video:** MP4, MPEG, WebM, H.263, M4V, MPEG‑4
  - **Max Size:** 4 MB

![](https://cdn.document360.io/c578bb14-e570-4b6e-93ed-f6c5b8a2d8a1/Images/Documentation/Uploading failed.png?sv=2026-02-06&spr=https&st=2026-10-26T12%3A27%3A18Z&se=2026-10-26T13%3A27%3A18Z&sr=c&sp=r&sig=1O5u4%2Bc3yup1sRB%2BfFHlOEUm%2FjW9cUCkxodGg%2Bao6u8%3D)

- The media managing tools appear after a media is successfully uploaded. Manage uploaded media directly from the **Image/Video** section in the **Content Configuration Panel** (left side).
- Click the **Upload New File** icon to replace the existing media with a new file.
- Click the **Edit Image** icon to edit the uploaded image or video from the template. For more information visit [RCS Image Editor](/cx/docs/rcs-image-editor).
- Click the **Download File** icon to save the uploaded file to your local device.
- You can also manage uploaded media from the Center Panel. Hover on **Media (Image/Video)** in the **Message Area** or **in the Template Layout**.
- Click the **Upload New File** icon to replace the current media with a new file or click the Edit Image icon to edit the media from the message layout.

### Configure Card Orientation

- Locate **Card Orientation** in the Left Panel
- Toggle between **Vertical** (default, active icon filled) and **Horizontal**

**Tip**: Use Vertical for most mobile campaigns

![](https://cdn.document360.io/c578bb14-e570-4b6e-93ed-f6c5b8a2d8a1/Images/Documentation/card orientation.jpg?sv=2026-02-06&spr=https&st=2026-10-26T12%3A27%3A18Z&se=2026-10-26T13%3A27%3A18Z&sr=c&sp=r&sig=1O5u4%2Bc3yup1sRB%2BfFHlOEUm%2FjW9cUCkxodGg%2Bao6u8%3D)

#### Set Vertical Card Orientation

Vertical card orientation is applied automatically after a successful upload. In vertical orientation, the image appears above the Title and Main Message.

- **Aspect ratio** dynamically appears when the user selects **Vertical Card Orientation**.

> ![Note](https://cdn.document360.io/c578bb14-e570-4b6e-93ed-f6c5b8a2d8a1/Images/Documentation/Note.png?sv=2026-02-06&spr=https&st=2026-10-26T12%3A27%3A18Z&se=2026-10-26T13%3A27%3A18Z&sr=c&sp=r&sig=1O5u4%2Bc3yup1sRB%2BfFHlOEUm%2FjW9cUCkxodGg%2Bao6u8%3D)
> 
> Changing the aspect ratio currently only impacts how it appears in XCC edit and preview screen, it does not change how its rendered on the handset.

- Hover over an **aspect ratio** for 1 second to view a tooltip with dimensions:
  - 7:3 — Wide and short
  - 16:9 — Standard video format
  - 2:2 — Square format
- Click an **aspect ratio** option to see how it appears in XCC edit and preview screen.
- The **Preview Panel** provides a real-time view of how your Rich Card will appear on a mobile device, helping you fine-tune card orientation and aspect ratio for the best visual impact.

![](https://cdn.document360.io/c578bb14-e570-4b6e-93ed-f6c5b8a2d8a1/Images/Documentation/Vertical orientation.jpg?sv=2026-02-06&spr=https&st=2026-10-26T12%3A27%3A18Z&se=2026-10-26T13%3A27%3A18Z&sr=c&sp=r&sig=1O5u4%2Bc3yup1sRB%2BfFHlOEUm%2FjW9cUCkxodGg%2Bao6u8%3D)

#### Set Horizontal Card Orientation

- Click the **Horizontal Card** **Orientatio****n** icon to split the card into two sections: image on one side, text on the other.
- Click on the **Left Image Alignment** icon to align the image on the left and place the text on the right side of the Rich Card or click on the **Right Image Alignment** icon to align the image on the right and place the text on the left side of the Rich Card.
- The preview dynamically updates to show this side-by-side layout, giving equal prominence to image and text.

### Add Title and Main Message

The **Title** and **Main Message** fields in the Rich Card editor include live character counters to help you stay within the allowed limits. These counters update in real time and prevent input beyond the maximum character count.

#### Add Title

- Turn ON the **Title** (toggle button) in the left panel under **Aspect Ratio**. The toggle button remains **ON by default**.
- Locate the **Title** (input field) under the **image/video** section in the center of the screen and click inside the **Title input field** to add title.
- View the **live character counter** on the right side of the Title field. It starts at 0 / 80 and updates as you type
- At 30 characters a yellow warning appears, and explains the reason:

> ![Note](https://cdn.document360.io/c578bb14-e570-4b6e-93ed-f6c5b8a2d8a1/Images/Documentation/Note.png?sv=2026-02-06&spr=https&st=2026-10-26T12%3A27%3A18Z&se=2026-10-26T13%3A27%3A18Z&sr=c&sp=r&sig=1O5u4%2Bc3yup1sRB%2BfFHlOEUm%2FjW9cUCkxodGg%2Bao6u8%3D)
> 
> Title over 30 characters may cause the message to display on a second screen on iOS devices.
- The field blocks additional input at **80 characters.**

![](https://cdn.document360.io/c578bb14-e570-4b6e-93ed-f6c5b8a2d8a1/Images/Documentation/Title editor.gif?sv=2026-02-06&spr=https&st=2026-10-26T12%3A27%3A18Z&se=2026-10-26T13%3A27%3A18Z&sr=c&sp=r&sig=1O5u4%2Bc3yup1sRB%2BfFHlOEUm%2FjW9cUCkxodGg%2Bao6u8%3D)

#### Add Main Message

- Turn **ON** the **Main Message** (toggle button) in the left panel. The toggle button remains **ON by default**.
- Click inside the **Main Message** field below the Title
- Type your body text and watch the counter start at 0 / 2000 and update in real time as the text is entered.
- The Main Message **Length Recommendation** appears at 112+ counts.
- The field blocks additional input at **2000** characters.

> ![Note](https://cdn.document360.io/c578bb14-e570-4b6e-93ed-f6c5b8a2d8a1/Images/Documentation/Note.png?sv=2026-02-06&spr=https&st=2026-10-26T12%3A27%3A18Z&se=2026-10-26T13%3A27%3A18Z&sr=c&sp=r&sig=1O5u4%2Bc3yup1sRB%2BfFHlOEUm%2FjW9cUCkxodGg%2Bao6u8%3D)
> 
> - Text over 112 characters may cause the message to display on a second screen on iOS devices.
> - When the Rich Card main message reaches the maximum, Test Send is disabled until the content is reduced.

![](https://cdn.document360.io/c578bb14-e570-4b6e-93ed-f6c5b8a2d8a1/Images/Documentation/main message limit.gif?sv=2026-02-06&spr=https&st=2026-10-26T12%3A27%3A18Z&se=2026-10-26T13%3A27%3A18Z&sr=c&sp=r&sig=1O5u4%2Bc3yup1sRB%2BfFHlOEUm%2FjW9cUCkxodGg%2Bao6u8%3D)

> ![Note](https://cdn.document360.io/c578bb14-e570-4b6e-93ed-f6c5b8a2d8a1/Images/Documentation/Note.png?sv=2026-02-06&spr=https&st=2026-10-26T12%3A27%3A18Z&se=2026-10-26T13%3A27%3A18Z&sr=c&sp=r&sig=1O5u4%2Bc3yup1sRB%2BfFHlOEUm%2FjW9cUCkxodGg%2Bao6u8%3D)
> 
> A payload progress bar now tracks Rich Card template size against the 5 MB limit, turns **yellow near the limit (about 3.75 MB), red at 5 MB or more**, and prevents saving when the payload exceeds 5 MB.

![](https://cdn.document360.io/c578bb14-e570-4b6e-93ed-f6c5b8a2d8a1/Images/Documentation/RCS size.jpg?sv=2026-02-06&spr=https&st=2026-10-26T12%3A27%3A18Z&se=2026-10-26T13%3A27%3A18Z&sr=c&sp=r&sig=1O5u4%2Bc3yup1sRB%2BfFHlOEUm%2FjW9cUCkxodGg%2Bao6u8%3D)

**The Title and Main Message editor has the below mentioned special features:**

#### How to hyperlink a text

- Select the word or phrase in your document that should become clickable.
- Click the **Hyperlink** icon in the toolbar. This opens the **Insert/Edit Link** dialog box (as shown in the image).
- Enter the URL in the **URL** field you want the text to link to.

Example: [https://www.csgi.com/](https://www.csgi.com/)
- Ensure the **Text to display** field shows the correct text (**For Example**-“CSG”). You can edit it if needed.
- Click **Open link** in dropdown to select **Current Window** or **New Window,** depending on your preference.
- Click **Save** to apply the hyperlink. The selected text now becomes a clickable link.

![](https://cdn.document360.io/c578bb14-e570-4b6e-93ed-f6c5b8a2d8a1/Images/Documentation/image(145).png?sv=2026-02-06&spr=https&st=2026-10-26T12%3A27%3A18Z&se=2026-10-26T13%3A27%3A18Z&sr=c&sp=r&sig=1O5u4%2Bc3yup1sRB%2BfFHlOEUm%2FjW9cUCkxodGg%2Bao6u8%3D)

#### How to insert special characters

- Click in the **text area** at the exact position where the symbol should appear.
- Click the **Special Character** or **Symbol** icon in the toolbar.
- Use the category list on the left (**For example**- Currency, Mathematical, Symbols) or type in the **Search box** to find the symbol quickly.
- Select the desired symbol from the grid. The editor will insert it at your cursor position.
- Click **Close** to return to your document.

![](https://cdn.document360.io/c578bb14-e570-4b6e-93ed-f6c5b8a2d8a1/Images/Documentation/image(127).png?sv=2026-02-06&spr=https&st=2026-10-26T12%3A27%3A18Z&se=2026-10-26T13%3A27%3A18Z&sr=c&sp=r&sig=1O5u4%2Bc3yup1sRB%2BfFHlOEUm%2FjW9cUCkxodGg%2Bao6u8%3D)

#### How to insert emojis in the editor

- Click in the **text area** at the exact position where the emoji should appear.
- Click the **Emoji** icon in the toolbar to open the **Emojis** dialog box (as shown in the image).
- Use the category list on the left (**For Example**- People, Animals and Nature, Food and Drink)

or type in the **Search box** to find the emoji quickly.
- Click the **Emoji** to insert it. The editor will insert it at your cursor position.
- Click **Close** to return to your document.

![](https://cdn.document360.io/c578bb14-e570-4b6e-93ed-f6c5b8a2d8a1/Images/Documentation/image(146).png?sv=2026-02-06&spr=https&st=2026-10-26T12%3A27%3A18Z&se=2026-10-26T13%3A27%3A18Z&sr=c&sp=r&sig=1O5u4%2Bc3yup1sRB%2BfFHlOEUm%2FjW9cUCkxodGg%2Bao6u8%3D)

#### How to insert merge tags in the editor

- Place the cursor where you want the merge tag (personalized data) in the text area.
- Click the **Merge Tags** icon in the toolbar to open the **Merge Tags** dropdown menu (as shown in the image).
- Use the **Filter merge tags** search box or scroll through the list to find the category you need (**For Example**- Collection).
- Click the **category** and then select the tag (**For Example**- Customer First_Name).

![](https://cdn.document360.io/c578bb14-e570-4b6e-93ed-f6c5b8a2d8a1/Images/Documentation/merge tag.gif?sv=2026-02-06&spr=https&st=2026-10-26T12%3A27%3A18Z&se=2026-10-26T13%3A27%3A18Z&sr=c&sp=r&sig=1O5u4%2Bc3yup1sRB%2BfFHlOEUm%2FjW9cUCkxodGg%2Bao6u8%3D)

- The selected merge tag appears in your message at the cursor position.
- Check the **preview pane** to ensure the tag displays correctly and will pull the right data when sent.

✅ Tip: Use merge tags to personalize messages for each recipient, improving engagement and relevance.

### Add Card Suggestions or Message Suggestions

The **Add Card Suggestions** and **Message Suggestions** features make Rich Cards interactive by adding clickable buttons. These buttons allow users to perform quick actions, improving engagement and user experience. A maximum of 4 Card Suggestion and 11 Suggested Replies is allowed. **Card Suggestions:** Navigate or trigger actions (**For example**- open a URL or send a postback).

**Message Suggestions:** Provide quick response options for user input.

- To add Card Suggestions and Message Suggestions click the **Card Suggestions** and **Message Suggestions** toggle to turn it ON. (The toggle changes from gray to blue.)
- For **Card Suggestions**, a new section labeled **Button 1/ 4** appears immediately below the existing fields for further configuration of **Action type**.
- For Message Suggestions a new section labeled Message Suggestions **1/11** appears immediately below the existing fields for further configuration of **Action type**.

![](https://cdn.document360.io/c578bb14-e570-4b6e-93ed-f6c5b8a2d8a1/Images/Documentation/card & message suggestion.gif?sv=2026-02-06&spr=https&st=2026-10-26T12%3A27%3A18Z&se=2026-10-26T13%3A27%3A18Z&sr=c&sp=r&sig=1O5u4%2Bc3yup1sRB%2BfFHlOEUm%2FjW9cUCkxodGg%2Bao6u8%3D)

**Available Action Types** You can choose from the options in the **Action Type** (dropdown):

- **Open URL**
- **Reply**
- **Dial Phone**

| Card Suggestions | What it does | Required fields | Key limits and recommendations |
| --- | --- | --- | --- |
| **Reply** | Sends a predefined reply to your system when the recipient selects the suggestion. | **Text:** Maximum of 25 characters. **Postback**: Up to 25 characters. | Use for simple user responses such as Yes, No, or More information. |
| **Open URL** | Opens a webpage in a browser or within the RCS chat. | **Button Text**: Maximum 25 characters. **URL:** Must begin with https:// or http://; maximum 2,000 characters. | Choose either Browser or WebView. WebView supports three display modes: full, half, or tall. |

- When viewing the Action Type dropdown, additional RCS actions appear with a **Coming Soon** label:
  - **Show Location**
  - **Request Location**
  - **Create Calendar Event**

![](https://cdn.document360.io/c578bb14-e570-4b6e-93ed-f6c5b8a2d8a1/Images/Documentation/Coming soon Functions.jpg?sv=2026-02-06&spr=https&st=2026-10-26T12%3A27%3A18Z&se=2026-10-26T13%3A27%3A18Z&sr=c&sp=r&sig=1O5u4%2Bc3yup1sRB%2BfFHlOEUm%2FjW9cUCkxodGg%2Bao6u8%3D)

These actions are **visible** but **disabled**. They serve as a preview of upcoming RCS capabilities

#### Steps to Add Function (Open URL)

- View **Button Details** for the unique **GUID** (**For example**: 19897639) at the top of the button configuration panel for identification and tracking
- Choose **Open URL** from the **Action Type** (dropdown) to enable link-based interaction
- Type the button label in the **Button Text** field. Keep it within the 25-character limit. You can also include emojis available in this field. Each emoji is counted as two characters.
- Enter the destination link in the **URL** field. Ensure the link is valid and does not exceed 2000 characters.

![](https://cdn.document360.io/c578bb14-e570-4b6e-93ed-f6c5b8a2d8a1/Images/Documentation/add url.gif?sv=2026-02-06&spr=https&st=2026-10-26T12%3A27%3A18Z&se=2026-10-26T13%3A27%3A18Z&sr=c&sp=r&sig=1O5u4%2Bc3yup1sRB%2BfFHlOEUm%2FjW9cUCkxodGg%2Bao6u8%3D)

- Press **Tab** or click outside the input area to hyperlink the Button Text and activate the **Open Link** and **Ping Link** icons.

> ![Note](https://cdn.document360.io/c578bb14-e570-4b6e-93ed-f6c5b8a2d8a1/Images/Documentation/Note.png?sv=2026-02-06&spr=https&st=2026-10-26T12%3A27%3A18Z&se=2026-10-26T13%3A27%3A18Z&sr=c&sp=r&sig=1O5u4%2Bc3yup1sRB%2BfFHlOEUm%2FjW9cUCkxodGg%2Bao6u8%3D)
> 
> If a link button URL is entered without a protocol, the platform automatically adds https:// to ensure secure and reliable RCS link handling.

- Click **Ping Link** to verify the URL accessibility in real time.
- Locate the **Payload Text** field. Enter a value that represents the button action within **2048 characters** (Optional).

**For example:** call_support_clicked
- Check the preview panel on the right. Confirm that the button updates instantly with your label and link.
- Ensure the RCS message size is under **5MB**; otherwise, submission is blocked.

#### Steps to Add Function (Reply)

- In the Rich Card Editor, scroll to the **Card Suggestions** section on the left panel and click **toggle button** to open the button configuration panel.
- At the top of the configuration panel, note the GUID (**For Example**- 40584539) for identification and tracking.
- From the Action Type dropdown, select **Reply** to enable text-based interaction.
- In the **Button Text** field, type the button label and keep it within the **25-character** limit. You can also include emojis available in this field. Each emoji is counted as two characters.

![](https://cdn.document360.io/c578bb14-e570-4b6e-93ed-f6c5b8a2d8a1/Images/Documentation/reply function.gif?sv=2026-02-06&spr=https&st=2026-10-26T12%3A27%3A18Z&se=2026-10-26T13%3A27%3A18Z&sr=c&sp=r&sig=1O5u4%2Bc3yup1sRB%2BfFHlOEUm%2FjW9cUCkxodGg%2Bao6u8%3D)

- In the **Text** field, enter text and ensure it does not exceed **25 characters**.
- Press **Tab** or click outside the input area to enable the Button.
- Locate the **Payload Text** field. Enter a value that represents the button action within **2048 characters** (Optional).

For example: call_support_clicked
- Check the **preview** panel on the right. Confirm that the button updates instantly with your label.
- Ensure the RCS message size is under **5MB**; otherwise, submission is blocked.

#### Reply Action Behavior on iOS and Android

- In the Action Type dropdown, select **Reply**.
- Locate the hyperlinked text **Click here for an example** next to the Reply action setting.
- Click the hyperlinked text to open the Reply Action **informational popup**.

![](https://cdn.document360.io/c578bb14-e570-4b6e-93ed-f6c5b8a2d8a1/Images/Documentation/Information popup for reply actions.gif?sv=2026-02-06&spr=https&st=2026-10-26T12%3A27%3A18Z&se=2026-10-26T13%3A27%3A18Z&sr=c&sp=r&sig=1O5u4%2Bc3yup1sRB%2BfFHlOEUm%2FjW9cUCkxodGg%2Bao6u8%3D)

- Preview reply placement. Use the side‑by‑side previews to see how the same Reply action appears on:
  - **iOS**, where replies are shown at the message level
  - **Android**, where replies may appear closer to the originating card

> ![Note](https://cdn.document360.io/c578bb14-e570-4b6e-93ed-f6c5b8a2d8a1/Images/Documentation/Note.png?sv=2026-02-06&spr=https&st=2026-10-26T12%3A27%3A18Z&se=2026-10-26T13%3A27%3A18Z&sr=c&sp=r&sig=1O5u4%2Bc3yup1sRB%2BfFHlOEUm%2FjW9cUCkxodGg%2Bao6u8%3D)
> 
> Messages will look slightly different on iOS and Android.
> 
> Replies can appear differently depending on the device and messaging app. On some platforms, replies display as standard messages, while on others they may appear visually grouped with the original card or message.

![](https://cdn.document360.io/c578bb14-e570-4b6e-93ed-f6c5b8a2d8a1/Images/Documentation/Information popup.png?sv=2026-02-06&spr=https&st=2026-10-26T12%3A27%3A18Z&se=2026-10-26T13%3A27%3A18Z&sr=c&sp=r&sig=1O5u4%2Bc3yup1sRB%2BfFHlOEUm%2FjW9cUCkxodGg%2Bao6u8%3D)

- Click **X** icon to close the popup.

#### Steps to Add Function (Dial Phone)

- Locate the **Card Suggestions**/ **Message Suggestions** section in the template editor.
- Toggle the switch **ON** to enable suggestions.
- Click to create or expand a **suggestion** entry.
- The UI displays a suggestion block (**For example**: Card Suggestion 1 / 4; Message Suggestion 1 / 11).
- In the **Function** dropdown select **Dial Phone.**
- In the **Button Text** field enter the label shown to users

**For example**: Call Support

> ![Note](https://cdn.document360.io/c578bb14-e570-4b6e-93ed-f6c5b8a2d8a1/Images/Documentation/Note.png?sv=2026-02-06&spr=https&st=2026-10-26T12%3A27%3A18Z&se=2026-10-26T13%3A27%3A18Z&sr=c&sp=r&sig=1O5u4%2Bc3yup1sRB%2BfFHlOEUm%2FjW9cUCkxodGg%2Bao6u8%3D)
> 
> Use clear, action-oriented Button Text.

![](https://cdn.document360.io/c578bb14-e570-4b6e-93ed-f6c5b8a2d8a1/Images/Documentation/Dial phone.gif?sv=2026-02-06&spr=https&st=2026-10-26T12%3A27%3A18Z&se=2026-10-26T13%3A27%3A18Z&sr=c&sp=r&sig=1O5u4%2Bc3yup1sRB%2BfFHlOEUm%2FjW9cUCkxodGg%2Bao6u8%3D)

- In the **Phone number** field enter a valid dialable number. Users can configure a **US-based** target phone number.

**For example**:

> ![Note](https://cdn.document360.io/c578bb14-e570-4b6e-93ed-f6c5b8a2d8a1/Images/Documentation/Note.png?sv=2026-02-06&spr=https&st=2026-10-26T12%3A27%3A18Z&se=2026-10-26T13%3A27%3A18Z&sr=c&sp=r&sig=1O5u4%2Bc3yup1sRB%2BfFHlOEUm%2FjW9cUCkxodGg%2Bao6u8%3D)
> 
> **Validate the phone number format**:
> 
> ✅ **Valid**: +1 (202) 555-0125
> 
> ❌ **Invalid**: (000) 000-0000 or 099 0000 011

- If the format is incorrect the UI shows a **validation error** “Enter a valid phone number.”
- Upon successful Dial Phone configuration, users will see a **call icon** in both the **editor** and **preview**, clearly indicating that the action will trigger a call.
- Locate the **Payload Text** field. Enter a value that represents the button action within **2048 characters (Optional).**

**For example**: call_support_clicked

> ![Note](https://cdn.document360.io/c578bb14-e570-4b6e-93ed-f6c5b8a2d8a1/Images/Documentation/Note.png?sv=2026-02-06&spr=https&st=2026-10-26T12%3A27%3A18Z&se=2026-10-26T13%3A27%3A18Z&sr=c&sp=r&sig=1O5u4%2Bc3yup1sRB%2BfFHlOEUm%2FjW9cUCkxodGg%2Bao6u8%3D)
> 
> The preview focuses on a standardized mobile layout. Actual devices may render differently. The preview doesn’t focus on functional execution.

- The message content ({"text":""} in the editor) appears as a chat bubble inside the mobile device mockup.
- A single button appears below the message bubble.
- The rounded button displays the configured **Button Text**.

**For example**: Call Support)
- The button is configured with the Dial Phone function.
- When tapped on an actual device:
  - The device opens the native calling interface
  - A call is initiated to the configured phone number

#### Steps to Delete an Action Button

> ![Note](https://cdn.document360.io/c578bb14-e570-4b6e-93ed-f6c5b8a2d8a1/Images/Documentation/Note.png?sv=2026-02-06&spr=https&st=2026-10-26T12%3A27%3A18Z&se=2026-10-26T13%3A27%3A18Z&sr=c&sp=r&sig=1O5u4%2Bc3yup1sRB%2BfFHlOEUm%2FjW9cUCkxodGg%2Bao6u8%3D)
> 
> Button1 doesn't have a delete option available until Button 2 is added as shown in the attached video.

- Go to the **Actions** section on the left side of the template editor
- Identify the **Button to Delete.** **For example**- The button labeled ‘Request Demo’ is under **Action 1**.
- Hover over and click the **Delete Icon**
- A confirmation message appears at the bottom-left corner stating **“Button deleted successfully.”**

![](https://cdn.document360.io/c578bb14-e570-4b6e-93ed-f6c5b8a2d8a1/Images/Documentation/Delete Action Button(1).gif?sv=2026-02-06&spr=https&st=2026-10-26T12%3A27%3A18Z&se=2026-10-26T13%3A27%3A18Z&sr=c&sp=r&sig=1O5u4%2Bc3yup1sRB%2BfFHlOEUm%2FjW9cUCkxodGg%2Bao6u8%3D)
- After deleting the second last button, only one button remains, and the delete icon disappears
- **Toggle off** **Card Suggestions** to delete all buttons This action removes all or remaining buttons completely.

### Control Behavior and Enablement

#### Add Buttons

- As soon as you activate the **Card Suggestions** toggle, the **+ Add** icon appears.
- Click the **+ Add** icon to add the next Action button. The system disables the **+ Add Action** control after you add four buttons.
- Remove any existing button to re-enable the **+ Add Action** control.
- The Delete icon appears next to each button.

![](https://cdn.document360.io/c578bb14-e570-4b6e-93ed-f6c5b8a2d8a1/Images/Documentation/add another action.gif?sv=2026-02-06&spr=https&st=2026-10-26T12%3A27%3A18Z&se=2026-10-26T13%3A27%3A18Z&sr=c&sp=r&sig=1O5u4%2Bc3yup1sRB%2BfFHlOEUm%2FjW9cUCkxodGg%2Bao6u8%3D)

- The system activates the button only when all these conditions are met. Ensure each button has:
  - A selected Function (Reply, Open URL or Dial Phone)
  - A valid Button Text
  - A valid Payload

### Preview

- Check the **Preview** panel on the right side of the editor.
- Confirm that the preview updates LIVE as you type.
- When you enable **Card Suggestions** and **Message Suggestions** in a Rich Card template, the preview panel displays them as follows:
- **Card Suggestions**
  - Appear as **blue text links** below the main message area.
  - Displayed in a vertical list format for easy tapping.
  - In this example:
    - **Request Demo**
    - **Request Visit**
- **Message Suggestions**
  - Appear as **rounded buttons** at the bottom of the card.
  - Positioned below the Card Suggestions for quick responses.
  - In this example:
    - **Interested**
    - **Not Interested**
- Verify that your **Title** and **Main Message** fit well and are not truncated.
- Adjust text if necessary for optimal display on mobile devices.