automatic-azure•2y ago
Any developers here?
Hey there! I integrated my chatbot into my website and it's working really well, but I'd like to add some css animation.
The problem is that the code I input isn't changing anything. I tried many tag names and "class" from the html code, but still nothing happened...
Can anyone help me with that?
Thanks a lot!!
2 Replies
To add CSS animation to your chatbot integrated on your website, you need to ensure that you're correctly targeting the elements within the chat widget. Here are some steps and tips to help you:
- Make sure to update your Chat Widget code to include a link to your self-hosted stylesheet. This is done by adding the
assistant | stylesheet setting in your widget's script, pointing to the URL of your CSS file.
- In your CSS file, target the chat widget elements by using classes that begin with .vfrc. This prefix is used for all elements within the Voiceflow chat widget.
- For example, to adjust the width of the Chat Widget, you could use:
- You can find a list of classes and examples on how to style them in the Voiceflow GitHub repository for the react-chat package.
Remember, the effectiveness of your CSS depends on correctly targeting the elements within the chat widget. If changes aren't reflecting, double-check the class names and ensure your stylesheet is correctly linked in the widget's script.
For more detailed instructions and examples, you can refer to the Voiceflow documentation on customizing your chat widget with CSS here.automatic-azureOP•2y ago
This bot is actually great!