react-native-dfcx

React Native DFCX Component

A customizable React Native chat interface for Dialogflow CX agents

This React Native component provides a chat interface that communicates securely with a Dialogflow CX agent via a Google Cloud Function middleware proxy. It supports a wide range of Dialogflow Messenger response types and is designed to drop easily into any mobile app using React Native.

🔧 Note: You must deploy the required Cloud Function Middleware in your Google Cloud project before using this component.

Supported Dialogflow Response Types

The component supports the following standard Dialogflow response types in your conversation flows, as detailed in Google’s documentation: Dialogflow Messenger Fulfillment:

• Text: Simple text responses

• Description: Multi-line text with a header and body

• Info: Image with a title, body text, and optional URL

• Image: Direct image display

• Video: Embedded video via URL

• Button: Interactive buttons

  • Each button can include a label (text) and an optional URL.
  • Icons are not supported at this time — only plain text labels are shown.
  • If a URL is provided, tapping the button will open the URL in a browser.
  • If no URL is provided, tapping the button will send the button’s label as a new user message to the Dialogflow agent.

• List: Scrollable lists of items with titles, subtitles, and images

• Files: Downloadable file attachments with name and preview

• Chips: Quick reply suggestions

  • Each chip can include a label (text) and an optional URL.
  • If a URL is provided, tapping the chip will open the URL in a browser.
  • If no URL is provided, tapping the chip will send the chip label as a new user message to the Dialogflow agent.

• Accordion: Expandable content blocks

NOTE This component requires the chat Cloud Function to be deployed in the same Google Cloud project as your Dialogflow CX agent.

Installation

npm install react-native-dfcx

Basic Usage

import { ChatDialog } from 'react-native-dfcx';

<ChatDialog
  chatURL="https://europe-west1-dotstorming.cloudfunctions.net/cx-chat"
  apiKey="cb2be986-6b84-4ab1-8eeb-b2fc40402077"
  agentPath="https://dialogflow.cloud.google.com/cx/projects/dotstorming/locations/global/agents/4459aa96-eebe-4419-8d28-77207f442165"
  sessionTimeout={30}
  mainColor="#ff0000"
  mainTextColor="#FFFFFF"
  sessionVariables={{
    userId: '12345',
    userName: 'John Doe',
  }}
/>;

Props

Name	Type	Required	Default	Description
chatURL	string	✅	—	The URL of your deployed Dialogflow CX chat function.
apiKey	string	❌	—	Optional API key required to call the chat function.
agentPath	string	✅	—	The full Dialogflow Agent path URL.
languageCode	string	❌	'en'	Language code of the Dialogflow CX agent.
sessionTimeout	number	❌	30	Time in minutes before session resets and new session ID is generated.
placeholder	string	❌	'Message...'	Input placeholder text.
startMessage	string	❌	—	Hidden message sent to Dialogflow when session starts.
welcomeMessage	string	❌	—	Message shown to user at session start (not sent to Dialogflow).
mainColor	string	✅	—	Background color for user messages.
mainTextColor	string	✅	—	Color for user input text.
sessionVariables	object	❌	{}	Parameters sent with each user input.

Methods

Name	Description
restart	Restarts the chat session with a new session ID.

Retrieving your Agent Path

To find your agent path:

• Go to the Dialogflow CX Console.
• Open your project and view the list of agents.
• Click the clipboard icon next to your agent to copy its path.

The copied URL can be pasted directly into the agentPath prop.

Need Help?

For help or customizations, reach out to [e-mail].