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

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.

 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.

• 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.

• 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

• 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.

• 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

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.

 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.

Set Horizontal Card Orientation

• Click the Horizontal Card Orientation 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:

  

   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.

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.

•  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.

 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.

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/

• 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.

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.

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.

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).

• 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.

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

• Open URL

• Reply

• Dial Phone

• When viewing the Action Type dropdown, additional RCS actions appear with a Coming Soon label:

  • Show Location

  • Request Location

  • Create Calendar Event

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.

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

 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.

• 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.

• 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

 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.

• 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

 Use clear, action-oriented Button Text. 

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

  For example:

 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

  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

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.”

  

• 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.

• 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.