Brief Flow

When manager access to user chat page, Channel send a request to your server. When response arrived, Channel will render snippet you provided.
When manager click a button in snippet, Channel send a request to your server with contents user wrote. When response arrived, Channel will render snippet you provided.

Request

Snippet send a POST request to your server with several meta information.

There is two types of request : Initialize, Submit

Initialize

Initialize request will be sent when manager access user chat page.
Initialize request contains meta informations.

Example Request

{
  "appUsers": { ... },
  "channel": { ... },
  "user": { ... },
  "userOnline": { ... }, //Exist when user is online
  "manager": { ... }
}

Submit

Submit request will be send when manager click a button in snippet. If button is clicked, Channel will collect all values manager entered.

Example Request

{
  "appUsers": { ... },
  "channel": { ... },
  "user": { ... },
  "userOnline": { ... }, //Exist when user is online
  "manager": { ... },
  "snippet": { ... },
  "componentId": "submit-button",
  "submit": { 
    "text-input": "hello"
  }
}

Response

When request arrives to your server, your server need to respond Snippet Model.

Snippet Model

Snippet Model is JSON which contains UI information to render.

Field Name	Description
version	Version of Snippet Model. now, it's v0
layout	Layout is list of components. All available components are listed here
params	Parameters you need to keep.

{
  "snippet": {
    "version": "v0",
    "layout": [
      {
        "type":"text",
        "id":"header-text",
        "text":"lorem ipsum",
        "align":"left",
        "style":"header"
      },
      {
        "type":"divider",
        "id":"divider-1",
        "size":"thin"
      },
      {
        "type":"spacer",
        "id":"spacer-1",
        "size":"xs"
      },
      {
        "type":"button",
        "id":"submit-button",
        "label":"Submit",
        "action":{
          "type":"submit"
        },
        "style":"primary"
      },
      {
        "type":"input",
        "id":"text-input",
        "label":"text",
        "placeholder":"hi",
        "value":"hello"
      }
    ],
    "params": {
      "customerKey": "channelIO"
    }
  }
}