In addition to traditional messaging types like text and audio, Applozic also provides a set of messaging options in the form of structured content templates. This article will guide you through creating a structure for sending some types of rich messages.onths.
Note: Rich message UI is only Supported in Applozic-Android-SDK and Applozic-Swift-SDK.
Identifying a rich message
Rich messages in Applozic can be categorized into 4 types – Buttons, Images, Lists, and Cards. But before we get to them, let’s talk about how to identify a rich message in our Applozic-powered chat app.
To send a rich message, we need to add the contentType property
into the message’s metadata to separate it from normal
messages. The value of contentType is 300 for rich
messages. Below is the metadata for all rich messages templates:
Apart from the content type, each rich message also has a templateId, which is different for different types of rich messages. The data of the rich message must be passed onto its payload. We will examine the payload for some types of rich messages as we discuss them in detail.
Here is how a rich message is generally structured:
Here are the different types of rich messages you can use in Applozic:
- Link Buttons
- Submit Buttons
- Suggested Replies
- Generic Card
- Card Carousel
In this article, we’ll be examining the implementation of suggested replies, images, and generic cards into our chat application
Suggested Reply Button
Suggested Replies provide a way to send some common replies to messages with just a click, without having to type them out manually.
To render suggested replies on the UI, we need to send 2 fields in the payload:
- title: display name for the button.
- message: A message that would be sent as a reply.
Here is a sample payload for suggested replies:
On clicking the button, a message would be sent with the text
from the message property of the payload. To get the click
outside the SDK you can use the following code. For Android,
you will need to implement the ALRichMessageListener.
Here is the sample JSON for suggested replies:
The image object contains a caption (optional) and an image URL. You can send a list of image objects in the payload. There is no action supported on the image template.
Here is a sample payload for an image:
Here is a sample JSON for the image:
The card template is a list of structured items with title, subtitle, image, and buttons. A generic card template contains components as shown below.
- Image (optional) (Recommended size: 720x280px)
- Overlay text (optional)
- Card information section
- Title (Character limit: 16)
- Title extension (optional)
- Subtitle (Character limit: 56)
- Description (Character limit is 99 and use \n to break the line.)
- Card footer may contain a list of buttons, it can be:
- Link Button
- Submit Button
- Suggested Replies
Actions on the button
- Link: It will navigate the user to another page in a new tab.
- Submit Button: Submit Button allows you to post given data or redirect the user to a given URL.
- Suggested Replies: It will send a message with the given text if passed. The default value will be the title of the list item or the name of the button. The action is specified by the action object passed along with each item and button. Sample action object for Suggested Reply:
Here is the sample JSON payload for the single card:
Use the following JSON to send a generic card rich message:
We began this article by discussing how integrating rich messaging into your chat application can prove beneficial for engaging potential customers. We also delved into the implementation of images, suggested reply buttons, and generic cards using Applozic’s versatile SDK.