How to Add Chatbot to your Website
In this article we're going to show you how to build a chatbot for your website. In our example, we are going to add a chatbot built with Dialogflow to your website. You can use these chatbots to power your customer service instead of live agents or in conjunction with your customer support staff.
Some things you can do with Dialogflow + Social Intents chatbots:
- Pre-qualify your leads with a chatbot
- Answer visitor questions with a chatbot then invite agents in as needed to the conversation
- Send helpful information to your visitors like knowledge base articles and pdfs
- Register leads to your service with a chatbot
- Direct your website visitors to website information with a chatbot
Best of all, we can build your Dialogflow chatbot for you. See details here.
Here's a step by step guide to creating your first website chatbot with Dialogflow and Social Intents
- A Dialogflow Account: https://dialogflow.com
- A Social Intents Account: https://www.socialintents.com
High Level Steps
- Create a Live Chat app in Social Intents
- Create a Dialogflow Agent
- 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
In this tutorial we'll create a test Agent that you'll integrate with Social Intents.
Now, head over to https://www.dialogflow.com and select the Dialogflow ES link to create your Agent.
Now open the Dialogflow ES console by clicking the 'Go to the Dialogflow ES Console' button:
Create an Agent in Dialogflow
If you haven't already created an Agent, 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 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.
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 in your chatbot.
4. That's it! Your Chatbot is added on your website
Now your website chatbot is enabled on your website and is ready to answer your visitor questions!