Flow Messages

Flow messages

The Chat Widget supports Markdown out of the box, meaning any text that is sent to flow can be sent as Markdown and will be handled automatically with no additional setup.

Flow can send the following messages to the widget:

Text message:

{"type": "message", "payload": "what is your order number?" }

You can add line breaks to messages by using \n characters:

{"type": "message", "payload": "what is your order number\nOr email address?" }

Some markdown elements, like lists and headings, require the syntax to be broken on to new lines. To achieve this in a flow message it is necessary to add newline characters to the message to create the line breaks:

{"type": "message", "payload": "- one\n - two\n  - three\n", "markdownFormat": true }

Quick replies:

{
  "type": "quickReply",
  "payload": [
    {
      "id": 1,
      "text": "content",
      "hyperlink": "http://somewebsite.com"
    },
    {
      "id": 2,
      "text": "content",
      "returnToMainMenu": true
    },
    {
      "id": 3,
      "text": "content",
      "quickReplyClassname": "content"
    }
  ]
}

If attribute hyperlink used - this quick reply will be link with target '_blank'.
If attribute returnToMainMenu is present when the click reply is clicked, the widget will be executed from the beginning again.
Attribute quickReplyClassname adds an individual className for quickReply btn.

Carousel:

The slideOrientation property defines ratio that will be used to display carousel's slides. Can be one of 'square' | 'horizontal' | 'vertical', square by default

The externalLink property, if populated, causes the carousel selection button to open a new window and visit the provided link when clicked.

The buttonText property, if populated, enables the flow to stipulate custom button text for the carousel selection button.

The title property, if populated, outputs a title for the carousel slide.

The description property, if populated, outputs a description for the carousel slide.

The disableButton property, if set to true, disables the button so it can't be clicked on.

{
  "type": "carousel",
  "slideOrientation": "horizontal",
  "payload": [
    {
      "id": 1,
      "image": "https://url-to-image.png",
      "title": "Apple",
      "description": "A delicious apple",
      "externalLink": "http://some-link.com",
      "buttonText": "custom button text",
      "disableButton": true,
    },
    { "id": 2, "image": "https://url-to-image.jpg", "title": "Pear" },
    { "id": 3, "image": "https://url-to-image.gif", "title": "Banana" }
  ]
}

CRM handover:

Instructs the widget to handover to whichever crm is configured in the crm section of the config:

{"type": "crmHandover", "tags": ["some", "tags"]}

The tags property can be used to pass an array of tags which is then passed on to crm specific code. Currently only the Zendesk integration supports the passing of tags to the Zendesk environment.

CSAT Request:

Instructs the widget to initiate the CSAT Flow. CSAT Flow ID is defined by the csatFlowId config.

{"type": "sendCSATRequest"}

Attachment:

{"type": "attachment", "payload": { "url": "https://url-to-image.here.extension" }}

Prefix message:

Each message type may contain prefixMessage property.

The prefix message will be displayed as regular message from bot.

The rest of the message content based on message type will be rendered after that "prefix".

{
    "type": "quickReply",
    "prefixMessage": "Hi, how can i help you?",
    "payload": [
        { "id": 1, "text": "content" },
        { "id": 2, "text": "content" },
        { "id": 3, "text": "content" }
  ]}

Disable/Hide Chat Input

Each message, of any type, can be disabled or hidden by sending a flag in the message. To disable the input disableChatInput: true should be sent. To hide the input hideChatInput: true should be sent. When the next message arrives, if the disableChatInput|hideChatinput flags are not present then the widget will re-display/re-enable the input:

{"type": "sendCSATRequest", "disableChatInput": true }
{"type": "message", "payload": "what is your order number?", "hideChatInput": true }

Batch Messages
A batch message can be used to send multiple messages in the same request. These will appear in order one after the other. Supported messages include TextMessages, QuickReplies, Carousels and the Select dropdowns. All are shown above.

{
  "type": "batch",
  "prefixMessage": "My prefix message here",
  "payload": [
    { "type": "message", "payload": "Hello" },
    { 
      "type": "select", 
      "payload": { 
        "title": "Select an option",
        "options": ["Option one", "Option two"]
      }
    },
    {
      "type": "quickReply",
      "payload": [
        {
          "id": 1,
          "text": "content",
          "hyperlink": "http://somewebsite.com"
        },
        {
          "id": 2,
          "text": "content",
          "returnToMainMenu": true
        },
        {
          "id": 3,
          "text": "content",
          "quickReplyClassname": "content"
        }
      ]
    }
  ]
}

Crm Handover

Send an instruction to the widget to trigger a handover to a supported crm.

Salesforce

The buttonId, deploymentId and organizationId and deploymentId can be found in the Salesforce UI. See the docs here for details: https://developer.salesforce.com/docs/atlas.en-us.service_sdk_ios.meta/service_sdk_ios/live_agent_cloud_setup_get_settings.htm

Optionally a caseId can be passed to reference a specific case and customFields can also be passed to pass custom data to Salesforce. Custom fields must be in the format of Salesforce CustomDetail objects as documented here: https://developer.salesforce.com/docs/atlas.en-us.live_agent_rest.meta/live_agent_rest/live_agent_rest_data_types.htm#CustomDetail

{
  "type": "crmHandover",
  "buttonId": 123456789, // REQUIRED
  "deploymentId": 123456789, // REQUIRED
  "organizationId": 123456789, // REQUIRED
  "caseId": "5706g000004HryEAAS",
  "customFields": [{
    "label": "region",
    "value": "London",
    "transcriptFields": [],
    "displayToAgent": true,
  }]
}

Zendesk

Zendesk can optionally be passed an array or tags and a departmentId which specifies which department the chat should be handed over to in Zendesk

{
  "type": "crmHandover", 
  "tags": ["abc1", "123"],
  "departmentId": 123456789
}

Sunco

Zendesk can optionally be passed tags and a groupId which specifies which group the chat should be handed over to in Sunco

{
  "type": "crmHandover",
  "groupId": 123456789,
  "tags": "tag1, tag2"
}

Oracle

queueId, contactId and incidentId are all required for handover to Oracle. These values can be retrieved from the Oracle UI.

{
  "type": "crmHandover",
  "queueId": 123456789, // REQUIRED
  "contactId": 123456789, // REQUIRED
  "incidentId": 123456789 // REQUIRED
}

Dixa

The widgetId can be retrieved from the Dixa UI. Optionally a list of tags can be provided - if present the widget will add the tags to the associated conversation.

{
  "type": "crmHandover",
  "widgetId": "9221cad0-ec88-4ffb-bc06-162d95dd7443" // REQUIRED
  "tags": ["tag1", "tag2"]
}

Freshchat

{
  "type": "crmHandover"
}

Gorgias

{
  "type": "crmHandover"
}