Rich Messaging

In addition to text, audio, attachment etc type of messages Applozic also provides a set of structured messaging options in form of message templates, suggested replies, buttons and more. This documentation will guide you through creating a structure for sending these types of messages.
The structure for the messages is defined in the form of a JSON and then sent in the metadata of a message.
These types of messages are called rich messages.
Roughly rich messages in Applozic can be categorised into 4 types, Buttons, Images, Lists and Cards.
But before we get to them, lets talk about how to identify a rich message.

🚧

Important

Rich message UI is only Supported in

  • Applozic-Android-SDK and
  • ApplozicSwift
    Pod: ApplozicSwift

Not supported in Applozic objective C SDK :

  • Applozic-iOS-SDK
  • Pod: Applozic

Identifying a Rich message

“contentType” property has been added into metadata to separate rich messages from normal messages. The value of “contentType” is “300” for rich messages. Below is the metadata for all rich messages templates :

{
    "contentType":"300"
}

Apart from the content type, each rich message also has a template id which is different for different types of rich messages. You can think of it is a identification for a rich message.

The data in the messages goes in the payload.
We will tell you more about the payload for the different types of messages as we discuss them in detail.

Here is how a rich message is generally structured:

{
    "message": "click on the buttons",
    "metadata": {
        "contentType": "300",//the content type is 300 for rich messages
        "templateId": "x",//x is a integer which differs for different types of rich messages
        "payload": "{//data pertaining to the rich message }"
    }
}

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

Buttons

Buttons on being pressed do a specific action. This depends on the type of button.

Note: A Rich Message of this type can have any number of buttons, in any combination.
Simply add them in the payload.

Below are the types of Buttons you can have:

Link Button

Link Button redirects users to a given URL in a new tab.
The templateId of link buttons is 3.

Link Button (Android)Link Button (Android)

Link Button (Android)

Link Button (iOS)Link Button (iOS)

Link Button (iOS)

In the payload:

  1. type is equal to "link".
  2. url has the url that the button should redirect to.
  3. name will hold the text that will be displayed on the button.

Below is a sample JSON for the payload:

"payload": [{
    "type": "link",
    "url": "https://www.google.com",
    "name": "Go To Google"
    },
    {
    "type": "link",
    "url": "https://www.facebook.com",
    "name": "Go To Facebook"
    }
]

Here is the sample JSON for link button:

{
  "to" : "userid",
    //or
//"groupId" : "groupId",
  "message" : "This is a sample message.",
  "metadata" : {
    "templateId" : "3",
    "contentType" : "300",
    "payload" : "[{\"type\": \"link\", \"url\": \"https:\/\/www.google.com\",\"name\": \"Go To Google\"\r\n},{\"type\": \"link\",\"url\": \"https:\/\/www.facebook.com\",\"name\": \"Go To Facebook\"}]"
}
}

Submit Button

Submit Button allows you to post given data or redirect the user to a given URL.
The templateId of submit buttons is 3.

Submit Button (Android)Submit Button (Android)

Submit Button (Android)

Submit Button (iOS)Submit Button (iOS)

Submit Button (iOS)

The payload for a submit button message looks like this:

"payload": [{
   "name": "Pay",
   "replyText":"optional, will be used as acknowledgement message to user              in case of requestType JSON. Default value is same as name parameter"
   }],
"formData": {
   "amount": "1000",
   "description": "movie ticket"
},
"formAction": "https://example.com/book",
"requestType":"json"

If parameter requestType:json is included, it will post the data with content type application/json on the formAction URL and the replyText will be used as acknowledgement message.

Default value for replyText is same as the value passed in name parameter. If requestType parameter is not passed, it will submit the formData with contentType application/x-www-form-urlencoded and redirect the user on formAction URL. The response will be rendered in new tab.

Here is the JSON for a sample submit button:

{
  "to" : "userid",
  //or
//"groupId" : "groupId",
  "message" : "This is a sample message.",
  "metadata" : {
    "templateId" : "3",
    "contentType" : "300",
    "payload" : "[{\"name\": \"Pay\",\"replyText\":\"optional, will be used as acknowledgement message to user in case of requestType JSON. Default value is same as name parameter\"}]",
"formData": "{\"amount\": \"1000\",\"description\": \"movie ticket\"}",
"formAction": "https://example.com/book",
"requestType":"json" 
}
}

