Dialogue Cloud

WebChat Adaptive Cards

Note Additional Anywhere365 WebAgent license required.

Note Enterprise license and higher

Introduction

Adaptive Cards Adaptive Cards are preformatted boilerplate messages that can be selected by an agent to be sent to a client. They are written using an open card exchange format that allows the developers to 'write once' and share with any compliant host application can be used as UI components for WebChat 2. For example, you can us it as an question form:

 

Building Adaptive Cards

Useful URL's

 

Key value pairs

The WebChatDialogueProvider2 will react to specific values, so they will be used as features. Currently the following key value pairs are available:

  • standard.customerName = This name will be shown to the Agent

    Note: This can also be done via a command, Learn More

  • standard.customerUri = This URI will be used on the conversation. This will value will be visible and used in:

    Note: This can also be done via a command, Learn More

  • standard.subject = This value can be used in the PluginFlowSettings (Learn More) to better route the customer.

 

Building a Response

The response is build up as a JSON, this enabled a lot of flexibility. For example a unique response or Target URI per SubmitID (I.e. Button in the responsive card).

Useful links

 

JSON Buildup explained

Below we have an example of a Response:

Copy
Text
{
  "Actions": [
    {
      "Id": "Submit",
      "TargetUris": [
        "https://prod-114.westeurope.logic.azure.com:443/workflows/"
      ],
      "Response": {
        "Content": "One of our Agent will reach out during business hours on {standard.customerUri}",
        "Type": "Message"
      }
    }
  ]
}

 

  • Actions (Object) = In this object the actions are stored that can be performed by the Adaptive Card response

    • Array = In this array one or more actions (object) can be stored.

      Note: Each object needs to be comma separated

      • Id (name/value pair) = In this string matched the SubmitId that is created in the Adaptive Card

      • TargetUri (Object) = In this object one or more strings can be stored. All the submitted values from the Adaptive Card will be posted to the TargetUri

        Note: Each string needs to be comma separated

      • Response (Array) = In this array the response can be defined.

        • Content (name/value pair) = In this string will be send as a response to the customer after submitting.

          Tip: You can use bracked {} to replace content with submitted data.

        • Type (name/value pair) = In this string you can define the response type. For now only  "Message" is used.

 

Storing Adaptive Cards

Before Adaptive Cards can be loaded into the WebChat 2 they needs to be added to SharePoint first, Learn More

 

Configuration

This tease message can be configured with the following settings:

Copy
Script
interface TeaseMessageSettings {
    message: string,
    showAsMessage: boolean,
    onScrollPercentage: number,
    onTimeout: number
}

These values can be set as follows:

  • Adaptive card id = The ID of the Adaptive Card that is configured on SharePoint.

  • Adaptive card disable input = If enabled the chat input will be disabled until the Adaptive Card has been submitted. This is to ensure the customer completes the Adaptive Card before starting the conversation.

 

Example

Below an example script that can be loaded into your website's html. In this example we loaded a webchat with a tease message:

Copy
HTML
<script type="text/javascript" src="webchat.bootstrap.js"></script>
<script>
window.onload = function() {
    const config = {
        available: {
            state: 'Enabled',
            adaptivecard: {
                id: 'QuestionForm',
                disableInput: false
            }
        },
        away: {
            state: 'ChatInteractionDisabled',
            adaptivecard: {
                id: 'ContactForm',
                disableInput: true
            }
        },
        offline: {
            state: 'Hidden'
        }
    };
WebChat.load(config);
};
</script>

 

Adaptive Cards Examples

Question Form

This card will ask the customer some questions. The entered fields will be used by the WebChatDialogueProvider2.

 

Adaptive Card Payload:

Copy
JSON
{
    "type": "AdaptiveCard",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.3",
    "body": [
        {
            "type": "TextBlock",
            "text": "Question Form",
            "wrap": true,
            "size": "ExtraLarge"
        },
        {
            "type": "TextBlock",
            "text": "Before we start chatting, tell us a bit about yourself.",
            "wrap": true
        },
        {
            "type": "Input.Text",
            "label": "What is your name?",
            "id": "standard.customerName"
        },
        {
            "type": "Input.Text",
            "placeholder": "user@domain.com",
            "label": "What is your email?",
            "id": "standard.customerUri"
        },
        {
            "type": "Input.ChoiceSet",
            "choices": [
                {
                    "title": "Support",
                    "value": "Support"
                },
                {
                    "title": "Sales",
                    "value": "Sales"
                },
                {
                    "title": "Other",
                    "value": "Other"
                }
            ],
            "placeholder": "Placeholder text",
            "label": "What is your question about?",
            "id": "standard.subject"
        },
        {
            "type": "ActionSet",
            "actions": [
                {
                    "type": "Action.Submit",
                    "title": "Let's get started",
                    "id": "submit",
                    "style": "positive"
                }
            ]
        }
    ]
}

 

Response:

Note: This response is for DC2021.04 or higher

Copy
Text
{
  "Actions": [
    {
      "Id": "Submit",
      "TargetUris": [],
      "Response": {
        "Content": "Thanks {standard.customerName} for sharing, let's look for an agent.",
        "Type": "Message"
      }
    }
  ]
}

 

 

Contact Form

This card can be used when the WebChat is outside business hours, so the Agent received the request the next work day and can directly call the customer.

 

Adaptive Card Payload:

Copy
JSON
{
    "type": "AdaptiveCard",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.3",
    "body": [
        {
            "type": "TextBlock",
            "text": "Contact Form",
            "wrap": true,
            "size": "ExtraLarge",
            "weight": "Bolder"
        },
        {
            "type": "TextBlock",
            "text": "Our chat is currently un-available. Please leave your contact details, so we can reach you back.",
            "wrap": true
        },
        {
            "type": "Input.Text",
            "placeholder": "+3123456789",
            "label": "Phonenumber",
            "id": "standard.customerUri"
        },
        {
            "type": "Input.ChoiceSet",
            "choices": [
                {
                    "title": "Support",
                    "value": "Support"
                },
                {
                    "title": "QuickSupport",
                    "value": "QuickSupport"
                }
            ],
            "label": "Subject",
            "id": "Skill"
        },
        {
            "type": "ActionSet",
            "actions": [
                {
                    "type": "Action.Submit",
                    "title": "Submit",
                    "style": "positive",
                    "id": "Submit"
                }
            ]
        }
    ]
}

 

Response:

Note: This response is for DC2021.04 or higher

Copy
Text
{
  "Actions": [
    {
      "Id": "Submit",
      "TargetUris": [
        "https://prod-114.westeurope.logic.azure.com:443/workflows/"
      ],
      "Response": {
        "Content": "One of our Agent will reach out during business hours on {standard.customerUri}",
        "Type": "Message"
      }
    }
  ]
}