Brief Flow

The snippet flow consists of two main interactions between Channel and your snippet server:

Initialize Flow

1. Manager Access: When a manager accesses a user chat page, Channel automatically triggers the snippet initialization process.

2. Initialize Request: Channel sends a POST request to your snippet server containing meta information about the current context, including channel details, user information, online status, and manager data. The request format follows the Initialize example shown below.

3. Snippet Response: Your server processes the request and responds with a snippet model containing the UI components to be rendered. The response should follow the Snippet Model structure.

4. Rendering: Channel receives the snippet model and renders the interactive UI components within the chat interface, displaying them to the manager.

Submit Flow

1. User Interaction: When a manager interacts with snippet components (e.g., clicks a button, fills out forms), Channel collects all the input values entered by the manager.

2. Submit Request: Channel sends a POST request to your snippet server with the collected data. This request includes all the context information from the initialize request, plus the specific snippet data, component ID that triggered the action, and the submitted values. The request format follows the Submit example shown below.

3. Updated Snippet Response: Your server processes the submitted data and responds with an updated snippet model, which may show new content, confirmation messages, or next steps based on the user's input.

4. Re-rendering: Channel receives the updated snippet model and re-renders the interface, showing the new state to the manager.

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

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

{
  "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.

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

You can preview and test snippet layouts using our interactive demo at https://snippet-builder.channel.io/.

Important Note: The example code shown in the Snippet Builder contains only the component definitions that should be placed inside the layout field of your response. When implementing your snippet endpoint, make sure to wrap this code within the complete snippet structure:

{
  "snippet": {
    "version": "v0",
    "layout": [
      // The code from Snippet Builder goes here
    ],
    "params": {
      // Your custom parameters
    }
  }
}