Rich Messaging

Quick Replies

Quick Replies offer the customer a choice of responses to the last agent or last chat bot message in the transcript. Tapping or clicking one of these Quick Replies posts that reply back to the agent as a text message. This saves the customer from having to type a response manually.

Quick Replies are very flexible. A chat bot or agent can provide context-sensitive quick replies that aid in making a selection, polite responses (such as "OK", "Thank you", "Yes, please" in the customer's native language), numeric responses, or choose from a set of preset time slots.

JSON Examples

Quick Replies are attached to standard chat message objects by adding a few additional properties:

• type - The type of message object received. For quick replies, the value will be "Message".
• contentType - The type of rich message content attached to the message. For quick replies, the value will be "quick-replies".
• content - An array of rich message content and other attachments. For quick replies, this will contain quick reply objects.

Top level of message object

Note, this example is only showing properties related to quick replies. All other properties normally included inside a message object have been omitted.

{
    "type": "Message",
    "contentType": "quick-replies",
    
    "messageType": "text",
    "text": "Will 3:00PM tomorrow work for you?",
 
    "content": [

        {"id": 1, "type": "quick-reply", "action": "message","text": "Sounds Good."},
        {"id": 2, "type": "quick-reply", "action": "message","text": "No, sorry."},
        {"id": 3, "type": "quick-reply", "action": "message","text": "What else?"}
    ]
}

Generic Templates

Generic Templates allow you to craft custom cards with an array of different components like buttons, link, and text.

You may craft your generic templates in many different ways. You can send a generic template that appears only as a clickable image, or you can send a video the same way. You may add or omit any property or component to build your generic template the way you want.

JSON Examples

Generic Templates are attached to standard chat message objects by adding a few additional properties:

• type - The type of message object received. For generic templates, the value will be "Structured".
• contentType - The type of rich message content attached to the message. For generic templates, the value will be "generic".
• content - An array of rich message content and other attachments. For generic templates, this will contain generic template objects.

Top level of message object

Note, this example is only showing properties related to generic templates. All other properties normally included inside a message object have been omitted.

{ 
    "type": "Structured",
    "contentType": "generic",

    "messageType": "text",
    "text": "",
 
    "content": [

        {
            "id": "987a6c84-ada0-468f-86e1-e9ea715b8c32",
            "title": "50% off Flights to Norway",
            "desc": "Valid September to November only",
            
            "image": "https://media1.tenor.com/images/6191ba63359dba8a0ef18f178616c2cd/tenor.gif",
            "video": "",

            "actions": {

                "url": "http://www.samplesite.com/flights/norway",
                "urlTarget": "__ARCH"
            },
 
            "components": [
 
                {
                    "id": "0",
                    "type": "button",
                    "text": "View Details",
                    "title": "View Details",
                    "actions": {

                        "url": "http://www.samplesite.com/flights/norway",
                        "urlTarget": "__BLANK"
                    }
                },
 
                {
                    "id": "1",
                    "type": "button",
                    "text": "Book Now",
                    "title": "Book Now",
                    "actions": {

                        "url": "http://www.samplesite.com/flights/norway/book",
                        "urlTarget": "__BLANK"
                    }
                }
            ]
        }
    ]
}

Actions

Rich Messages allow you to configure actions to be perform when certain elements are clicked. The following actions are supported:

• Open a URL and set the target window
• Send a text response back through the transcript
• Send a postback data payload
• Execute a CXBus command and pass options to that command

"actions": {

    "url": "http://www.samplesite.com/flights/norway",
    "urlTarget": "__BLANK",
    "textback": "User Clicked on Link",
    "postback": {},
    "commandName": "SendMessage.open",
    "commandOptions": {"form": {"firstname": "john", "lastname": "smith", "email": "john@smith.com"}}
}

All actions are optional and all actions will be executed simultaneously.

You may define actions for the top-level of a structured message, i.e. the main image, title, and description, and you may define unique actions for each component inside your components array. This allows you to create a stack of buttons that each perform different actions when clicked.

Open URLs

One of the most common and simple actions is to open a link in a new window.

"actions": {

    "url": "http://www.samplesite.com/flights/norway",
    "urlTarget": "__BLANK"
}

You can control the target window or tab by specifying the target in the "urlTarget". This is applied to the link element's "target" attribute. The default target is "__BLANK", which will open a new window or tab.

Textback

Another common action will be to send a message back to the agent through the transcript.

"actions": {

    "textback": "I clicked the Norway link"
}

This will post a message as if the user had typed it. This functions much like quick replies.

Postback

Sometimes you want to send some data back to the agent or chatbot. This can be any kind of arbitrary data like a form submission, timestamps, state changes, and other data that might help the agent or chatbot understand the user's selection and interaction inside the structured message. Data you postback is linked to the Structured Message ID.

"actions": {

    "postback": "{}"
}

Commands

You can trigger client-side commands to help the user open other widgets or run custom commands you've created on your website.

"actions": {

    "commandName": "SendMessage.open",
    "commandOptions": {"form": {"firstname": "john", "lastname": "smith", "email": "john@smith.com"}}
}

Commands are executed by name and you can pass in an object with properties known as "options". These options control the command in the same way arguments control a function call.

An example scenario might go as follows:

• A user starts a chat and while he is waiting for an agent, a chatbot queries the user
• If no agents will be available, or if it is after hours, the chatbot can send a Generic Template with a button offering the user to send an email instead
• If the user clicks the button, the SendMessage widget will open next to the WebChat widget.
• This has assisted the customer in using Genesys Widgets based on situation the chatbot identified.

Styles

You may apply unique CSS styles to certain elements through the use of the "styles" object. This object can be included at the top-level of the structured message and inside each individual component to control styling.

Styling is limited to a subset of CSS properties

"styles": {

    // Default styles
    "background-color": "#000000",
    "align": "left",
    "color": "#FFFFFF",
    "border-radius": "15px",
    "border": "1px solid black",
    "font-weight": "bold",
    "font-style": "italic",
    "text-decoration": "underline",
    "bold ": true,
    "italic ": true,
    "underline ": true

    // Alternate mouse hover styles
    "background-color-hover": "#FFFFFF",
    "align-hover": "left",
    "color-hover": "#000000",
    "border-radius-hover": "5px",
    "border-hover": "5px solid #FF0000",
    "font-weight-hover": "bold",
    "font-style-hover": "italic",
    "text-decoration-hover": "underline",
    "bold-hover": true,
    "italic-hover": true,
    "underline-hover": true
}

Style properties are separated into two groups: Default and Hover. Default styles are applied to elements immediately while hover styles are applied only when a mouse is hovering over the element. The only difference in property names is that hover properties are appended with "-hover".

Not all elements support all styles. Elements are assigned a Style Group that controls which styles can be applied. For instance, a "title" element contains only text, so styles pertaining to border styles are not allowed, only text styles are allowed. These limitations are imposed to make styling easier while maintaining the overall look and feel of the structured message.