Suggested Replies

Suggested Replies provide a way to send messages on a click without typing them all out manually.
To render suggested replies on the UI you 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.

The templateId for suggested replies is 6.

Suggested Replies (Android)Suggested Replies (Android)

Suggested Replies (Android)

Suggested Replies (iOS)Suggested Replies (iOS)

Suggested Replies (iOS)

Here is a sample payload for suggested replies:

"payload": [{
   "title": "Yes",
   "message": "Cool! send me more."
   },
   {
   "title": "No",
   "message": "Not at all",
   }
}]

On click of 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 to implement the ALRichMessageListener.

public class SampleApplication extends Application implements ALRichMessageListener//this can also be an activity or a fragment
{
  
   @Override
    public void onAction(Context context, String action, Message message, Object object) {
        if("Click" == action){
              String text = (String) object;//object will be the message text from the button
          //message will be applozic message object
          }   
    }
}
NotificationCenter.default.addObserver(forName: NSNotification.Name(rawValue: “QuickReplyButtonSelected”), object: nil, queue: nil) { (object) in
           print(“\(object)“)
           /// Object contains 6 elements.
           /// “buttonName” - This contains name of the button.
           /// “buttonIndex” - This contains index of the button when you are showing list of buttons.
           /// “messageKey” - Key of the message object.
           /// “userId” - User Id of the receiver.
           /// “template” - This is the dictionary of the selected suggested reply that you passed in the message object.
}

Here is the sample JSON for suggested replies:

{
  "to": "userid",  
  //or
//"groupId" : "groupId",
  "message": "Do you want more updates?",
    "metadata": {
        "contentType": "300",
        "templateId": "6",
        "payload": "[{\"title\": \"Yes\",\"message\": \"Cool! send me more.\"},         {\"title\": \"No\",\"message\": \"Not at all\"}]"
    }
}

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 image template.
The templateId of a image is 9.

Image (Android)Image (Android)

Image (Android)

Image (iOS)Image (iOS)

Image (iOS)

Here is a sample payload for an image:

"payload": [
  {
    "caption": "Image caption",
    "url": "https://images.pexels.com/photos/544980/pexels-photo-544980.jpeg?cs=srgb&dl=dew-drop-droplet-544980.jpg&fm=jpg"
  }
]

Here is a sample JSON for the image:

{
  "to" : "userid",
    //or
//"groupId" : "groupId",
  "message" : "This is a sample message.",
  "metadata" : {
    "templateId" : "9",
    "contentType" : "300",
    "payload" : "[{\"caption\": \"Image caption\",\"url\": \"https:\/\/images.pexels.com\/photos\/544980\/pexels-photo-544980.jpeg?cs=srgb&dl=dew-drop-droplet-544980.jpg&fm=jpg\"}]"
   }
}

List

The list template is a list of structured items with an optional header image and header text.
The templateId of a list is 7.

Components of a List

A list template may contain below items:

  • Header Image (Recommended size: 910 x 330px)
  • Header text (Character limit: 75)
  • List of items: Each item may contain below components:
    • Thumbnail image (Recommended size: 150 x 150px)
    • Title (Character limit: 32)
    • Description (Character limit: 35)
    • The action of the item
  • List of buttons: Each button may contain below components:
    • Name of button
    • The action of the button
List (Android)List (Android)

List (Android)

List (iOS)List (iOS)

List (iOS)

Actions on the List

There are two types of action supported on list items and buttons.

  • Link: It will navigate the user to another page in a new tab.
  • Suggested Replies: It will send a message with given text if passed. The default value will be the title of the list item or name of the button. The action is specified by the action object passed along with each item and button. This is how the action object looks like :
// for Suggested Reply, the action object will look like this:
"action": {
    "type": "quick_reply",
    "text": "This text will be sent as message"
}

// for Link, the action object will look like this:
"action": {
    "type": "link",
    "url": "URL to navigate other page"
}

Here is the payload for a List:

"payload": {
   "headerImgSrc": "URL for header image",
   "headerText": "Header text.",
   "elements": [{
       "imgSrc": "Thumbnail icon for list item",
       "title": "List item 1",
       "description": "Description for the list item",
       "action": {
           "url": "https://www.google.com",
           "type": "link"
       }
    }],
    "buttons": [{
        "name": "See us on facebook",
        "action": {
           "url": "https://www.facebook.com",
           "type": "link"
        }
    }]
}

