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 in website. We will be using 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
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 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.
Step 5: Integrate Dialogflow CX Bot into Kommunicate
- 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 bot and select your newly configured bot from the Select a bot dropdown. Learn more about conversation rules here.
In these simple steps, you can integrate Dialogflow CX bot into website using Kommunicate.