Snippet Flow

Brief Flow

  1. When manager access to user chat page, Channel send a request to your server. When response arrived, Channel will render snippet you provided.

  2. 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.

Snippet Model

Snippet Model is JSON which contains UI information to render.

Field NameDescription
versionVersion of Snippet Model. now, it's v0
layoutLayout is list of components. All available components are listed here
paramsParameters 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"
    }
}
}

Request & Respond

Snippet send a POST request to your server with several meta information. When request arrives to your server, your server need to respond Snippet Model.

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