Dialogflow Chatbot for your Website

In this article we'll show you how to create a Dialogflow chatbot for your website.  Use this Dialogflow Chatbot on your website that you can customize with your brand, logos, styling, and text.  Deploy your chatbot in minutes.  You can even use your chatbot in conjunction with human agents to provide customer service to your website visitors.

Here's an example of a Dialogflow Chatbot you can deploy to your website using a simple javascript snippet:

Build a chatbot for your website

Our Dialogflow Chatbots require no coding and are simple to set up.

Here's a step by step guide to creating your first Dialogflow Chatbot.

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. Create a Live Chat widget in Social Intents
  2. Create a Dialogflow Agent
  3. Set up our Dialogflow integration to your Social Intents account.
  4. Test out your new Dialogflow Chatbot!

1. Create a Live Chat app in Social Intents

First, if you don't already have an account with us, you can register for a free trial here.

After creating your Social Intents account, we'll generate a  1-line code snippet can copy and paste into your website in order to enable your chat widget on your own website.  

2.  Create a Dialogflow Agent

Next, go to https://www.dialogflow.com and login with your Google account. 


After logging in, select the Create Agent button as in the screen below.  

Your agent will have 2 default intents.  These Intents will be enough to get started.  As you get more familiar with Dialogflow, you can create additional Intents and 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.

3. Set up your Dialogflow Integration to Social Intents

Next, generate a Dialogflow Service Account Key you will use to integrate with your chatbot 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 Create to 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.

Add your Dialogflow Key to Social Intents

Now that you have created a Live Chat widget 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.  

From the live chat settings page, select the Chatbot Settings 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

4.  All Done!  Test your new Dialogflow Chatbot for your Website!

To test out your new chatbot, simply login to our website, select My Apps, then choose Preview.  If you've already added the code snippet to your website, you can chat right there and your new Dialogflow chatbot will respond.

Want your chatbot to respond with Images, Button Lists, and Cards?

Great!  Take a look at our article on Dialogflow Rich Responses to set these up with no coding!