Building a Chatbot with DialogFlow and Slack

Chatbots come in many different styles and most chatbot solutions use directed questions and answers to guide visitors down a specific path.  Our chatbot is different in that we we've integrated our Live Chat platform with Dialogflow and Slack in order to leverage natural language processing.  

Our implementation allows you to create dynamic chatbots on Social Intents that you can train to answer just about any questions your visitors may have.  Best of all, it requires no coding, and no expensive upgrades in our solution.

Here's a step by step guide to creating your first chatbot with Social Intents, Slack, and Dialogflow.

Prerequisites

High Level Steps

In this tutorial we're going to walk through the steps of adding chatbot functionality to your live chat that you can deploy on your website today.  Here are the steps:

  1. Add our Live Chat app to your Slack Account
  2. Create a Dialogflow custom app in Slack and configure it for your account.
  3. Add your Dialogflow custom bot to your Social Intents account.
  4. Test out your new Live Chat app with chatbot capabilities!

1. Add our Live Chat app to your Slack Account

If you don't already have a Slack account, you can sign up for free here: https://slack.com

First, add our Live Chat app to your Slack account.  Simply head over to our Live Chat for Slack page and select Add to Slack.  This will add our app to your Slack workspace.

You'll be asked to select an inbound channel for live chat invites.  This is where we'll send new live chat requests. 

After selecting your channel, you're all set.  You can copy and paste this code snippet into your website in order to enable live chat on your own site.  You can also install this code snippet later.

2.  Enable the Slack Integration in Dialogflow

Next, head over to https://www.dialogflow.com and login with your Google account.  Dialogflow is a natural language processing solution that uses Agents and Intents to respond to questions.  It supports many different messaging and voice platforms so you can create a single agent for your live chat and your other channels.

In this tutorial we'll create a test Agent that you'll integrate with Slack.  After logging in, just select the Create Agent button as in the screen below.

Your new agent will have 2 default intents.  These will be enough to get started and respond with generic welcome messages.  As you get more familiar with Dialogflow, you can create multiple Intents and Contexts to answer questions, gather answer data, and respond with Cards, Images, and Buttons.

Here are some sample phrases that our new chatbot will respond to in your live chat.

Next set up the Slack integration.  In the left-hand navigation select Integrations, then choose to enable the Slack integration.

Dialogflow will show you this Launch screen.  It gives you everything you need to know to create a custom Slack app that can listen to messages and new chat request.  We'll show some of the important screens below.

First, in Slack, you'll want to create a new app. You can use this link to create an app.  Name your app and choose your workspace.

In the Slack app, go to the 'Bot users' section and click the 'Add a Bot User' button:

Set the Display name and Default username to chat_bot for our tutorial.  You'll have to use this name later when setting up the integration with Social Intents,.  

Enable events in the event subscription section and set up the Slack events the Dialogflow app will respond to.

For our Live Chat integration, make sure to subscribe to the Bot Events:  message.channels, and member_joined_channel.  This will allow you to automatically respond when a chat is started as well as respond to visitor messages.

From the Slack Basic Information, copy the Client ID and Client Secret and paste them into the Dialogflow popup launch screen.  

Scroll to the bottom of the Dialogflow screen to see where to copy the values:

Then select the START button as seen above in the bottom right side.

Once started, copy the OAuth URL into the Redirect urls in your Slack App:

Do the same for the Events Subscription section of your Slack app:

That's it on the Dialogflow Slack app.  Now add your new app to Slack by clicking on the Manage Distribution link and selecting Add to Slack:

3. Add your Dialogflow Custom bot name to Social Intents

Now that you have added our Live Chat app and your new Dialogflow app to Slack, connect your Social Intents account to Dialogflow using the chat bot name you set up when creating your Dialogflow Slack app.  In this example it's called "chat_bot".

Login to your Social Intents account and select the Integrations link.  Select the Slack integration an enter the bot name "chat_bot" name in the last field in the integration set up as below.

4.  That's it!  You're ready to test your new chatbot

You're now all configured and ready to test your chatbot.  Simply login to our website, select your Live Chat app and choose Preview.  If you've already added the code snippet to your website, you can chat right there!

You can try out the demo chatbot created in this tutorial here.  Keep in mind it's very basic and just uses the 2 default intents created here.

Try the Chatbot