Container

Example
Code

App.jsx

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

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

  const { clientState } = useWebchat({
    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>
  )
}

Example
Code

App.jsx

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

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

  const { clientState } = useWebchat({
    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>
  )
}

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.

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.

allowFileUpload

boolean

Controls whether the container has a dropzone for uploading files. Doesn’t affect whether the Composer contains a file upload button.

Floating Action Button

Header

Get started

ADK

Studio

Integrations

Webchat

Desk

Props

Get started

ADK

Studio

Integrations

Webchat

Desk

Documentation Index

​Props

Props