How to enable scroll for embedded chatbox

  • Resolved shindevijaykr

    (@shindevijaykr)


    3 months, 2 weeks ago

    Hi

    We have TWO chat boxes added to our website. One at the bottom left as a popup and one in the sidebar as a widget. For the widget chat box in the sidebar, when the user asks any query the answer is shown without enabling the scrollbar or limiting the height of the chat box by enabling the scroll bar hence for bigger answers the chat box goes down in the footer and user is not able to see the entire answer displayed in the chat box as there is no scrollbar for this. Here is a screenshot of how it looks. https://ibb.co/RCvYVjV

    We have disabled it for now due to this issue until we find a solution to limit this. We have tried ALL other settings from the appearance and thresholds but nothing seems to be working.

    Can you help us on how we can keep this chat box of fixed width and enabling scroll when the answer is more than the height of the chat box?

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Support Val Meow

    (@valwa)

    Hey @shindevijaykr! ??

    For anything related to appearance, you can use CSS to customize how your chatbot looks or use the theme editor to create your own theme. For example, if you’d like to add a scroll bar when chatbot responses exceed a certain size, you can set a maximum height on the chatbot response element in your CSS. This ensures the content remains within the declared size while allowing users to scroll.

    If you want the entire chatbot window to fit within your embedded page, you can set a maximum height for its parent container to ensure it remains confined within its element. A scroll bar will automatically appear when the content exceeds the container’s height. Make sure to adjust the?overflow?property in your CSS (e.g.,?overflow: auto;) to suit your specific use case.

    Thread Starter shindevijaykr

    (@shindevijaykr)

    Thanks for the details. Can you please help in this case if we want to use a fixed height of 600 pixels for the chat box? What exact CSS do we need to use?

    Our goal is to show Chatbox in the sidebar as shown in the previous screenshot. So any response will be restricted to a box of height max 600 pixels with scroll enabled when the response extends beyond this.

Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.