Build a Chatbot with Microsoft Teams and Dialogflow

You can easily create  chat bot for Microsoft Teams and Dialogflow to offer great customer service to your website visitors.  Answer chats right from Microsoft Teams or let your chatbot take over and use a virtual agent to provide your website customer support.

Build your first Dialogflow Chatbot

We've integrated our Live Chat for Microsoft Teams app with Dialogflow in order to leverage natural language processing and machine learning to power your website chat.

Our implementation allows you to create dynamic chatbots for your website 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 app that you can deploy on your website today.  Here are the steps:

  1. Add our Live Chat app to your Microsoft Teams account
  2. Create a Dialogflow Agent
  3. Add your Dialogflow integration to your Social Intents account.
  4. Test out your new Live Chat app with chatbot capabilities!

1. Add our Live Chat app to your Microsoft Teams Account

First, add our Live Chat app to your Microsoft Teams account.  Simply head over to our Live Chat for Microsoft Teams page and click Add to Teams.

Or you can add Live Chat right from your Teams account. This article covers the details.

2.  Create your Dialogflow Agent

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 Social Intents.  

Create your Agent in Dialogflow

After logging in, 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.

Our chatbot supports all response types from Dialogflow.  So if you want to respond with Cards, Images, Suggestions, or more in Dialogflow you can create a Slack, Google Assistant, or Telegram response type and we'll use these as well as the Text responses when responding to questions.  

Keep in mind, since we do use all responses to your Intents from these different apps, make sure to avoid duplicate answers like having the same response in Slack and Google Assistant since we would display both of them.

Set up Dialogflow Authentication for API access

Next, set up your authentication details and generate a Dialogflow Service Account Key you will use to integrate with your chat widget.  

If you click on the settings icon next to your new agent, you'll see the screen below.  Click on the link to your Service Account highlighted below.

Click on the Service account as below or you can create a new one: 

Once you're on your Service account details page, click the Edit icon at the top of the page to put you in edit mode.  Then select 'Create Key' to generate your Private Key JSON file that will be used for our integration.

Choose JSON as your Key type and select.  This will download your private key to your computer.

You'll now upload this private's Key to your chat widget Chatbot page to enable our Social Intents integration with Dialogflow.

3. Add your Dialogflow Integrations Key to Social Intents

Now that you have created a Live Chat app and your new Dialogflow agent and key file, connect your Social Intents account to Dialogflow by logging into Social Intents, selecting My Apps from the left navigation bar, then Edit Settings on your Live Chat widget.  You can create a new widget if you don't have a Live Chat app yet created.

From the chat settings page, select the Chat bot tab at the top of the page.

Select the Chatbot name that visitors will see when your chatbot responds, select the language you've used in creating your Agent in Dialogflow, and choose your Chatbot type.

Lastly, upload the .JSON key file that you downloaded in the previous step by Choosing the File and clicking the Upload Dialogflow Private Key button.  This tells our app how to connect to the Dialogflow agent for answering your visitor questions when the chatbot is enabled.

4.  That's it!  You're ready to deploy 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