applozic
arrowBack to Tutorial
Introduction

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.

In order to achieve this behavior, the information must be sent in a structured format that can be included in the metadata of a message. The most common format is JSON (Javascript Object Notation).

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:

  1. Buttons
    1. Link Buttons
    2. Submit Buttons
    3. Suggested Replies
  2. Images
  3. List
  4. Cards
    1. Generic Card
    2. 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:

  1. title: display name for the button.
  2. 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:



Images

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:



Generic Cards

The card template is a list of structured items with title, subtitle, image, and buttons. A generic card template contains components as shown below.

  • Header
    • 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:



Conclusion

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.

To add more rich messaging features like lists and card carousels, visit Applozic’s documentation website.