Integrate Dialogflow (Api.ai) Bot into Website

We have talked a lot about chatbots for customer support in our previous pieces. And a scalable, efficient and cost-effective human+bot hybrid system has always been our philosophy.

In past few months, we have released a lot of helpful bots to help you accelerate your customer support efforts. In this piece, I am going to walk you through steps to integrate Dialogflow (api.ai) bot into your website. We will be using Kommunicate powered chat plugin for adding to website which integrates well with Dialogflow.

Can't wait to try out Dialogflow integration? 

Click here to get your web chat script with Dialogflow integration

Step 1: Setup chat widget with Dialogflow

Login to your Kommunicate dashboard and navigate to the Bot section. If you do not have an account, you can create one here. Locate the Dialogflow section and click on Settings.

Step 2: Get your Dialogflow tokens

After clicking on the setting one popup box will open. You will be asked for Client and Developer access tokens.

You can get these tokens by logging into your Dialogflow console.

Click on the Settings Icon and scroll down to locate Client access token and Developer access token.

Copy and paste these tokens into the Dialogflow popup box in Kommunicate dashboard and click Next.

Step 3: Integrate Dialogflow (api.ai) Bot into Kommunicate

In the bot profile section, you will be able to give your bot a name. This name will be visible to your customer whenever the bot interacts with them.

To complete the setup, click on Integrate and setup Bot Profile. You can check your newly created bot in two places:

  1. Dashboard →Bot Integration → Integrated Bots: You can check all your integrated bots here
  2. Dashboard → Bot Integration: your Dialogflow icon should be green with the number of bots are you have successfully integrated.

Step 4: Integrate dialogflow (api.ai) bot into website

Final step is to connect Dialoflow bot into your website. To use the bot in customer conversation, you need to pass additional parameter ‘botIds’ in your original Kommunicate plugin code.

Navigate to Dashboard →Settings. Click on Install under the Configuration section.

Copy the JavaScript code to be added in your website. Before pasting, you can add botIds parameter to integrate your bot in the chat plugin. In this parameter, you can pass one or more botIds depending upon your requirement. See the example:

More information on live chat with bot integration can be found here.

In these few simple steps, you can integrate bot using Dialogflow and Kommunicate into your website and automate mundane tasks so that your agents can concentrate on what only human can do.

Related Reads:

  1. Bot + Human Hybrid — The New Era of Customer Support
  2. Bots Are Here To Stay — So Are Your Customer Support Agents

PS: I thank Vipin from Kommunicate team for helping me with initial notes.

Subscribe here to get the good stuff — we solemnly swear to deliver top of the line, out of the box and super beneficial content to you once a week.

At Kommunicate, we are envisioning a world-beating customer support solution to empower the new era of customer support. We would love to have you onboard to have a first-hand experience of Kommunicate. You can signup here and start delighting your customers right away.

Post created 22
17 Views

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.