ratty-blush•2y ago

Modify watermark through the css

Hello guys, i wanted to modify the water through the styles.css given by VF : /* FOOTER Customize the layout and appearance of the message input field and the VF Branding / / .vf-footer {} / / .vfrc-input {} / / .vfrc-chat-input--button {} / / .vfrc-footer--watermark {} */ i have no idea how to modify the text nor integrate a link VF does with the default watermark. I appreciate any help

2 Replies

Tico | Voiceflow Assistant•2y ago

To customize the appearance of your Voiceflow chat widget, follow these steps: 1. Update Your Chat Widget Code: Begin by updating your Chat Widget code to include the assistant | stylesheet setting with the link to your self-hosted stylesheet. This allows you to use your own CSS file for styling the chat widget. 2. Customize Using CSS: In your CSS file, target elements that have classes beginning with .vfrc. For example, to adjust the width of the Chat Widget, you might use:

   .vfrc-widget--chat {
       width: 600px;
   }
   .vfrc-system-response--list .vfrc-message--chat {
       max-width: 460px;
       width: 400px;
   }

   .vfrc-widget--chat {
       width: 600px;
   }
   .vfrc-system-response--list .vfrc-message--chat {
       max-width: 460px;
       width: 400px;
   }

You can find a list of classes to target in the Voiceflow React Chat GitHub repository: Voiceflow React Chat Styles. 3. Refer to Documentation: For more detailed instructions on how to customize your chat widget's appearance and functionality, refer to the Voiceflow documentation: Voiceflow Chat Widget Documentation. 4. Text and Hyperlinks in Voiceflow: If you're looking to add or modify text and hyperlinks within the Voiceflow canvas, you can use the Text mode for adding simple text messages or the Text Markup Editor for more complex text styling and hyperlinking. To add a simple text message, access Text mode in the assistant's top menu. To modify existing text, click into the desired text field on the canvas. You can also add links by selecting the text you wish to display as the hyperlink and hitting the link icon in the Text Markup Editor. By following these steps and utilizing the provided resources, you can effectively customize your Voiceflow chat widget to better align with your branding and user experience goals.

W. Williams (SFT)•2y ago

You have to either create a stylesheet and host it on your website OR you can base64 encode it. Either way you need to include it in your integration code using:

assistant: { stylesheet: 'url-to-stylesheet or base64 encoded string' }

assistant: { stylesheet: 'url-to-stylesheet or base64 encoded string' }

You can find more info here: https://developer.voiceflow.com/docs/embed-customize-styling#custom-css-override--settings-and-styles

Modify watermark through the css

Did you find this page helpful?