multiple-amethyst•15mo ago
Changing Voiceflow Ui for Wix.com website?
Hi guys, does anyone have any experience changing their chatbot Ui for their wix.com website ive tried a few things but i couldnt get it to work has anyone had any success?
3 Replies
To customize the Voiceflow UI for your website, you can use our open-source Web Chat project called
react-chat. Here’s a step-by-step guide to help you get started:
Step 1: Create a Voiceflow Project
1. Create a new assistant: When creating a new assistant, select the Chat option from the modality list.
Step 2: Get Your Dialog Manager API Key
1. Retrieve API Key: Ensure you have your Voiceflow agent's Dialog Manager API key. This is crucial for integrating the chat widget.
Step 3: Customize the Web Chat Widget
1. Use react-chat: Leverage our open-source Web Chat project to customize your chat widget. You can find the repository and further instructions here: react-chat on GitHub.
Step 4: Integrate with Your Website
1. Embed Code: Once you have customized your chat widget, you need to embed the code into your website. Your website platform should allow you to add custom code to your site.
Step 5: Configure Web Chat Settings
1. General Functional Configuration:
- Name: Brand your Assistant.
- Description: Provide a brief overview of your Assistant's functions.
- Chat Persistence: Choose whether to remember previous conversations.
- Position: Set the position of the chat widget on your website.
- Powered By: Option to show or hide the 'Powered by Voiceflow' message.
2. Appearance Configuration:
- Customize visual elements such as colors, fonts, and images to match your website’s design.
Additional Resources
- For detailed instructions on customizing the Web Chat, refer to our Customizing Web Chat guide.
- To see a demo project and further instructions, visit the react-chat GitHub repository.
By following these steps, you should be able to successfully customize and integrate the Voiceflow UI for your website.@randompenna has lots of experience with ui customisation