gradual-turquoise•2y ago
Full Screen Voiceflow Web-Chat integration
Is there a way to integrate Voiceflow as a full screen into a website? In other words, not as a ChatBot at the bottom left/right but seamlessly integrated?
3 Replies
Yes, it is possible to integrate Voiceflow as a full-screen experience on your website instead of using the default web chat widget. To achieve this, you can leverage our open-source Web Chat project (called "react-chat") and customize it to fit your desired full-screen experience.
Here are the high-level steps to integrate Voiceflow as a full-screen experience:
1. Clone the react-chat repository: Start by cloning the react-chat repository, which is an open-source project that provides the base for the Voiceflow web chat widget.
2. Customize the UI: Modify the UI components in the react-chat project to create a full-screen layout. You can remove the chat window UI and replace it with a full-screen interface that suits your website's design.
3. Integrate with Voiceflow API: Use the Dialog Manager API to integrate your Voiceflow agent with the customized full-screen interface. The API allows you to send user inputs, receive responses, and manage the conversation flow programmatically.
4. Host and deploy: Once you've customized the react-chat project, you'll need to host and deploy it on your own infrastructure. This could be a static hosting service like Netlify or a server that can serve the React application.
5. Embed on your website: Finally, embed the customized full-screen Voiceflow experience on your website by including the necessary HTML, CSS, and JavaScript files.
By following this approach, you can create a seamless, full-screen Voiceflow experience tailored to your website's design and branding. However, keep in mind that this solution requires the ability to host and maintain code on your own infrastructure.
For more detailed instructions and examples, refer to our Customizing Web Chat guide.
Related links:
- Dialog Manager API reference
- Customizing Web Chat guide
quickest-silver•2y ago
<#1212185893545443349>