Engineering

How to implement bots with Sendbird and Google Dialogflow

Get Started!

Sign up for a full-featured 30 day free trial. No credit card required.

Free Trial

Overview

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.

dialogflow flow

This image shows the entire flow we will build here:

  1. Client sends a message to our Bot Sync Server.
  2. From our Bot Sync Server we send the message to Dialogflow (using Dialogflow APIs for NodeJS).
  3. Dialogflow will process this message, activate Agents and Intents for giving us a response to client.
  4. Bot Sync Server will receive this message and send it to Sendbird (using Sendbird’s Bots API).
  5. 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.

Dialogflow configuration

Let’s configure Dialogflow. We will start from scratch and see in detail each of the steps you need to do.

  1. Login with your Google Account.
  2. Create New Agent
    1. Get your Credentials
    2. Save your Project ID
    3. Save your Credentials
    4. Create Service Account
    5. Select Permission & Role

1 – Login with your Google account

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

Dialogflow signin page

Once you sign-in with your Google account, you should see the following screen:

Dialogflow welcome page

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.

Dialogflow - intents

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:

dialogflow credentials

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.

dialogflow - Project ID

2.c – Save your credentials

Click on the left top white button, hover over APIs & Services and then click on Credentials.

dialogflow - credentials

dialogflow - credentials screen

2.d – Create service account

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

dialogflow - create credentials

Enter any value as Service account name, Service account ID and Service account description, then click the CREATE button.

service account details

2.e – Select permission and role

Select Owner, as you see in the following screenshot:

dialogflow - select permission and role

Click CONTINUE and then click on DONE.

Create service account - dialogflow

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:

Dialogflow - credentials

We will create a new key.

Dialogflow - keys

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.

Sendbird configuration

Once you’re logged in with your Sendbird account, go to your Sendbird Dashboard and make sure you have your Chat Bot feature enabled.

Sendbird configuration

Note: This screenshot was taken from a Free Trial Dashboard.

Sendbird Bot

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:

  1. Clone / Download sample source code.
  2. Set your Sendbird credentials.
  3. Download Google’s GCLOUD and show your Google session token.
  4. Create a test Group Channel from Sendbird Dashboard.
  5. Create a New Bot.
  6. Add this New Bot to your Group Channel.

 

1 – Clone / download sample source code

Clone  or download this sample code from our repository.

https://github.com/warodri-sendbird/sendbird-bot-dialogflow

To show a preview of this link, connect your Github account.

  • For this example, we are using Google Cloud Dialogflow version 3.3.0

"@google-cloud/dialogflow": "^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

Sendbird code snippet example

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:
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 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:

Dialogflow convifuration - code snippet

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)

New group channel - Sendbird

Group channels - Sendbird

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:

Group channel - bot-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:

https://sendbird.com/docs/chat/v3/platform-api/guides/bot-interface#2-create-a-bot

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
POST http://localhost:5500/bots
{
    "bot_userid": "bot1",
    "bot_nickname": "bot1",
    "bot_profile_url": "https://via.placeholder.com/50x50",
    "bot_type": "DialogFlow",
    "bot_callback_url": "https://b1b85fc97d18.ngrok.io/callback",
    "is_privacy_mode": false
}

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:

https://sendbird.com/docs/chat/v3/platform-api/guides/bot-interface#2-join-channels

Send a GET request to our Bot Sync Server:

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

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

Bot response screenshot

And the following message in your Sendbird Dashboard:

bot-channel message - Sendbird

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:

https://b1b85fc97d18.ngrok.io/callback<

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.

Job done!

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. 

Dialogflow history

If you need to check the history of messages sent to Dialogflow, Google has a dedicated section you can access from your Dialogflow console:

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

Categories: Engineering