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.
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.
useRuntimehook to interact with your assistant's flows and manage conversation turns.
- If you want to launch a chat experience in a
- 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.
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.
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 (https://github.com/voiceflow/react-chat) is a repository that contains two packages:
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 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.
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.
Updated about 1 month ago