Caution
This repository has been archived and should no longer be referenced as an example of the react-chat library.
However, the functionality on display here has been replicated in the react-chat
repo:
- Custom messages are now built in! See our documentation to get started
- A rebuilt demo of live agent handoff can be found here
yarn install
Import this project with custom actions into your Voiceflow workspace.
It includes custom account_info
, calendar
and video
actions.
Follow these instructions to get the Dialog API key for your Voiceflow project.
Write your API key to a .env.local
file.
# replace `XXX` with your API key
echo 'VF_DM_API_KEY=XXX` > .env.local
This setup is NOT the recommended way of authenticating a Web Chat project with the Voiceflow Dialog API. Using the API key in the browser exposes it to the user and could allow them to make unauthorized requests to the API.
For a production-ready setup, you should publish your Voiceflow assistant and update the options passed to the useRuntime
hook. You can find your assistant's projectID
in the code example on the Web Chat Integration page.
See our docs for more information.
useRuntime({
verify: { projectID: 'XXX' },
versionID: 'production',
// the rest of your options can stay the same
});
The demo app will be available locally at http://127.0.0.1:3006.
yarn dev
![Screenshot 2023-06-12 at 3 53 10 AM](https://private-user-images.githubusercontent.com/3784470/245069442-417199c3-317f-4722-9b5f-e27fff78d6e8.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQwNTQ4ODgsIm5iZiI6MTcyNDA1NDU4OCwicGF0aCI6Ii8zNzg0NDcwLzI0NTA2OTQ0Mi00MTcxOTljMy0zMTdmLTQ3MjItOWI1Zi1lMjdmZmY3OGQ2ZTgucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDgxOSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA4MTlUMDgwMzA4WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MzIxZjdmMTMxMzE4ZTc1NGUxMDdiNDRlMDZhZmNiOGFjMTRjYzczYTM4NjdjMzVlMzJlN2Y1YmE3M2Y3NjZkMiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.R71J0HfNr1_DohWCE8iLKqjhA1uLk5D_1szE6Q7wsEk)
To demo this functionality you will need to run a local WebSocket server that will interface with the live agent platform.
The server/
directory contains a sample server with some basic integrations.
See the README for more information.
- "What is my account status?"
- "Can I check my account?"
- "What is the status of my account?"
This will re-use our existing text messages to display a message with the user's account information.
The created_at
date is rendered with the locale-appropriate date format.
- "Can I book an appointment?"
- "I want to schedule a meeting"
This will re-use our existing text messages to display a message with the user's account information.
The created_at
date is rendered with the locale-appropriate date format.
- "What services to you offer?"
- "Give me a list of services you provide"
- "What do you offer?"
This will re-use our existing text messages to display a message with the user's account information.
The created_at
date is rendered with the locale-appropriate date format.
- "I want to talk to a human"
- "Please connect me to a human"
This will switch the conversation into a mode that emulates talking with a live agent.
New messages will skip the Voiceflow logic and be sent directly to the agent.
You can also end the live conversation and return to talking with the Voiceflow bot.
Make sure to run the server in ./server
with the command yarn dev
.
- "Open tetris"
- "Launch tetris"
This will display an embedded <iframe>
pointed at https://tetris.com/
.
It is meant to showcase how you can distribute "plugin" scripts that dynamically add functionality to the widget.
Make sure to build the plugin in ./plugin
with the command yarn build
.