extended-salmon•5mo ago
Black Highlight Issue - Message Input Section
I’ve embedded the Voiceflow chat widget on a site I built using bolt.new — everything works smoothly, except for one thing:
💬 The input field where users type messages has a black background, and I can’t change it to match my site’s theme.
I’ve tried:
- CSS overrides (.vfrc-chat-input)
- JS injection after load
- Using !important on all properties
But nothing seems to apply, I suspect the input might be inside a protected iframe or Shadow DOM?
Is there a way to style the input field via config or widget theming?
Would love to align it with the rest of the site.
Thanks in advance! 🙏
3 Replies
When you notice that external CSS isn’t affecting the input field, it’s because the chat widget is loaded in a way (typically using the Shadow DOM in embedded mode) that isolates its inner elements from your page’s styles. This means that traditional CSS overrides (or even JS injections) won’t apply to elements like the message input.
To customize the input field styling (or any part of the widget), you can inject your custom CSS directly into the widget via its configuration. You do this by passing a self-hosted stylesheet or a data URL with your CSS into the assistant’s configuration when you call window.voiceflow.chat.load. For example:
------------------------------------------------------------
window.voiceflow.chat.load({
verify: { projectID: "YOUR_PROJECT_ID" },
url: "https://general-runtime.voiceflow.com",
versionID: "production",
assistant: {
stylesheet: "data:text/css;base64,LnZmcmMtdGV4dC1pbnB1dCB7IGJhY2tncm91bmQtY29sb3I6ICIjRkZGRkZGIjt9" // Your base64-encoded CSS here
}
});
------------------------------------------------------------
In the example above, the custom CSS (after decoding) targets the input field—assuming you write rules for the appropriate class (e.g., .vfrc-text-input or .vfrc-chat-input). Remember to adjust your CSS selectors based on the actual element classes provided by the widget.
For more details on embedding and customizing the widget look and feel, check out our documentation: Embed & Customize Styling.
Hope that helps!
extended-salmonOP•5mo ago
This solved the issue! Thank you !
This worked for me too 🙏🏼