Open sourced react-chat
We've open sourced our Web Chat widget so that you can make any modifications you want to it.
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
@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
Instructions & Code Repositories
You can find our open-source code and simple demo project repository with further instructions below:
react-chat
react-chat
react-chat
(https://github.com/voiceflow/react-chat) is a repository that contains:
packages/react-chat
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 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.
Updated 2 months ago