secure-lavender•2y ago
Aligning Text to the Right in Voiceflow Widget Messages
How can I align the text content to the right within the messages of a Voiceflow widget that is integrated as a window on a website?
2 Replies
To align text to the right within the messages of a Voiceflow widget integrated on a website, you would need to customize the CSS of the chat widget. Here's a general approach to achieve this:
- Use your own
style.css file to customize the appearance of the Chat Widget. This involves updating the Chat Widget code with an assistant | stylesheet setting to link to your self-hosted stylesheet.
- In your CSS file, target elements that begin with .vfrc. For aligning text to the right, you would specifically target the classes related to the messages within the chat widget. Unfortunately, the exact class name for message text isn't provided, but it will follow a similar pattern to other customization examples provided.
- An example provided for making the Chat Widget wider is .vfrc-widget--chat { width: 600px; }. To align text to the right, you would use a similar approach, targeting the message text class and using text-align: right;.
Remember, for detailed customization, you should refer to the list of classes and their current styling rules in the Voiceflow GitHub repository for the react-chat project. This will give you a comprehensive view of what elements you can customize and how to target them in your CSS file.
For more information on customizing your chat widget with CSS, you can visit the Voiceflow documentation.secure-lavenderOP•2y ago
I just posted my Voiceflow chatbot on my website as an embedded widget, but I'm facing an issue: the chatbot text is aligned in the center instead of being on the right side. Do you have any solution ?