Skip to main content

Business Messages - Components

  • Updated

Index:

  1. Introduction
  2. Quick Reply
  3. Carousel Rich Card
  4. How To Create Your JSON Components
  5. Standalone Rich Card
  6. Standalone Rich Card with Media
  7. Suggested Actions (Open a Link and/or Dial a Number)
  8. How to Customize Your Own Components

 

 

Introduction

The following types of messages have already been integrated with Blip, which means you can simply use Blip's already built-in components through Builder.

Quick Reply

Here is an example showing how you can use Blip's own quick reply feature to create suggestions on GBM.

First step is to create the Quick Reply feature through a block in Builder.

quick-reply-1.png

 

Edit the Quick Reply as you wish.

 

That's it! This is how your message will be seen when using GBM:

 

quick-reply-3.jpg

 

Carousel Rich Card

Here is an example showing how you can use Blip's own carousel feature to create carousel rich cards on GBM.

First step is to create the Carousel feature through a block in Builder.

carousel-1.png

 

Edit the Carousel as you wish.

carousel-2.png

 

That's it! This is how your message will be seen when using GBM:

carousel-3.jpg

 

How To Create Your JSON Components

How to Begin

This wiki page will show you how to create the JSON file for many different types of GBM messages in an easy to understand way by giving you an example for each case.

Before each one of the examples below, you will need to follow these next two steps:

First step is to create a dynamic content through any block in builder.

json-1.png

 

Remember to set the type of the dynamic content to application/json.

json-2.png

 

Important notes:

Your final message will only be visible through GBM, if you're trying to test this using any other channel such as Blip Chat it will display "Unsupported Content" instead of the correct content.

If your message contains a suggestion field, that is, a button for the user to press, then you must also create an "awaiting user input" command in the block through Blip.

json-3.png

json-3-1.png

Image

The Json file to send an image is:

{
   "image": {
      "contentInfo": {
         "fileUrl": "https://www.take.net/files/themes/blank_theme/assets/img/take-og-image.png"
      }
   }
}

 

This is what the final message in GBM will look like:

json-4.jpg

 

Image with Suggestions

The "postbackData" field is the value that you should treat as the user's reply when they click the suggestion button.

The final Json file to create an Image with Suggestions is:

{
   "suggestions": [
           {
              "reply": {
                  "text": "Suggestion 01",
                  "postbackData": "reply1"
              }
           },
           {
              "reply": {
                  "text": "Suggestion 02",
                  "postbackData": "reply2"
              },
           }
     ],
     "image": {
         "contentInfo": {
             "fileUrl": "https://www.take.net/files/themes/blank_theme/assets/img/take-og-image.png"
         }
   }
}

 

This is what the final message in GBM will look like:

json-5.png

 

Standalone Rich Card

The "postbackData" field is the value that you should treat as the user's reply when they click the suggestion button.

The final Json file to create a Standalone Rich Card is:

{
    "richCard": {
        "standaloneCard": {
            "cardContent": {
                "title": "Título do Standalone Rich Card",
                "description": "Descrição do Standalone Rich Card",
                "suggestions": [
                    {
                        "reply": {
                            "text": "Suggestion 01",
                            "postbackData": "reply1"
                        }
                    },
                    {
                        "reply": {
                            "text": "Suggestion 02",
                            "postbackData": "reply2"
                        }
                    }
                ]
            }
        }
    }
}

 

This is what the final message in GBM will look like:

json-6.jpg

 

Standalone Rich Card with Media

The "postbackData" field is the value that you should treat as the user's reply when they click the suggestion button.

The final Json file to create a Standalone Rich Card is:

{
    "richCard": {
        "standaloneCard": {
            "cardContent": {
                "title": "Título do Standalone Rich Card",
                "description": "Descrição do Standalone Rich Card",
                "media": {
                    "height": "SHORT",
                    "contentInfo": {
                        "fileUrl": "https://www.take.net/files/themes/blank_theme/assets/img/take-og-image.png"
                    }
                },
                "suggestions": [
                    {
                        "reply": {
                            "text": "Suggestion 01",
                            "postbackData": "reply1"
                        }
                   },
                   {
                        "reply": {
                            "text": "Suggestion 02",
                            "postbackData": "reply2"
                        }
                    }
                ]
            }
        }
    }
}

 

This is what the final message in GBM will look like:

json-7.jpg

 

Suggested Actions (Open a Link and/or Dial a Number)

The "postbackData" field is the value that you should treat as the user's reply when they click the suggestion button.

The "text" field has a maximum of 25 characters.

The final Json file to create a Standalone Rich Card is:

{
    "suggestions": [
            {
                "action": {
                    "text": "Title of Action 01",
                    "postbackData": "link",
                    "openUrlAction": {
                        "url": "https://www.take.net/"
                      } 
                }
            },
            {
                "action": {
                    "text": "Title of Action 02",
                    "postbackData": "dial",
                    "dialAction": {
                        "phoneNumber": "+5531999999999"
                     }
                }
           }
       ],
   "text": "Suggestions Text"
}

 

This is what the final message in GBM will look like:

json-8.jpg

 

If you click on the "Title of Action 01" button, it will open the url specified in the json: "https://www.take.net/ ", and if you click the "Title of Action 02" button, it will dial the number specified in the "phoneNumber" field: "+5531999999999".

For a message containing only one button that opens a link, you can use the Json below:

{
    "suggestions": [
            {
                "action": {
                    "text": "Title of Action 01",
                    "postbackData": "link",
                    "openUrlAction": {
                        "url": "https://www.take.net/"
                      } 
               }
           }
       ],
   "text": "Suggestions Text"
}

 

And for a message containing only one button that dials a phone number, you can use the following Json

{
    "suggestions": [
            {
                "action": {
                   "text": "Title of Action 02",
                   "postbackData": "dial",
                   "dialAction": {
                       "phoneNumber": "+5531999999999"
                    }
                }
            }
       ],
   "text": "Suggestions Text"
}

 

How to Customize Your Own Components

Introduction

This wiki page will teach you how to create your own Json files to send all kinds of customized messages from Blip to GBM as dynamic content.

The tutorial in this page follows a strict set of rules in order to make your final Json work as dynamic content in Blip, but if you want to know more about each component, you can visit GBM's Documentation . Keep in mind that their template may look different than the one on this page and if you follow theirs your message may not work. Some fields that are present in the original documentation aren't present on this wiki because they either can be created utilizing Blip's own tools, such as the Carousel Rich Card for example, or because they shouldn't be used.

 

Template Overview

The messages you'll send as dynamic content using this guide need to have the application/json type.

All of the following "object ()" components are expanded upon in this wiki, they are a field composed of other fields, but your final Json file shouldn't have any "object ()" components written on it. For example, the "object (SuggestedReply)" is composed of a "text" field and a "postbackData" field, so your final Json file will have a "text" and "postbackData" fields in-place of the "object (SuggestedReply)" field.

The general template is as follows:

{
    "suggestions": [
        {
            object (Suggestion)
        }
    ],
    "fallback": string,
    "containsRichText": boolean,

    // Union field content can be only one of the following:
    "text": string,
    "image": {
        object (Image)
    },
    "richCard": {
        object (RichCard)
    }
    // End of list of possible types for union field content.
}

suggestions[]: object (Suggestion). A list of suggested replies that appear as a list of suggestion chips following the associated message. Maximum 13 suggestions.

Keep in mind that the suggestions functionality is equivalent to Blip's quick reply, which is already integrated with the GBM channel, so if you need to create a message comprised of only the suggestions and a text, use Blip's own quick reply, if you need to mix suggestions with images on the same message, for example, then you must use the dynamic content.

fallback: String. Optional. Fallback text that displays if the user's device doesn't support the message type or content.

