FAQ Chatbot for your Website with Google Dialogflow Knowledge Base

With Google's Dialogflow Knowledge Base, you can easily create an FAQ chatbot for your website.  Your website visitors can chat with your Dialogflow Chatbot right from your website! 

This tutorial will show you how to create your FAQ chatbot and deploy this chatbot to your website to easily answer common visitor questions.  Best of all, with our Live Chat integration with Dialogflow and Microsoft Teams or Slack, you can even hand off the FAQ bot to a human at any point during the chatbot conversation.

Prerequisites

High Level Steps:

  • Create your Dialogflow Agent
  • Create your Knowledge Base in Dialogflow
  • Connect Dialogflow to your website live chat

Step 1. Create your Dialogflow Agent

First, go to https://www.dialogflow.com and select the Dialogflow ES link to access your Dialogflow Account settings.

Now open the Dialogflow ES console by clicking the 'Go to the Dialogflow ES Console' button:

Create an Agent in Dialogflow

If this is your first agent, select the 'Create Agent' button as in the screen below.

Once you have created an Agent in Dialogflow, click the settings gear icon.  Then choose Enable Beta features and APIs in order to enable the Knowledge Base feature.

Step 2. Create your Dialogflow Knowledge Base

Next click on the Knowledge link in the left-hand navigation and then choose the 'Create Knowledge Base' button on the top right of the page.

Now name your knowledge base.  We called ours 'My First Knowledge Base'.

Next, Choose the 'Create the first one'  link on this page to create your first knowledge document.  We're going to start by using a simple CSV file that includes our FAQs.  Here's what our document looks like in Google Docs.  Notice that the format is simple, just a Question in column A, then an Answer in Column B.

Simply download your FAQs document by exporting the file as a CSV (comma delimited file).  

On the popup to create your new document, name your document, select a Knowledge Type of FAQ, and mime type of  text/csv. (this is the file type you exported from Google Docs).  Select your CSV file, then click the Create Button.

Once created, if you click on the details of the knowledge base now, you can see that Dialogflow automatically created Intents for each of your FAQs:

Step 3. Connect Dialogflow to your Website Live Chat

Now comes the fun part - connect your Dialogflow Knowledge Base to your website live chat.  To do this, we'll just set up our Chatbot integration in Social Intents.  If you don't already have an account with us, you can register for a 2 week free trial here.

If you use either Slack or Microsoft Teams, you can add our app right to each of these platforms so you can chat from the communications tools you already use.

After creating your Social Intents account, we'll generate a code snippet for you. You can copy and paste this code snippet into your website in order to enable your live chat on your own site.  

Set up Dialogflow for external API access

Next, set up your authentication details and generate a Dialogflow Service Account Key that you'll use to integrate with your chat widget in Social Intents.    

If you click on the Settings Gear icon next to your agent name, you'll see the screen below.  Click on the link to your Project ID highlighted below.

Then click on 'Go to project settings':

Select 'Create Service Account':

Now, name your service account and select 'Create':

Under Step 2, assign a role of Dialogflow --> Dialogflow API Client to your service account:

Click 'Continue', then click 'Done'

At this point,  you should see an item similar to the following under your Service Accounts liar.  Notice you haven't created any keys yet:

The final step here is to create your JSON Key.  Click on your new service account, then select ADD KEY to generate your Private Key JSON file that will be used for our integration:

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

Whew, all set!  You'll now upload this private key to your chat widget Chatbot page to enable our Social Intents integration with Dialogflow.

Add your Dialogflow Key to Social Intents

Now that you have created a JSON 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.  

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

Select the Chatbot name that visitors will see when your chatbot responds and choose your Chatbot type - in our example we'll choose Chatbot

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 the live chat how to connect to the Dialogflow agent for answering your visitor questions in your chatbot.

You're ready to try your Dialogflow FAQ Website Chatbot!

If you just want your chatbot to answer immediately, you can go ahead and disable all of the pre-sales questions in Social Intents.  At this point, you can try out your new FAQ bot!  Here's what our new FAQ bot looks like from our example: