By the end of this tutorial, you will understand how to build the entire flow in the architecture diagram above. This flow consists of the following steps:

The client sends a message to the Sendbird Bot Sync Server.
From the Sendbird Bot Sync Server, we send the message to Dialogflow using the Dialogflow APIs for NodeJS.
Dialogflow will process this message and activate Agents & Intents to give a response to the client.
The 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’s chat.

For this tutorial, you will need:

A Sendbird account with the Bot feature enabled
NodeJS (with express) to build our Bot Sync Server
A Dialogflow account

Sendbird and Dialogflow are mandatory, but you can replace NodeJS with any other server platform/language you like. In this tutorial, we have used the words ‘chatbot’ and ‘bot’ interchangeably – remember that they mean the same thing.

This tutorial assumes familiarity with NodeJS since this is what we use in our example. Remember that a good understanding of chatbot building will help you make the best use of this tutorial.

With this in mind, let’s get started.

Step 1. Dialogflow configuration

First, we need to configure Dialogflow. We will start from scratch and detail each of the steps to go through, including how to:

Log in to Dialogflow with your Google account
Create a new agent
1. Get your credentials
2. Save your project ID
3. Save your credentials
4. Create a service account
5. Select permission & role

1.1. Login to Dialogflow with your Google account

Go to https://dialogflow.cloud.google.com/ and log in with your Google account.

You should see the following screen once you sign in:

Dialogue main workflow — Figure 3. Dialogflow main window

1.2. Create a new agent

An agent in Dialogflow will receive the information from the Sendbird bot. The agent will process this information and send a response back to the users in the chat. This can be complex, but for this tutorial, we will use the basic default information.

To create an agent:

Click on the Create Agent button.
Enter “agent” as the agent name.
Leave the rest unchanged.
Hit the CREATE button.

Figure 5. Dialogflow agent created: Intents view

1.2.1. Get your credentials

Now, get your Google credentials for NodeJS. Click the gear icon located on the top left side of the screen. You will see the following:

Figure 6. Dialogflow project ID for the created agent

1.2.2. Save your project ID

For this project, you see agent-9uyq. Click on it, and a new tab will open. You are now in the Google Cloud console.

Figure 7. Accessing the Google API console

1.2.3. Save your credentials

Click on the hamburger menu at the top left. Hover over APIs & Services, and then click on Credentials.

Figure 8. Accessing the Google credentials

Figure 9. Google credentials: Create new

1.2.4. Create a service account

To do this, click on the + CREATE CREDENTIALS button at the top of the screen.

Figure 10. Creating credentials for your service account

Enter any value for the Service Account Name, Service Account ID, and Service Account Description. Then click the CREATE button.

1.2.5. Select permission and role

Select Owner, as displayed in the following screenshot:

Figure 12. Service account: Assign permissions

Click CONTINUE and then click on DONE.

Figure 13. Service account: Finish process

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:

Click on the Email field at the bottom to go to the next screen and 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 knowing this could be helpful in the future.

Finally, click on the blue SAVE button to confirm all changes.

Google will ask you to download a JSON file. This file has a structure like the following:

Run the following command for Google to identify your project:

export GOOGLE_APPLICATION_CREDENTIALS="/folder/where/this/file/is/located/agent-crlt-3d19b9a1f89b.json"

Step 2. Sendbird configuration

Once you have logged in with your Sendbird account, go to your Sendbird dashboard and ensure your chatbot feature is enabled.

Note: This screenshot is from a Free Trial dashboard.

Step 3. Create a Sendbird bot

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 the 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 the complete documentation here.

Step 4. Create the Bot Sync Server

Using this server application, we will:

Create and update bots
Make them join any of your Group Channels
Receive chat messages from your Group Channels using webhooks
Send and receive information to and from Dialogflow using the Dialogflow APIs. You can read the related documentation here
Send the response from Dialogflow back to the chat

Steps to follow:

Clone/download sample source code
Set your Sendbird credentials
Download the Google GCLOUD and show your Google session token
Create a test Group Channel from the Sendbird Dashboard
Create a new bot
Add this new bot to your Group Channel

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

Note that in this example, we are using Google Cloud Dialogflow version 3.3.0.

"@google-cloud/dialogflow": "^3.3.0"

From the code, we call:

const dialogflow = require('@google-cloud/dialogflow').v2beta1;

Pay attention because this changes constantly; Google is working continuously on this, and it may change for you.

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

Figure 17. Define your Sendbird development application and key

4.3. Download the Google GCLOUD and show your Google session token

This is a critical step to get your Google Session ID. You need this ID in the 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 gcloud from here:

https://cloud.google.com/sdk/docs/install

Note: Take your time. This process from Google is very tricky.

Once you run that command, a browser window will open. You need to authorize your Google account and allow the use of this service. After that, Google will create a new JSON file for you. If you don’t have this information correct, you will receive an Error 400.

Copy the value from client_secret and populate GOOGLE_SESSION_ID below in the NodeJS code.

Figure 18. Define the Dialogflow project ID and authorization token

Note: Grab your project ID from Dialogflow (taken from the Dialogflow configuration, section 1.2 2.b.)

4.4. Create a test Group Channel from Sendbird Dashboard

Go to your Sendbird dashboard and access any of your Group Channels. We will create a new one here.

Figure 19. Create group channel from Sendbird Dashboard

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:

4.5. Create a new bot

The 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 the Sendbird Bot API. Check out how to create a new bot here:

Go back to the code and install all libraries:

npm i

Once all libraries are downloaded, run your Bot Sync Server:

npm run start

Once our server is running, we will send a POST request to create a bot called bot1.

You can use Postman to send POST requests. The most critical parameter is called bot_callback_url. It refers to the callback Sendbird will invoke when a message is sent to the Group Channel. This callback URL 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 https://localhost:5500

POST https://localhost:5500/bots

4.6. Add this new bot to your Group Channel

The next step is to add this bot to your new Group Channel. To add a bot to a Group Channel, we use the Sendbird API. Check out our documentation here.

Now, send a GET request to our Bot Sync Server:

GET https://localhost:5500/bots/bot-channel-url/bot1

If all went well, you should have the following response:

And the following message in your Sendbird dashboard:

Step 5. Test the full flow

It’s time to test our flow! Send a simple “Hello” message from your dashboard. This message will trigger the webhook running on your local computer with NodeJs:

https://b1b85fc97d18.ngrok.io/callback

Replace b1b85fc97d18 with the ID you receive from your NGROK application.

Our bot will grab this message and send it to Dialogflow. Dialogflow will respond.

Our bot will receive this response and send it back to the chat channel. The response will be displayed as a new message in the dashboard.

Tutorial Figure 24. Final results — Figure 24. Final results

Conclusion

In-app chat is engaging for users, and it can be even more efficient with bots! The integration of the Sendbird API with 3rd-party services leads to robust implementations. In this tutorial, we learned how to automate Sendbird chat responses with Dialogflow. Note that it will work on any device, and you can choose the programming language you prefer – from Android to React, to Angular, to .Net, etc. All you need to do is send HTTP requests to your server. Check out some other examples of enabling chat messaging for Salesforce support agents and connecting an email service to chat with Mailgun. The possibilities are endless!

If you want to see a history of messages sent to Dialogflow, Google has a dedicated section that you can access from the Dialogflow console:

https://dialogflow.cloud.google.com/#/agent/YOUR-AGENT-ID-HERE/history

Congratulations for making it to the end of this tutorial, and happy human-to-machine connection building! 🤖