absent-sapphire•2y ago

Custom CSS to support RTL when using Hebrew

Hey, I am using Voiceflow webchat with Hebrew responses and buttons (no AI, just simple conversation), and I want the messages to be right-to-left since Hebrew is written that way. Is there a way to change the CSS? How? I am trying to follow this tutorial but I can't solve it https://developer.voiceflow.com/docs/embed-customize-styling

2 Replies

Tico | Voiceflow Assistant•2y ago

To support right-to-left (RTL) languages like Hebrew in your Voiceflow webchat, you can customize the CSS of your chat widget. Here's how you can do it: 1. Update your Chat Widget code to include a link to your custom stylesheet. You'll need to add the assistant | stylesheet setting with the URL to your self-hosted CSS file. 2. In your CSS file, target elements with classes that begin with .vfrc. You can find a list of these classes and their default styles to override in the Voiceflow GitHub repository for the react-chat project. For RTL support, you might specifically want to adjust text alignment, direction, and possibly the layout of chat elements to ensure a natural flow for Hebrew text. Remember, this approach allows you to fully control the appearance of your chat widget, including adapting it for languages written from right to left. For more details on customizing your chat widget and a list of classes, you can visit: - Customizing Web Chat guide - Voiceflow GitHub repository for react-chat

absent-sapphireOP•2y ago

I tried to do it but I failed, I need help on what classes should I style and how to set the CSS in my code

{(function(d, t) {
      var v = d.createElement(t), s = d.getElementsByTagName(t)[0];
      v.onload = function() {
        window.voiceflow.chat.load({
          verify: { projectID: 'id' },
          url: 'https://general-runtime.voiceflow.com/',
          versionID: 'production'
        });
      }
      v.src = "https://cdn.voiceflow.com/widget/bundle.mjs"; v.type = "text/javascript"; s.parentNode.insertBefore(v, s);
  })(document, 'script')}

{(function(d, t) {
      var v = d.createElement(t), s = d.getElementsByTagName(t)[0];
      v.onload = function() {
        window.voiceflow.chat.load({
          verify: { projectID: 'id' },
          url: 'https://general-runtime.voiceflow.com/',
          versionID: 'production'
        });
      }
      v.src = "https://cdn.voiceflow.com/widget/bundle.mjs"; v.type = "text/javascript"; s.parentNode.insertBefore(v, s);
  })(document, 'script')}

this is what I currently have pinging

Custom CSS to support RTL when using Hebrew

Did you find this page helpful?