Rafał•8h ago

blocking the removal of extra spaces

How to block chat from removing extra spaces?

1 Reply

By default every browser (and therefore the Voiceflow web-chat widget) renders HTML text with collapsed whitespace – a run of spaces is shown as a single space. There are two practical ways to keep the extra spaces you need: 1. Insert non-breaking-space entities in the Text step
• Replace each extra space with   ( ) inside the Text/Prompt output.
• Example: Hello   world will show three spaces between the words. 2. Tell the widget not to collapse spaces with CSS
• Add a small rule that sets white-space: pre-wrap (or pre) on the chat message bubbles.
• You do this through the assistant.stylesheet property when you load the widget:

<script>
(function(d,t){
  var v=d.createElement(t),s=d.getElementsByTagName(t)[0];
  v.onload=function(){
    window.voiceflow.chat.load({
      verify:{ projectID:'YOUR_PROJECT_ID' },
      url:'https://general-runtime.voiceflow.com',
      versionID:'production',
      assistant:{
        // you can link a hosted .css file …
        // stylesheet:'https://yourdomain.com/chat.css'

        // …or embed it in-line as a data-URL:
        stylesheet:'data:text/css;base64,LnZmcmMtbWVzc2FnZSB7IHdoaXRlLXNwYWNlOiBwcmUtd3JhcDsgfQ=='
      }
    });
  };
  v.src='https://cdn.voiceflow.com/widget/bundle.mjs';
  v.type='text/javascript';
  s.parentNode.insertBefore(v,s);
})(document,'script');
</script>

<script>
(function(d,t){
  var v=d.createElement(t),s=d.getElementsByTagName(t)[0];
  v.onload=function(){
    window.voiceflow.chat.load({
      verify:{ projectID:'YOUR_PROJECT_ID' },
      url:'https://general-runtime.voiceflow.com',
      versionID:'production',
      assistant:{
        // you can link a hosted .css file …
        // stylesheet:'https://yourdomain.com/chat.css'

        // …or embed it in-line as a data-URL:
        stylesheet:'data:text/css;base64,LnZmcmMtbWVzc2FnZSB7IHdoaXRlLXNwYWNlOiBwcmUtd3JhcDsgfQ=='
      }
    });
  };
  v.src='https://cdn.voiceflow.com/widget/bundle.mjs';
  v.type='text/javascript';
  s.parentNode.insertBefore(v,s);
})(document,'script');
</script>

The Base-64 string above decodes to the CSS:

.vfrc-message { white-space: pre-wrap; }

.vfrc-message { white-space: pre-wrap; }

With that rule in place the widget will render every space (and line break) exactly as it appears in your Text/Prompt step content. Choose whichever approach fits your use case: • use   when only a few fixed spaces are needed in one response;
• use the CSS override when you want all messages (or a specific type of message) to preserve full whitespace automatically. Docs reference: “Custom web chat styling” – https://docs.voiceflow.com/docs/custom-web-chat-styling

blocking the removal of extra spaces

Did you find this page helpful?