msampino
msampino3h ago

Agent responses are cut off in the chat embed, but i see the full response on voiceflows side.

No description
2 Replies
Tico | Voiceflow Assistant
If you’re seeing the assistant’s full answer inside Voiceflow but the message appears truncated in your embedded chat, it’s almost always a sizing issue with the element you embedded the widget into.
Why it happens
• In render.mode: "embedded" the chat is mounted inside the element you pass in render.target.
• That element (and any of its parents) becomes the chat’s viewport — if it has a small / fixed height or overflow:hidden, anything that exceeds that height is clipped, so the answer looks cut off.
• The chat itself scrolls automatically, but it can only scroll inside the space the host element provides. How to fix it
1. Make the host element tall enough or scrollable:
<div id="flat-chat" style="width:100%; height:100vh; /* or any value */ overflow:auto;"></div>
<div id="flat-chat" style="width:100%; height:100vh; /* or any value */ overflow:auto;"></div>
2. OR let the element grow with flex/grid:
#flat-chat { flex: 1 1 auto; }
#flat-chat { flex: 1 1 auto; }
3. If you’d rather not manage sizing manually, switch back to the default overlay widget: remove the render block or set render.mode: 'overlay' – the popup widget handles its own height and long answers will scroll automatically. 4. After changing the page’s CSS, hard-refresh to make sure the latest widget (https://cdn.voiceflow.com/widget/bundle.mjs) is loaded. Reference docs: Embed and customize styling – “When in render.mode: 'embedded' the chat will mount into the target via Shadow DOM treating the target element as a host.”
https://docs.voiceflow.com/docs/embed-and-customize-styling Once the container can grow/scroll, the full assistant response will be visible in the embedded chat.
msampino
msampinoOP3h ago
But the message it happened with was short. Shorter than almost all the other messages @Tico | Voiceflow Assistant

Did you find this page helpful?