wise-white•16mo ago
How do I embed my custom react chatbot into my frontend?
The documentation is really confusing and I've tried a bunch of things, but it still loads the voiceflow version of my chatbot, not my custom UI. https://red-ground-07a33300f.5.azurestaticapps.net/
45 Replies
wise-whiteOP•16mo ago
More background: https://discord.com/channels/1079548823610871889/1245423884136616006
To embed your custom React chatbot into your frontend, follow these steps:
1. Clone the Demo Repository:
- Clone the
demo-react-chat repository to your local machine. This repository contains the basic setup for integrating Voiceflow's Web Chat with a custom UI.
- Voiceflow's demo-react-chat repository
2. Set Up Your Environment:
- Ensure you have a Voiceflow account and workspace.
- Ensure you have an active Intercom account and workspace with the necessary permissions to create and manage apps in the Intercom Developer Hub.
3. Configuration:
- Follow the setup steps provided in the main directory's README file of the cloned repository. This will guide you through the necessary configurations to get your custom chatbot up and running.
4. Modify Configurations:
- You can modify configurations to point to different versions of your web chat, different agents, or a different runtime if you are on a private cloud environment.
- Modify Configurations
5. Customization:
- Customize the styling, widgets, and effects of your web chat to match your custom UI requirements.
- Advanced Web Chat Customization
6. Embedding the Chatbot:
- Embed the customized web chat into your frontend by including the necessary scripts and HTML elements as specified in the documentation.
By following these steps, you should be able to integrate your custom React chatbot into your frontend successfully. If you encounter any specific issues, refer to the detailed guides linked above for further assistance.wise-whiteOP•16mo ago
>Embed the customized web chat into your frontend by including the necessary scripts and HTML elements as specified in the documentation.
Yes, how.
I've deployed it to azure @ the URL above.
https://red-ground-07a33300f.5.azurestaticapps.net/chat_voiceflow_basic.js I am using this script to load it into my local FE
but it still just shows the voiceflow bot not my custom one
@SuperZooper @W. Williams (SFT) sry to keep tagging you guys but I've been trying to integrate this for days now
stormy-gold•16mo ago
It seems like you're not compiling the project in to a bundle @Deleted User
yarn build the project locally
then replace the normal Voiceflow widget snippet's src file to be you're newely bundled onewise-whiteOP•16mo ago
Hey
I've been trying to do that for the past few days and I'm not sure how.
stormy-gold•16mo ago
yarn build will make it go to the dist folderwise-whiteOP•16mo ago
I made the script source "https://red-ground-07a33300f.5.azurestaticapps.net/index.js"
but it does not work
theres no window.voiceflow in my js file
stormy-gold•16mo ago
On your local machine, open the project, and run
yarn install and yarn build which will output a bundle.mjs file in to the dist folder on your machine
That ifle is what you uploadwise-whiteOP•16mo ago
From which repo?
stormy-gold•16mo ago
the normal react-chat one
https://github.com/voiceflow/react-chat/
wise-whiteOP•16mo ago
i ran yarn build but dont see a dist folder anywhere
stormy-gold•16mo ago
i believe its inside
srcwise-whiteOP•16mo ago
i see one in ./packages/react-chat/dist
stormy-gold•16mo ago
ye could be
wise-whiteOP•16mo ago
wise-whiteOP•16mo ago
theres no src folder
stormy-gold•16mo ago
wait let me check my project
ye inside
./packages/react-chat/dist
it results in a bundle.mjs and style.csswise-whiteOP•16mo ago
Ok, yeah, it does build into that directory. Now what?
stormy-gold•16mo ago
Just replace the normal VF snippet (found on your VF project)
src (it's at the end of the snippet) with the one you compiled and host somewhere
Then you're golden 🙂wise-whiteOP•16mo ago
Thats the part Im not understanding
My bot is here: https://red-ground-07a33300f.5.azurestaticapps.net/
So I should be using the packages/react-chat as the source for my react bot
I built this using the demo-react-chat code because it actually used all of the components and has granularity
stormy-gold•16mo ago
ye. The entire project from the repo is just to run on your local machine and compile down to the
.mjs file
I'm note sure about the demo-react-chat repo whats going on there.. But should be the same concept. I think they deprecated that one though (not sure so take it with a grain of salt)wise-whiteOP•16mo ago
wise-whiteOP•16mo ago
This is the live agent example, it doesnt have a bundle.mjs
stormy-gold•16mo ago
ye not sure about the demo one, but similar concepts should apply, but maybe in a different way
wise-whiteOP•16mo ago
So what do I do to build a basic custom chatbot? Use the react-chat/packages/react-chat "repo" ?
Extract that part out into a new repo? And use that bundle.mjs?
How come "window.voiceflow" is not found in the compiled build for live-agent? Means I can't embed that example
wise-whiteOP•16mo ago
Ok I moved the react-chat/packages/react-chat/* into a new repo
wise-whiteOP•16mo ago
I don't see where to update project id or anything
wise-whiteOP•16mo ago
wise-whiteOP•16mo ago
I only see this
wise-whiteOP•16mo ago
I want to embed this into my site
wise-whiteOP•16mo ago
However this is how the bot looks, it is not my custom bot, its the voiceflow one
wise-whiteOP•16mo ago
?
when i run yarn dev in react-chat, i get a storybook app, not a bot
The only thing I need to know is how to get window.voiceflow into my index.js so it can be called from my FE
@MikeG can I send you my demo repo?
stormy-gold•16mo ago
When doing yarn dev on the react-chat it should automatically open the browser to a local webserver yarn runs, which links to
./packages/react-chat/examples/index.html
You can do that in the .env.development.local file
then yarn build builds the new mjs file
Then you have a bundle.mjs file which you can host somewhere
And you can replace the normal snippet of Voiceflow with the newely hosted mjs file as the srcstormy-gold•16mo ago
wise-whiteOP•16mo ago
OK I will give this a go soon, thanks for getting back to me
wise-whiteOP•16mo ago
This only makes sense if I'm doing this:
wise-whiteOP•16mo ago
so that window.voiceflow.chat.load actually works
thats the confusing part
yarn dev runs storybook
stormy-gold•16mo ago
Did you directly use the react-chat repo, or merge code in to the demo one?
I think that could be the issue
wise-whiteOP•16mo ago
I started a new repo and used parts from demo-react-chat repo
Which cant be called/embedded from my FE because theres no window.voiceflow.chat.load
Which is the problem im trying to solve now
Works on the standalone deployed URL on azure above
I haven't the faintest idea how to use the react-chat repo because the bot inside that one uses
ChatEmbed component and nothing else, and I need much more granularity than that
Nvm, ChatWindow has everything I needfascinating-indigo•15mo ago
Hello, i'm trying to host my voiceflow chatbot ReactJs project in O2SWITCH (my hosting service) i've installed all the necessary dependencies but when i run the command 'npm run build' it shows me this error " [sc3hixo4978@dock demo-react-chat-mainn]$ npm run build
demo-react-chat@1.0.0 build react-scripts buildCould not find a required file. Name: index.js Searched in: /home/sc3hixo4978/firmetik.fr/wp-content/reactpress/apps/demo-react-chat-mainn/src [sc3hixo4978@dock demo-react-chat-mainn]$ " and in my case i dont index.js i use main.tsx so this is a critical problem for me ; do anyone know how to resolve this problem and thanks in advance .
I think I asked this somewhere else, but why do you want to host this yourself?
fascinating-indigo•15mo ago
@W. Williams (SFT) Hello W.Williams, I want to change the language of the labels to French because the website I will integrate the bot into is in French.
@aka ouma sure. Shoot me a DM and I'll send you the CSS.
fascinating-indigo•15mo ago
@W. Williams (SFT) thank you ^^
sent you a DM