Here is the sample JSON for a list:

{
  "to" : "userid",
    //or
//"groupId" : "groupId",
  "message" : "This is a sample message.",
  "metadata" : {
    "templateId" : "7",
    "contentType" : "300",
    "payload" : "{\"headerImgSrc\": \"https:\/\/images.pexels.com\/photos\/544980\/pexels-photo-544980.jpeg?cs=srgb&dl=dew-drop-droplet-544980.jpg&fm=jpg\",\"headerText\": \"Header text.\",\"elements\": [{     \"imgSrc\": \"https:\/\/images.pexels.com\/photos\/544980\/pexels-photo-544980.jpeg?cs=srgb&dl=dew-drop-droplet-544980.jpg&fm=jpg\",\"title\": \"List item 1\",\"description\": \"Description for the list item\",\"action\": {\"url\": \"https:\/\/www.google.com\",\"type\": \"link\"}}],\"buttons\": [{\"name\": \"See us on facebook\",\"action\": {\"url\": \"https:\/\/www.facebook.com\",\"type\": \"link\"}}]}"
   }
}

Cards

The card template is a list of structured items with title, subtitle, image, and buttons.

There are two types of Cards supported in Applozic:

  • Generic Card
  • Carousel Card

Generic Card

A generic card template contain components as shown below.
The templateId of cards is 10.

Generic Card (Android)Generic Card (Android)

Generic Card (Android)

Generic Card (iOS)Generic Card (iOS)

Generic Card (iOS)

  • Header
    • Image (optional) (Recommended size: 720280px)*
    • 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 given text if passed. The default value will be the title of the list item or 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:
"action": {
    "type": "quickReply",
    "payload": {
        "title": "Yes",
        "message": "text will be sent as message",
    }
}

Sample action object for Link:

"action": {
    "type": "link",
    "payload": {
        "url": "https://www.facebook.com"
    }
}

Sample action object for Submit Button:

"action": {
    "type": "submit",
    "payload": {
        "text": "Button text",
        "formData": {
            "amount": "1000",
            "description": "movie ticket"
        },
        "formAction": "https://example.com/book",
        "requestType": "json"
    }
}

Here is the sample JSON payload for the single card:

"payload": [
      {
        "title": "Card Title",
        "subtitle": "Card Subtitle ",
        "header": {
          "overlayText": "Overlay Text",
          "imgSrc": "Header Image URL"
        },
        "description": "This is a sample description of the card. It is for sampling purposes.",
        "titleExt": "title extension",
        "buttons": [
          {
            "name": "Open Facebook",
            "action": {
              "type": "link",
              "payload": {
                "url": "https://www.facebook.com"
              }
            }
          }
        ]
      }
    ]

Use the following JSON to send a generic card rich message:

{
  "to" : "userid",
    //or
//"groupId" : "groupId",
  "message" : "This is a card.",
  "metadata" : {
    "templateId" : "10",
    "contentType" : "300",
    "payload" : "[{\"title\": \"Card Title\",\"subtitle\": \"Card Subtitle \",\"header\": {\"overlayText\": \"Overlay Text\",\"imgSrc\": \"https:\/\/image.freepik.com\/free-photo\/tropical-green-leaves-background_53876-88891.jpg\"},\"description\": \"This is a sample description of the card. It is for sampling purposes.\", \"titleExt\": \"title extension\",\"buttons\": [{\"name\": \"Open Facebook\",\"action\": {\"type\": \"link\", \"payload\": {        \"url\": \"https:\/\/www.facebook.com\"}}}]}]"
   }
}

You can add any number of buttons in your card footer.

Actions for generic cards:

To receive the click action of a for a message you need to implement the ALRichMessageListener in your Application class and then override the onAction method from it.

@Override
    public void onAction(Context context, String action, Message message, Object object) {
    //action will be the text that is sent in the action field 
    //message will be the complete message object containing the payload in the metadata
    //object will be the text that is sent in the data field.
        switch (action) {
            case "sendMessage":
                new MessageBuilder(context).setMessage((String) object).setGroupId(message.getGroupId()).send();
                break;

            case "openUrl":
                Intent intent = new Intent(context, PaymentActivity.class);
                intent.putExtra("formAction", (String) object);
                context.startActivity(intent);
                break;

            case "openActivity":
                Intent intent1 = new Intent(context, MainActivity.class);
                context.startActivity(intent1);
        }
    }
