Overview

With Voiceflow’s Chat UI Kit (react-chat), you can customize your chat assistant’s visual elements 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 assistant'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 assistant'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 assistant's Dialog 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
• Demo React project that uses the react-chat package and includes Custom Action demos

react-chat

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

packages/react-chat

packages/react-chat is a component library that contains all of the Voiceflow Web Chat's out-of-the-box user interface elements like buttons, message bubbles and other building blocks that can be composed together to build a chat interface. You can inspect all of the available components in our Storybook.

This library is published to npm as @voiceflow/react-chat and is bundled and distributed to the Voiceflow CDN. It can be used in other codebases, such as the widget package (found in the react-chat repository) or the demo-react-chat demo application.

packages/widget

packages/widget is the wrapper code that fetches the latest artifacts of packages/react-chat from our CDN and renders it as a widget in an <iframe>. It also creates a two-way message bus to communicate with the widget.

This code is also bundled and distributed to our CDN, and 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.

demo-react-chat

demo-react-chat (https://github.com/voiceflow/demo-react-chat) is a repository that contains a basic react application. It holds examples of how to customize the chat experience in a number of ways to demonstrate the flexibility of the @voiceflow/react-chat library. This is the example application that we use for our tutorials.