Chat Bots

To build your own chat bot you can use the following 3 features of the Stream Chat API:

1. Webhooks
2. Attachments, Fields and Actions
3. Custom Attachments

Step 1 - Webhook Setup

As an example let’s say that you want to build a chatbot that handles customer care for a bank. You’ll typically want to gather some data automatically before routing the request to a human. To achieve that you would start by setting up a webhook (webhook docs). The webhook will be called whenever there is a new message on the channel.

Step 2 - AI

When handling the webhook you’ll want to run some AI to determine what the user is talking about. A good starting point is recognizing the most common requests. For instance, your AI could recognize a message like this: “I noticed a weird transaction on my account.” Next, the AI can reply by asking the user for more details leveraging the attachment, field, and action system.

Step 3 - Attachment, Fields and Actions

Let’s have the AI reply with a message asking for more information.

const message = {
  text: 'Which account was affected by this issue?',
  attachments: [
    {
      type: 'form',
      title: 'Select your account',
      actions: [
        {
          name: 'account',
          text: 'Checking',
          style: 'primary',
          type: 'button',
          value: 'checking',
        },
        {
          name: 'account',
          text: 'Saving',
          style: 'default',
          type: 'button',
          value: 'saving',
        },
        {
          name: 'account',
          text: 'Cancel',
          style: 'default',
          type: 'button',
          value: 'cancel',
        },
      ],
    },
  ],
};

const response = await channel.sendMessage(message);

When the user submits their choice, the webhook endpoint will be called again. Now that you have some more information gathered, it’s time to connect the user to a real support agent. You can do this by adding a member to the conversation, and your support agent will be notified in real-time. To improve their productivity, you’ll want to leverage slash commands. Slash commands make it easy to automate everyday tasks. The next step will show you how to create your slash command for managing tickets.

Step 4 - Slash Commands

First, you’ll want to set up a custom slash command for the “ticket” keyword. At the moment, this isn’t fully documented, so contact support if you need help. With the slash command set up, your account managers will be able to automate everyday tasks such as /ticket suspicious transaction with ID 1234

const message = {
  text: '/ticket suspicious transaction with id 1234'
};
const response = await channel.sendMessage(message);

$message = [ 'text' => '/ticket suspicious transaction with id 1234' ];
$response = $channel->sendMessage($message,'elon');

Step 5 - Custom Attachments

Custom attachments can also be helpful when building chat bots. For example, you could create a custom attachment for allowing users to select a date. The React Chat tutorial shows an example of how to create a custom attachment.