How to Integrate Dialogflow with Website

In this article we're going to show you how to integrate Dialogflow with your website using a few simple steps.  After you've completed this set up, you can easily create additional Dialogflow chatbots to use on your website.

Our chatbot built with Dialogflow's natural language processing gives you powerful features to create just about any type of chatbot you want.  Use these Dialogflow chatbots to power your customer service instead of live agents or in conjunction with your customer support staff.

Build a chatbot for your website

Here are some ways you can use our chatbots for your business:

  • Create a Chatbot powered Live Chat widget that leverages AI with no humans or agents needed.
  • Use your chatbot to only interact with your visitors when your live chat agents are offline
  • Have your chatbot answer missed chats that your agents haven't been able to respond to.

Best of all, integrating Dialogflow chatbots with your website requires no coding.

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

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 app in Social Intents
  2. Create a Dialogflow Agent
  3. Add your Dialogflow integration to your Social Intents account.

1. Create a Live Chat widget in Social Intents

If you don't already have an account with Social Intents, you can register for a 2 week free trial here.

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

2.  Create your Dialogflow Agent

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


In this tutorial we'll create a test Agent that you'll integrate with Social Intents.  

Create an 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.

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 Key to Social Intents

Now that you have create 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.  

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, 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.  That's it!  Your Dialogflow Chatbot is enabled on your website

You're now all configured and your Dialogflow website chatbot is deployed on your website.