Skip to main content
AI Chatbots

Scroll snapping

New information is automatically loaded at the bottom of the chat window. In cases where the virtual assistant's answer is long and exceeds the text display limits, all actions are loaded immediately after the question is answered. As a result, users typically only see the end of the answer. To get back to the beginning, users use the scroll bar on the right side of the chat window by scrolling back.

Default scrolling behavior in a long chat response

If the virtual assistant provides numerous lengthy responses, you can incorporate settings into your virtual assistant's code. These settings would enable snapping of the scroll bar, allowing users to scroll through the text at their preferred reading speed.

Scroll Snap on Page​

Add the lines to the "style" parameter in the virtual assistant code to be inserted on homepages:

style: {
  scrollToEnd: true,
  autoScrollSnapOnPage: true,
  autoScrollSnapOnPageOffset: -60,
}
  • scrollToEnd: true This property ensures the scroll position goes to the very end of the newly loaded content.
  • autoScrollSnapOnPage: true This property enables the auto-scroll feature to "snap" to the top of the new content within the chat window, preventing it from immediately jumping to the bottom.
  • autoScrollSnapOnPageOffset: -60 This property sets a pixel offset for the snap position. A value of -60 means the final snap point will be 60 pixels above the top of the new content, which can help account for headers or other UI elements.

In a chat window, new information is loaded and captured until the entire window is filled. The scroll bar is snapped and the rest of the information that is not displayed is available to the user by scrolling down in the conversation.

snapwindow

Scroll Snap on Activity​

This method snaps the view to each new "activity" or message bubble within the chat window. Add these lines to the style parameter in the virtual assistant's embed code:

style: {
  scrollToEnd: true,
  autoScrollSnapOnActivity: true,
  autoScrollSnapOnActivityOffset: 60,
}
  • scrollToEnd: true This property ensures the scroll position goes to the end of the new content.
  • autoScrollSnapOnActivity: true This property enables the auto-scroll feature to snap to each new activity (e.g., each message bubble) as it appears.
  • autoScrollSnapOnActivityOffset: 60 This property sets a pixel offset for the activity snap. A value of 60 means the snap point is 60 pixels below the start of the new activity.

In a chat window, new information is loaded and captured with the first new action. The scroll bar is snapped and the rest of the information, which is not displayed, is available to the user by scrolling down in the conversation.

snapon activity