With an integration, end-user interactions are handled for you. You just need to build an agent, optionally implement a webhook, and configure the integration.
This guide shows you how to use the Dialogflow Messenger integration to provide a simple text chat user interface for your agent.
Before you begin
If you don't plan on using an integration, you can skip this quickstart.
You should do the following before reading this guide:
- Read Dialogflow CX basics.
- Perform setup steps.
- Perform steps in the Build an agent quickstart guide. Steps below continue working on the same agent. If you no longer have that agent, you can download the agent and restore it.
Setup
To set up and enable Dialogflow Messenger:
- Go to the Dialogflow CX Console.
- Choose your Google Cloud project.
- Select your agent.
- Select the Manage tab.
- Click Integrations in the left sidebar menu.
- Click Connect for Dialogflow Messenger.
- A configuration dialog opens.
- Click Enable.
- Copy the embed code for pasting in your website.
- Click Done on the configuration dialog.
Embed
Paste the embed code you copied above in a webpage on your website.
The <script> and <df-messenger> HTML elements
should be in the <body> element of your page.
To allow for responsive layouts,
also add the following to your <head> element:
<meta name="viewport" content="width=device-width, initial-scale=1">
Once embedded, you can interact with your agent through the webpage by clicking the chat icon in the lower right corner.
Customize
You can customize the appearance and behavior of this user interface in many ways. See the Dialogflow Messenger documentation for more information.