containsRichText: Boolean. Optional. If true, indicates that the message contains rich text.

You must choose only one of the following:

text: String. A text message.

image: object (Image). An image message.

richCard: object (RichCard). Rich card message.

Suggestion

object (Suggestion)

// Union field option can be only one of the following:
"reply": {
  object (SuggestedReply)
},
"action": {
  object (SuggestedAction)
}
// End of list of possible types for union field option.

 

You must choose only one of the following:

reply: object (SuggestedReply). A suggestion for the user to reply with specified text.

action: object (SuggestedAction). A suggested action that initiates a native action on the device.

object (SuggestedReply)

When tapped, sends the text reply back to the agent.

"text": string,
"postbackData": string

 

text: String. Text that is shown in the suggested reply and sent to the agent when the user taps it. Maximum 25 characters.

postbackData: String. The string that the agent receives when a user taps the suggested reply, this is what should be evaluated when validating user input.

object (SuggestedAction)

When tapped, initiates the corresponding native action on the device.

"text": string,
"postbackData": string,
// Union field action can be only one of the following:
"openUrlAction": {
  {
    "url": string
  } 
},
"dialAction": {
  {
    "phoneNumber": string
  }
}
// End of list of possible types for union field action.

 

text: String. Text that is shown in the suggested action. Maximum 25 characters.

postbackData: String. The string that the agent receives when a user taps the suggested action.

url: String. The URL which will be opened in the openUrlAction.

phoneNumber: String. Required. The specified phone number which will de dialed.

You must choose only one of the following:

dialAction: Opens the user's default dialer app.

openUrlAction: Opens the specified URL.

Image

object (Image)

"image": {
  "contentInfo": {
    object (ContentInfo)
  }
}

 

contentInfo: object (ContentInfo). Information about an image, including the URL of the image and the URL of the image's thumbnail.

object (ContentInfo)

"fileUrl": string,
"thumbnailUrl": string,
"forceRefresh": boolean,
"altText": string

 

fileUrl: String. Publicly reachable URL of the file. Maximum 5 MB.

Supported types: image/jpeg, image/jpg, image/png.

thumbnailUrl: String. Optional. Publicly reachable URL of the thumbnail. Maximum 25 KB.

Supported content types: image/jpeg, image/jpg, image/png.

forceRefresh: Boolean. If set, the platform fetches the file and thumbnail from the specified URLs, even if the platform has cached copies of the file (and/or of the thumbnail).

altText: String. Text describing the details about the media for accessibility purposes.

RichCard

object (RichCard)

A standalone rich card or a carousel of rich cards sent from the agent to the user.

"standaloneCard": {
  object (StandaloneCard)
}

 

standaloneCard: object (StandaloneCard). Standalone card.

object (StandaloneCard)

"cardContent": {
    object (CardContent)
}

 

cardContent: object (CardContent). The contents of the card such as title, description, etc.

object (CardContent)

"title": string,
"description": string,
"media": {
   object (Media)
},
"suggestions": [
  {
   object (Suggestion)
  }
]

 

title: String. Optional. Title of the card. Maximum 200 characters.

description: String. Optional. Description of the card. Maximum 2000 characters.

media: object (Media). Optional. Media to include in the card.

suggestions[]: object (Suggestion). Optional. List of suggestions to include in the card. Maximum 4 suggestions.

object (Media)

A media file within a rich card.

"height": enum (Height),
"contentInfo": {
    object (ContentInfo)
}

 

height: enum (Height). The height of the media within a rich card.

Enums Values
HEIGHT_UNSPECIFIED Not specified.
SHORT
 		112 DP.
MEDIUM 168 DP.
TALL
 		264 DP. Not available for rich card carousels when the card width is set to SMALL.

contentInfo: object (ContentInfo). Information about an image, including the URL of the image and the URL of the image's thumbnail.

 

 

For more information, visit the discussion on the subject at our community or  videos on our channel. 😃

Related articles