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?"}
    ]
}

Generic Template

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

You may 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 will collapse 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 will have a unique ID.
image image file URI Path or URI to an image file. The image will scale 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 will scale 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. Componenets 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.

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 may define actions for the top-level of a structured message (in other words, 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 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 will open next to the WebChat widget.
  4. This has assisted the customer in using Genesys Widgets based on situation the chatbot identified.

Feedback

Comment on this article:

blog comments powered by Disqus
This page was last modified on December 21, 2018, at 04:12.