extended-salmon•2y ago
Background Color Change Not Applying in Voiceflow Chatbot
I've been trying to change the background color of my Voiceflow chatbot to black using a custom CSS file hosted on GitHub. I linked this CSS file in the chatbot settings via jsDelivr CDN. Despite the correct CSS selectors (.vfrc-chat and .vfrc-chat--overlay) and important rules, the background color remains unchanged. Inspecting the element shows the CSS link but no applied styles. Could there be an issue with CSS scoping or specificity? How can I ensure my styles apply to the chatbot?
5 Replies
To ensure your custom CSS styles apply to your Voiceflow chatbot, you might need to adjust the way you're integrating the stylesheet. Here's a streamlined approach to troubleshoot and apply your CSS correctly:
- Ensure your CSS file is correctly linked in the chatbot settings. You mentioned using jsDelivr CDN; double-check the URL for any typos or errors.
- Use the
assistant | stylesheet setting in your Chat Widget code to link to your self-hosted stylesheet. This method ensures your custom styles are loaded and applied correctly.
- In your CSS file, target elements with the .vfrc prefix. This is crucial for your styles to apply, as Voiceflow uses these classes for styling elements within the chat interface.
- Consider CSS specificity and scoping. If your styles aren't applying, it might be due to other styles having higher specificity. Using !important can help, but it's also worth reviewing your selectors to ensure they're specific enough to override default styles.
For more detailed guidance on customizing your chat widget, including a list of classes you can target, visit the Voiceflow documentation.You need to add the css / stylesheet to the integration code: https://developer.voiceflow.com/docs/embed-customize-styling#custom-css-override--settings-and-styles
extended-salmonOP•2y ago
yes is what I did :
autostart: false,
assistant: {
// background-color: "FBF8F3",
stylesheet: "https://raw.githubusercontent.com/Epare34/CSS/main/custom-styles.css"
}
});
But there are no changes... Do you have any ideas ?
@Gabriel | TimeAI The css file is using the wrong mime type. See this: https://seefusion.tech/voiceflow/css/?gabriel34210
Works just fine.
extended-salmonOP•2y ago
Thanks !😁