Overview

With Voiceflow’s Chat UI Kit (react-chat), you can customize the visual elements of your chat Agent like the font and colors or build a custom component for a Custom Action step.

Our react-chat library is built in React and available through npm. The library provides access to:

• Voiceflow’s React chat UI elements, which you can customize or re-use to display other custom chat components.
• A useRuntime hook to interact with your agent's flows and manage conversation turns.

When to use @voiceflow/react-chat

• If you want to launch a chat experience in a react application.
• If you want to integrate a custom chat experience with custom message types or components such as (and not limited to) the following:
  • Calendar widget
  • Live Chat Handoff

📘

Use Custom Actions in your agent's design to help build custom components like the ones listed above.

Demo

In this video, we will show you how to get started with our Web Chat UI Kit and what a Custom Action might look like.

Before you begin

• Create a Voiceflow project and
• Get your Voiceflow agent's Dialog Manager API key

Instructions & Code Repositories

You can find our open-source code and simple demo project repository with further instructions below:

• react-chat package on npm

react-chat

react-chat (https://github.com/voiceflow/react-chat) is a repository that contains:

packages/react-chat

packages/react-chat is the application code for webchat. It manages the client conversation state and can be customized with various configurations. You can inspect all of the available components in our Storybook.

This library is bundled and distributed to the Voiceflow CDN. It is intended to be loaded by a simple JavaScript snippet (see Web Chat (Basic)). This is the primary method of consuming this widget in production.