> ## Documentation Index
> Fetch the complete documentation index at: https://botpress.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# 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`.

> [tab] Example
>
> [Container component](https://botpress.github.io/docs-examples/iframe.html?args=\&globals=\&id=container--primary)

> [tab] Code
>
> ```jsx App.jsx theme={"theme":{"light":"light-plus","dark":"dark-plus"}}
> 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>
>   )
> }
> ```

## 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](https://botpress.com/docs/webchat/react-library/components/composer.md) contains a file upload button.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.