/// For Generic Card
NotificationCenter.default.addObserver(forName: NSNotification.Name(rawValue: "GenericRichCardButtonSelected"), object: nil, queue: nil) { (object) in
            print("\(object)")
            /// Object contains 6 elements.
            /// "card" - This contains information about the generic card that has been clicked.
            /// "template" - This contains complete payload passed in the message object.
            /// "messageKey" - Key of the message object.
            /// "userId" - User Id of the receiver.
            /// "buttonIndex" - Index of the button that has been tapped(index starts from 1).
            /// "buttonName" - Name of the button that has been tapped.
}

/// For Generic List
NotificationCenter.default.addObserver(forName: NSNotification.Name(rawValue: "GenericRichListButtonSelected"), object: nil, queue: nil) { (object) in
            print("\(object)")
            /// Object contains 5 elements.
            /// "template" - This contains complete payload passed in the message object.
            /// "messageKey" - Key of the message object.
            /// "userId" - User Id of the receiver.
            /// "buttonIndex" - Index of the button that has been tapped(index starts from 0).
            /// "buttonName" - Name of the button that has been tapped.
        }

Card Carousel

You can also have more than one cards. They will then be horizontally scroll-able. This is a Card Carousel.
The templateId for carousel is 10.

Card Carousel (Android)Card Carousel (Android)

Card Carousel (Android)

Card Carousel (iOS)Card Carousel (iOS)

Card Carousel (iOS)

The payload is an array of objects, each object can be different cards. So you can pass multiple objects inside the payload.

Here is the sample JSON payload for the card carousel:

"payload": [
      {
        "title": "OYO Rooms 1",
        "subtitle": "Kundanahalli road turn.",
        "header": {
          "overlayText": "$400",
          "imgSrc": "https://images.pexels.com/photos/271624/pexels-photo-271624.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
        },
        "description": "Bharathi Road \n Near Head Post Office",
        "titleExt": "4.2/5",
        "buttons": [
          {
            "name": "Link Button",
            "action": {
              "type": "link",
              "payload": {
                "url": "https://www.facebook.com"
              }
            }
          },
          {
            "name": "Suggested Reply",
            "action": {
              "type": "quickReply",
              "payload": {
                "message": "text will be sent as message",
                "replyMetadata": {
                  "key1": "value1"
                }
              }
            }
          },
          {
            "name": "Submit button",
            "action": {
              "type": "submit",
              "payload": {
                "text": "acknowledgement text",
                "formData": {
                  "amount": "$55",
                  "description": "movie ticket"
                },
                "formAction": "https://example.com/book",
                "requestType": "json"
              }
            }
          }
        ]
      },
      {
        "title": "OYO Rooms 2",
        "subtitle": "Kundanahalli ",
        "header": {
          "overlayText": "$360",
          "imgSrc": "https://images.pexels.com/photos/271624/pexels-photo-271624.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
        },
        "description": "Bharathi Road | Near Head Post Office, Cuddalore 607001",
        "titleExt": "4.2/5",
        "buttons": [
          {
            "name": "Link Button",
            "action": {
              "type": "link",
              "payload": {
                "url": "https://www.facebook.com"
              }
            }
          },
          {
            "name": "Submit button",
            "action": {
              "type": "submit",
              "payload": {
                "text": "acknowledgement text",
                "formData": {
                  "amount": "$22",
                  "description": "movie ticket"
                },
                "formAction": "https://example.com/book",
                "requestType": "json"
              }
            }
          },
          {
            "name": "Suggested Reply",
            "action": {
              "type": "quickReply",
              "payload": {
                "message": "text will be sent as message",
                "replyMetadata": {
                  "key1": "value1"
                }
              }
            }
          }
        ]
      },
      {
        "title": "OYO Rooms 3",
        "subtitle": "Kundanahalli ",
        "header": {
          "overlayText": "$750",
          "imgSrc": "https://images.pexels.com/photos/271624/pexels-photo-271624.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
        },
        "description": "Bharathi Road | Near Head Post Office, Cuddalore 607001",
        "titleExt": "4.2/5",
        "buttons": [
          {
            "name": "Link Button",
            "action": {
              "type": "link",
              "payload": {
                "url": "https://www.facebook.com"
              }
            }
          },
          {
            "name": "Submit button",
            "action": {
              "type": "submit",
              "payload": {
                "text": "acknowledgement text",
                "formData": {
                  "amount": "$45",
                  "description": "movie ticket"
                },
                "formAction": "https://example.com/book",
                "requestType": "json"
              }
            }
          },
          {
            "name": "Suggested Reply",
            "action": {
              "type": "quickReply",
              "payload": {
                "message": "text will be sent as message",
                "replyMetadata": {
                  "key1": "value1"
                }
              }
            }
          }
        ]
      }
    ]

