> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.crisp.chat/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to create an AI chatbot with Dialogflow

*Learn how to connect Dialogflow with Crisp to build a custom AI chatbot integration.*

This guide is intended for teams that want to maintain their own Dialogflow-based bot and connect it to Crisp through the Crisp APIs. If you want a native Crisp AI support agent instead, start with [Hugo](https://crisp.chat/en/ai/).

---

# ${color}[#0080dd](Before you start)

Dialogflow is a Google platform for building conversational agents. In this setup, Dialogflow handles intent detection, while Crisp receives the visitor messages and sends the bot replies back to the conversation.

__You will need:__
* A **Crisp workspace** with access to API credentials
* A **Dialogflow agent** with at least one intent
* A backend environment where you can run the connector code
* Basic familiarity with Node.js and environment variables

||| Keep your Crisp API credentials and Google service account file private. They should only be used from your backend, never from frontend code.

---

# ${color}[#0080dd](Understand the integration flow)

A Dialogflow bot is organized around an **agent**. When a visitor sends a message, Dialogflow matches that message against an **intent**, extracts useful parameters if needed, then returns a response or calls your fulfillment code.

![Dialogflow request flow](https://storage.crisp.chat/users/helpdesk/website/87ae2703583ac800/cleanshot-2025-02-24-at-121203_1y3oaha.png =1000xauto)

With Crisp in the middle, the flow usually looks like this:

1. A visitor sends a message through the Crisp chatbox.
2. Your backend receives the message through the Crisp RTM API.
3. Your backend sends the message to Dialogflow.
4. Dialogflow returns the matched intent response.
5. Your backend sends the response back to Crisp through the REST API.

---

# ${color}[#0080dd](Create a Dialogflow agent and intent)

Go to [Dialogflow](https://dialogflow.cloud.google.com/) and create an agent if you do not already have one.

#### ${color}[#445055](Create the agent)

1. Sign in to Dialogflow.
2. Click **Create new agent** in the left navigation.
3. Choose a name, default language, and Google Cloud project.
4. Click **Create**.

#### ${color}[#445055](Create a first intent)

For a quick test, create a simple ping-pong intent.

1. Open the **Intents** section.
2. Click **Create intent**.
3. Add `ping` as a training phrase.
4. Add `pong` as the response.
5. Click **Save**.

![Dialogflow intent configuration](https://storage.crisp.chat/users/helpdesk/website/87ae2703583ac800/cleanshot-2025-02-24-at-121230_1sd97ae.png =1000xauto)

#### ${color}[#445055](Test the intent)

Use the **Try it now** panel in Dialogflow and send `ping`. Dialogflow should return `pong` as the response.

![Dialogflow test response](https://storage.crisp.chat/users/helpdesk/website/87ae2703583ac800/cleanshot-2025-02-24-at-121240_nug3hy.png =1000xauto)

---

# ${color}[#0080dd](Get your Dialogflow API credentials)

Your backend needs Google credentials to call Dialogflow.

1. Follow Google's service account guide: [Create service account credentials](https://cloud.google.com/docs/authentication/production#create_service_account).
2. Add the **Dialogflow API Client** role to the service account.
3. Download the credentials file in **JSON** format.
4. Store that file securely on your backend host.

---

# ${color}[#0080dd](Connect Dialogflow to Crisp)

You can use Crisp's Dialogflow example repository as a starting point, then adapt it to your own bot logic.

1. Clone the example repository: [crisp-im/crisp-dialogflow](https://github.com/crisp-im/crisp-dialogflow).
2. Install the dependencies with `npm install`.
3. Create your Crisp API credentials from the [REST API authentication guide](https://docs.crisp.chat/guides/rest-api/authentication/).
4. Add your Crisp credentials to the project fields: **crispIdentifier** and **crispKey**.
5. Add your Dialogflow project ID in **dialogflowProjectId**.
6. Set the Google credentials environment variable.
7. Run the connector from the project root with `node lib/index.js`.

__Environment variable examples:__
* **macOS or Linux** → `export GOOGLE_APPLICATION_CREDENTIALS=PATH_TO_KEY_FILE.json`
* **Windows PowerShell** → `$env:GOOGLE_APPLICATION_CREDENTIALS="KEY_PATH"`

Once the connector is running, open your Crisp chatbox as a visitor and send `ping`. If everything is configured correctly, your bot should reply with `pong`.

---

# ${color}[#0080dd](Where to go next)

After the ping-pong test works, replace the example intent with the intents your customers actually need. You can also add fulfillment logic if Dialogflow needs to call your own backend before replying.

__Useful resources:__
* [Dialogflow ES tutorials](https://cloud.google.com/dialogflow/es/docs/tutorials)
* [Dialogflow ES how-to guides](https://cloud.google.com/dialogflow/es/docs/how)
* [Dialogflow ES samples](https://cloud.google.com/dialogflow/es/docs/tutorials/samples)
* [Crisp REST API quickstart](https://docs.crisp.chat/guides/rest-api/quickstart/)
* [Crisp RTM API quickstart](https://docs.crisp.chat/guides/rtm-api/quickstart/)