Sticky

Example to help you stick the component to any side of the screen - furthering a chat-like experience to your users. The core method to achieve this is to set the style property with position: fixed and defining the side you want to component to sit on e.g. right: 7%.

Example code

<!-- This example is for Vanilla JS and should be tailored to your framework (see Frameworks) -->

<deep-chat
  style="border-radius: 10px; position: fixed; bottom: 0px; right: 7%; z-index: 1"
  history='[
    {"text": "Hey, how are you?", "role": "user"},
    {"text": "I am doing great, thanks.", "role": "ai"},
    {"text": "What is the meaning of life?", "role": "user"},
    {"text": "Seeking fulfillment and personal growth.", "role": "ai"}
  ]'
  demo="true"
  connect='{"stream": true}'
></deep-chat>