Use the following JSON to send a rich message of this type:

{
  "to" : "userid",
    //or
//"groupId" : "groupId",
  "message" : "Here is a list of hotels.",
  "metadata" : {
    "templateId" : "10",
    "contentType" : "300",
    "payload" : "[{\"title\": \"OYO Rooms 1\",\"subtitle\": \"Kundanahalli road turn.\",\"header\": {\"overlayText\": \"$400\",\"imgSrc\":  \"https:\/\/images.pexels.com\/photos\/271624\/pexels-photo-271624.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940\"},\"description\": \"Bharathi Road \\n Near Head Post Office\",\"titleExt\": \"4.2\/5\",\"buttons\": [{\"name\": \"Link Button\",\"action\": {\"type\": \"link\",\"payload\": {\"url\": \"https:\/\/www.facebook.com\"}}},{\"name\": \"Suggested Reply\",\"action\": {\"type\": \"quickReply\",\"payload\": {\"message\": \"text will be sent as message\",\"replyMetadata\": {\"key1\": \"value1\"         }}}},{\"name\": \"Submit button\",\"action\": {\"type\": \"submit\",\"payload\": {\"text\": \"acknowledgement text\",\"formData\": { \"amount\": \"$55\",                  \"description\": \"movie ticket\"},\"formAction\": \"https:\/\/example.com\/book\",\"requestType\": \"json\"}}}]},{\"title\": \"OYO Rooms 2\",\"subtitle\": \"Kundanahalli \",\"header\": {\"overlayText\": \"$360\",\"imgSrc\":  \"https:\/\/images.pexels.com\/photos\/271624\/pexels-photo-271624.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940\"},\"description\": \"Bharathi Road | Near Head Post Office, Cuddalore 607001\",  \"titleExt\": \"4.2\/5\",\"buttons\": [{\"name\": \"Link Button\",\"action\": {\"type\": \"link\",\"payload\": {\"url\": \"https:\/\/www.facebook.com\"       }}},{\"name\": \"Submit button\",\"action\": {\"type\": \"submit\",\"payload\": {\"text\": \"acknowledgement text\",\"formData\": { \"amount\": \"$22\",\"description\": \"movie ticket\"}, \"formAction\": \"https:\/\/example.com\/book\",\"requestType\": \"json\"}}},{\"name\": \"Suggested Reply\",\"action\": {\"type\": \"quickReply\",\"payload\": { \"message\": \"text will be sent as message\",\"replyMetadata\": {\"key1\": \"value1\"}}}}]},{\"title\": \"OYO Rooms 3\",\"subtitle\": \"Kundanahalli \",\"header\": {   \"overlayText\": \"$750\",\"imgSrc\":  \"https:\/\/images.pexels.com\/photos\/271624\/pexels-photo-271624.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940\"},\"description\": \"Bharathi Road | Near Head Post Office, Cuddalore 607001\",\"titleExt\": \"4.2\/5\",\"buttons\": [{\"name\": \"Link Button\",\"action\": {\"type\": \"link\", \"payload\": {\"url\": \"https:\/\/www.facebook.com\"}}},{\"name\": \"Submit button\",\"action\": {\"type\": \"submit\",\"payload\": {\"text\": \"acknowledgement text\",\"formData\": {\"amount\": \"$45\",\"description\": \"movie ticket\"},\"formAction\": \"https:\/\/example.com\/book\",\"requestType\": \"json\"}}},{  \"name\": \"Suggested Reply\",\"action\": {\"type\": \"quickReply\",\"payload\": {\"message\": \"text will be sent as message\", \"replyMetadata\": {\"key1\": \"value1\"}}}}]}]"
   }
}

Did this page help you?