Last Updated on January 28, 2023

integrate dialogflow cx bot in website - Kommunicate

What is Dialogflow CX

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 Dialogflow CX bot into the website. We will be using the Kommunicate powered chat plugin to add to a website that integrates well with Dialogflow CX.

CTA banner

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.

integrate dialogflow cx bot in website vis Kommunicate dashboard

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’.

create a project

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.

integrate dialogflow cx bot in website - create an agent

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

integrate dialogflow cx bot in website - bot samples

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

Dialogflow CX - Copy ID

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:

✔️ Get service account key file as follows:

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 three-dot & click Copy ID option which is the Agent ID.

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.

Dialogflow-CX AgentID

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
integrate dialogflow cx bot in website - integrate dialogflow cx

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.

integrate dialogflow cx bot in website - set bot profiles

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.

integrate dialogflow cx bot in website - human handoff

You can check your newly created bot in two places:

  1. Dashboard →Bot Integration → Manage 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.

CTA banner

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 bot and select your newly configured bot from the Select a bot dropdown. Learn more about conversation rules here.

integrate dialogflow cx bot in website - Integrate in website

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

integrate dialogflow cx bot in website

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.

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 on board to have a first-hand experience of Kommunicate. You can signup here and start delighting your customers right away.

Write A Comment

Upcoming Webinar: Conversational AI in Fintech with Srinivas Reddy, Co-founder & CTO of TaxBuddy.