This guide will show how to use Sendbird’s API for Bots to receive a message from any channel, send to Dialogflow and respond back.
This image shows the entire flow we will build here:
- Client sends a message to our Bot Sync Server.
- From our Bot Sync Server we send the message to Dialogflow (using Dialogflow APIs for NodeJS).
- Dialogflow will process this message, activate Agents and Intents for giving us a response to client.
- Bot Sync Server will receive this message and send it to Sendbird (using Sendbird’s Bots API).
- Finally, Sendbird will deliver this message to the user on the Chat.
Tools needed for this guide
The following are the components we will use for this implementation.
- A Sendbird account with Bot feature enabled.
- NodeJS (with express) to build our Bot Sync Server.
- Dialogflow account.
Sendbird and Dialogflow are mandatory but NodeJS can be replaced for any other server platform / language you like.
Let’s configure Dialogflow. We will start from scratch and see in detail each of the steps you need to do.
- Login with your Google Account.
- Create New Agent
- Get your Credentials
- Save your Project ID
- Save your Credentials
- Create Service Account
- Select Permission & Role
1 – Login with your Google account
Go to https://dialogflow.cloud.google.com/ and login with your Google account.
Once you sign-in with your Google account, you should see the following screen:
2 – Create new agent
An agent in Dialogflow will receive the information from our Bot, it will process it and send a response back for users in the chat. This can be very complex but for the purpose of this tutorial we will use the basic default information.
To create an Agent, click on the Create Agent button. Enter “agent” as agent name. Leave the rest unchanged. Hit the CREATE button.
2.a – Get your credentials
Now it’s time to get your Google credentials for using from NodeJS. Click the gear icon, located on the top left side of the screen. You will see the following screen:
2.b – Save your project ID
For this example you see agent-9uyq. Click on it, a new tab will be opened and you will be taken to the Google Cloud console.
2.c – Save your credentials
Click on the left top white button, hover over APIs & Services and then click on Credentials.
2.d – Create service account
To do this, click on the + CREATE CREDENTIALS button (at the top of the screen)
Enter any value as Service account name, Service account ID and Service account description, then click the CREATE button.
2.e – Select permission and role
Select Owner, as you see in the following screenshot:
Click CONTINUE and then click on DONE.
Once you click on DONE, you will see your Service Account at the bottom.
Click on this Service Account. You will see a new screen:
We will create a new key.
Select JSON and click on CREATE. You will be prompted to save a JSON file. This JSON file contains the information you can use later for creating a Google Session ID. We won’t use this in our NodeJS project but it’s good to know what this is good for.
Finally, click on the SAVE blue button to confirm all changes.
Once you’re logged in with your Sendbird account, go to your Sendbird Dashboard and make sure you have your Chat Bot feature enabled.
Note: This screenshot was taken from a Free Trial Dashboard.
In order to talk to your chat clients, we need to create one or more Bots.
Sendbird provides a REST API for creating and managing Bots. Among other tasks, with our Sendbird Bot Interface you can:
- Create and update Bots
- View all your Bots
- Allow Bots to enter and leave chat channels
Make sure you are familiar with our Bot API by reading a complete documentation here.
Create the Bot Sync Server
We use NodeJS for this example but you can work with any server language and technology you prefer.
Using this server application we will be able to:
- Create and update Bots
- Make them join to any of your Sendbird’s Group Channels
- Receive chat messages from your Group Channels (using Webhooks)
- Send and receive information to / from Dialogflow using their APIs, which are documented here
- Finally send the response from Dialogflow back to the chat
Steps to follow:
- Clone / Download sample source code.
- Set your Sendbird credentials.
- Download Google’s GCLOUD and show your Google session token.
- Create a test Group Channel from Sendbird Dashboard.
- Create a New Bot.
- Add this New Bot to your Group Channel.
1 – Clone / download sample source code
Clone or download this sample code from our repository.
To show a preview of this link, connect your Github account.
- For this example, we are using Google Cloud Dialogflow version 3.3.0
And from the code, we call:
const dialogflow = require('@google-cloud/dialogflow').v2beta1;
Pay attention because Google is working continuously on this and it may change for you.
2 – Set your Sendbird credentials
From your Sendbird Dashboard, get your information and replace the dashes —
You will need:
- Your Application ID
- Any of your created user IDs
- Your Api Token
- Your API Entry point
3 – Download Google’s GCLOUD and show your Google session token
This is a very important step you need to do for getting your Google Session ID. You need to use this ID in this sample source code.
Open your terminal and run the following command:
gcloud auth application-default login<
To do this, you need to download and install gclod from here:
Note: Take your time. This process from Google is very tricky.
Once you run that command, a browser window will be opened. You need to authorise your Google account and allow the use of this service. After that, Google will show you a Session ID code. Save it for later use.
Your Google Session ID is the result of executing gcloud. If you don’t have this information correct, your will receive an Error 400 from Dialogflow.
Go to your NodeJS code and replace the following values with your own:
Note: Grab your project ID from Dialogflow (taken from Dialogflow Configuration, section 2.b)
4 – Create a test Group Channel from Sendbird Dashboard
Go to your Sendbird Dashboard and access any of your Group Channels (I will create a new one)
As you can see, my new channel is called bot-channel and its URL is bot-channel-url.
Click the bot-channel-url to enter this channel:
5 – Create a new Bot
Next step is to add this to create a Bot. We will send a POST request to our Bot Sync Server
Note: For all Bot operations we use Sendbird’s Bot Api. Check how to create a new Bot here:
Make sure your Bot Sync Server is running:
npm run start<
Once our server is running, we will send a POST request to create a new Bot called bot1.
You can use Postman to send POST requests. The most important parameter is called bot_callback_url and refers to the Callback Sendbird will invoke when a message is sent to the Group Channel. This URL Callback must be accessed from the Internet.
To accomplish this task you can upload this NodeJS to any server like AWS, Heroku, Github or any other service you are familiar with. For this example I will use NGROK. NGROK creates https://b1b85fc97d18.ngrok.io which points to my local server http://localhost:5500
6 – Add this new Bot to your Group Channel
Next step is to add this Bot to your new Group Channel. To join a bot to a Group Channel we use Sendbird’s API. Check our documentation at:
Send a GET request to our Bot Sync Server:
If all went well, you should have the following response:
And the following message in your Sendbird Dashboard:
Test the full flow
It’s time to test our flow! We will send a message from our Dashboard, this message will trigger the Webhook here:
Our bot will grab this message and send it to Dialogflow. Dialogflow will give us a response. Our bot will receive this response and send it back to the chat channel.
Android, React, Angular, .Net, etc: You can use this implementation if you want to work with Sendbird Bots and Dialogflow from any device / programming language. All you need to do is to send HTTP requests to your server.
If you need to check the history of messages sent to Dialogflow, Google has a dedicated section you can access from your Dialogflow console: