The Container wraps the core Webchat interface. It manages:

  • Layout
  • Drag-and-drop file uploading
  • Connection status feedback

It also provides a shared context for nested components like MessageList and Composer.

​
Usage

We recommend using the Container as the top-level wrapper around your Webchat content.

import { Container, useWebchatClient } from '@botpress/webchat'

function App() {
  const [isWebchatOpen, setIsWebchatOpen] = useState(false)

  const { clientState } = useWebchatClient({
    clientId: '$CLIENT_ID$', // Insert your Client ID here
  })

  return (
    <Container
      connected={clientState !== 'disconnected'}
      style={{
        width: '500px',
        height: '800px',
        display: isWebchatOpen ? 'flex' : 'none',
        position: 'fixed',
        bottom: '90px',
        right: '20px',
      }}
    >
      // Your webchat content goes here
    </Container>
  )
}

​
Props

​
connected
boolean

Indicates whether the Webchat is currently connected. When false, a modal appears and prompts the user to retry by reloading the page.

​
...props
ComponentProps<'div'>

All standard <div> props are passed through, allowing further customization like styling or event handlers.

Was this page helpful?

Suggest editsRaise issue