Jump to: navigation, search

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.

Quick-replies-003.jpg

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 is "Message".
  • contentType - The type of rich message content attached to the message. For quick replies, the value is "quick-replies".
  • content - An array of rich message content and other attachments. For quick replies, this contains 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?"}
    ]
}

Top-Level of Quick Reply object

Option Type Description
id string An ID assigned to the quick reply. Each object inside the content array has a unique ID.
type string Type identifier for object. For Quick Replies, this value is always "quick-reply".
action string Specifies the type of action that is triggered upon clicking the quick reply. Currently, the only supported action is "message" which sends a message using the quick reply text.
text string Text to show inside the quick reply. This is also used as the response text after clicking on the quick reply.
image image URI or base64 data Path to an image resource or base64 image data to show inside the quick reply. Images appear on the left side of each quick reply. Images are not scaled to fit. Choose an image with the desired dimensions.

Generic Template

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

You can craft your generic templates in many different ways by adding or omitting any property or component. This affords you great flexibility to build your generic templates the way you want.

Rich-messages-generic-template-examples.jpg

Template Structure

The structure of the generic template is a simple stack. If you omit any of the content, the stack collapses that space. This gives you the option to use the generic template for showing single elements. This could be as simple as an image or video by itself, a single button or group of buttons, or just text.

Rich-messages-generic-layout.png

Clickable Areas

The generic template is divided into clickable areas, each having its own actions defined. The main top-level of the structure allows you to click on the image, title, or description to trigger its action.

Rich-messages-generic-clickable-areas.png


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 is "Structured".
  • contentType - The type of rich message content attached to the message. For generic templates, the value is "generic".
  • content - An array of rich message content and other attachments. For generic templates, this contains 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": "http://www.samplesite.com/flights/img/norway_promo.jpg",
            "video": "",
 
            "actions": {
 
                "url": "http://www.samplesite.com/flights/norway",
                "urlTarget": "__BLANK"
            },
 
            "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"
                    }
                }
            ]
        }
    ]
}

JSON Reference

Top-Level of content object

Option Type Description
id string An ID assigned to this structured message instance. Each instance inside the content array has a unique ID.
image image file URI Path or URI to an image file. The image scales to fit the width of the structured message while constraining its aspect ratio. Also used as the video placeholder if both image and video are set.
video video file URI Path or URI to a video file. Support is determined by browser. MP4 files are generally supported by all browsers. The video scales to fit the width of the structured message while constraining its aspect ratio. If the image property is also set, that image is used as the placeholder or 'poster' for the video.
title string Text to show in the title row.
desc string Text to show in the description row. This is immediately below the title.
actions object An object containing properties that define the actions that is executed when you click on this area or element.
components array An array of component objects. Components are stacked in the order defined by this array. Each component can have unique properties. Refer to each component's JSON structure.

Button Component

Option Type Description
id string An ID assigned to this component. Component IDs are for reference only and can be assigned any value.
type string The type of component to render. To render a button, the value must be "button".
text string Text to show inside the button.
title string Tooltip text to show when hovering over the button.
actions object An object containing properties that define the actions that are executed when you click on this area or element.


List Template

List Templates allow you to craft custom cards with an array of list items that can include an image and text.

You can choose between two different list item modes for displaying image and text together: side-by-side or stacked.

Richmedialist1.png

Template Structure

The structure of the list template is main title and description, followed by a stack of list items beneath it.

The stack of list items expands the template height until it reaches 325px inside the list item stack. When that maximum is reached, scrolling is enabled.

Richmedialist3.png

Clickable Areas

List items are the only clickable areas in a normal list template. Clicking on the title or description does not trigger an action. Each list item can be configured with its own actions that are executed when you click anywhere inside that list item.


JSON Examples

  • type - The type of message object received. For list templates, the value is "Structured".
  • contentType - The type of rich message content attached to the message. For normal list templates, the value is "list-vertical".
  • content - An array of list item objects.

Top level of message object

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

{
    "type": "Structured",
    "contentType": "list-vertical",
 
    "messageType": "text",
    "text": "",
 
    "content": [
 
        {
            "id": "987a6c84-ada0-468f-86e1-e9ea715b8c32",
            "title": "Great deals on travel",
            "desc": "Where do YOU want to travel?",
 
            "components": [
 
                {
                    "id": "0",
                    "type": "list-item",
                    "image": "http://www.samplesite.com/flights/img/southeastasia.jpg",
                    "title": "East Asia - 20% Off: Thailand or Vietnam",
                    "desc": "Travel Dates: September through November",
                    "actions": {
 
                        "url": "http://www.samplesite.com/flights/southeastasia",
                        "urlTarget": "__BLANK"
                    }
                },
 
                {
                    "id": "1",
                    "type": "list-item",
                    "image": "http://www.samplesite.com/flights/img/australia.jpg",
                    "title": "Australia - Free Hotel",
                    "desc": "Book a flight and receive a free hotel stay",
                    "actions": {
 
                        "url": "http://www.samplesite.com/flights/australia",
                        "urlTarget": "__BLANK"
                    }
                },
 
                {
                    "id": "2",
                    "type": "list-item",
                    "image": "http://www.samplesite.com/flights/img/southafrica.jpg",
                    "title": "South Africa - From $330",
                    "desc": "Valid from September to November and from March to May",
                    "actions": {
 
                        "url": "http://www.samplesite.com/flights/southafrica",
                        "urlTarget": "__BLANK"
                    }
                }
            ]
        }
    ]
}

JSON Reference

Top-Level of content object

Option Type Description
id string An ID assigned to this structured message instance. Each instance inside the content array has a unique ID.
title string Text to show in the title row.
desc string Text to show in the description row. This is immediately below the title.

List Item Component

Option Type Description
id string An ID assigned to this component. Component IDs are for reference only and can be assigned any value.
type string The type of component to render. Either "list-item" for side-by-side mode, or "list-item-big" for large image, stacked mode.
image image file URI Path or URI to an image file. An image to show inside the list item.
title string The main headline of the list item.
desc string Text to show in the description row. This is immediately below the title.
actions object An object containing properties that define the actions that are executed when you click on this list item.

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
  • 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",
    "commandName": "SendMessage.open",
    "commandOptions": {"form": {"firstname": "john", "lastname": "smith", "email": "john@smith.com"}}
}

All actions are optional and all actions are executed simultaneously.

You can define actions for the top-level of a structured message (in other words, the main image, title, and description), and you can 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 urlTarge. This is applied to the link element's "target" attribute. The default target is "__BLANK", which opens a new window or tab.

Textback

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

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

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

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 like this:

  1. A user starts a chat and while he is waiting for an agent, a chatbot queries the user
  2. If no agents are 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
  3. If the user clicks the button, the SendMessage widget opens next to the WebChat widget.
  4. This has assisted the customer in using Genesys Widgets based on situation the chatbot identified.
This page was last modified on February 4, 2019, at 13:04.

Feedback

Comment on this article:

blog comments powered by Disqus