How to Integrate Dialogflow CX Bot in Website
By: Parth Shrivastava
Tags: Chatbots, Bots, Development, Dialogflow, AI

Google Dialogflow recently introduced Dialogflow CX (Customer Experience) — a powerful tool for creating advanced virtual agents. Dialogflow CX provides a new way of designing virtual agents, taking a state machine approach to agent design. This gives a clear and explicit control over a conversation, a better end-user experience, and a better development workflow. In this blog, we will see how to integrate the Dialogflow CX bot with websites. We will be using the Kommunicate powered chat plugin to add to a website that integrates well with Dialogflow CX.

Step by Step Guide to Integrate Dialogflow CX Bot into Website

Step 1: Set up Dialogflow CX & Kommunicate

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

Step 2: Select the project from Dialogflow CX

Now, open to your Dialogflow CX console and create a new project or select an already existing project.

For example, in the below example — we are using the project ‘test-covid-rwvr’.

Step 3: Create an agent

Once the project is selected, create a new agent by clicking the Create button at the top or select an existing agent. You can also choose Prebuilt Agents templates for making it.

In the following example, the Prebuilt Agents — Car Rental template is used.

Click on Prebuilt agents; it will show all the templates available in Dialogflow CX. Select the required template.

Let’s use the Car Rental agent for our project.

Step 4: Get your Dialogflow CX credentials

Before integrating Dialogflow CX with Kommunicate, we have to make sure the Dialogflow CX bot is created and API is enabled. Additionally, we have to get the service account key and the Agent ID.

Steps for creating the service account key file:

✔️ To enable the API: https://cloud.google.com/dialogflow/cx/docs/quick/setup#api

✔️ Get service account key file as follows: https://cloud.google.com/dialogflow/cx/docs/quick/setup#auth

Please refer to the following doc for more information.

How to get Agent ID in Dialogflow CX console

Go to Dialogflow CX console >> Select the Project >> Then click on the copy button or copy the Agent name. The Agent’s name will be in the following format: projects/test-covid-rwvr/locations/global/agents/e2c5d8a3-f416–4f32-bfc9-d986d540abdbwhere.

Please note that the last alpha-numeric string is the Agent ID in the name. In our above project, it will be: e2c5d8a3-f416–4f32-bfc9-d986d540abdb. Copy the Agent ID as well.

Step 5: Integrate Dialogflow CX Bot into Kommunicate

Go back to the Bot Integration section in the Kommunicate Dashboard.

Upload the “Service account key” you got from the previous step

Mention the Agent ID (you got from the last step) in the Agent ID: (Dialogflow CX users only) field

Click on Save and proceed. In the bot profile section that follows, you will be able to give your bot a name and identity. This name will be visible to your customers whenever the bot interacts with them.

To complete the setup, click Save and proceed to the next steps. You can set up your bot profile and automatic chatbot to human handoff in the next steps.

You can check your newly created bot in two places:

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

Step 6: Integrate Dialogflow CX bot in website

The final step is to connect the Dialogflow CX bot to your website, via the Kommunicate chat widget. Before that, to use the bot in customer conversations, you need to assign all the incoming conversations to the bot. You can do that from the Conversation rules section under ⚙️Settings.

Enable Assign new conversations to the bot and select your newly configured bot from the Select a bot dropdown. Learn more about conversation rules here.

Navigate to Dashboard → ⚙️Settings. Click on the Install section and click the Web tab and copy the JavaScript code.

Copy the JavaScript code, add it to your website code. The Kommunicate chat widget will appear and you would be able to see your bot live in action. Please refer to the following link here for more information on web installation.

Wrapping Up

In these simple steps, you can integrate the Dialogflow CX bot into the website using Kommunicate.

Disclaimer: Being a follower of ‘Chatbots Journal’ offers lots of perks :) A consultation session with experts from across the industries is a major one. Submit your query here and we will connect you with the right chatbot experts. He might be sitting next door, you never know.