Customizing Web 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 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:

📘

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 (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.