> ## Documentation Index
> Fetch the complete documentation index at: https://botpress-pb-update-api.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Header

The `Header` component sits at the top of the Webchat UI. It displays the bot’s name, avatar, and description. It also provides access to key actions like restarting the conversation or closing the chat window.

<Panel>
  <Tabs>
    <Tab title="Example">
      <iframe src="https://botpress.github.io/docs-examples/iframe.html?args=&globals=&id=header--primary" title="Header component" className="w-full rounded-xl" height={'500px'} wid />
    </Tab>

    <Tab title="Code">
      ```jsx App.jsx theme={null}
      import { Header, useWebchat } from '@botpress/webchat'

      // Every attribute that the header component can take
      const headerConfig = {
        botName: 'SupportBot',
        botAvatar: 'https://cdn.botpress.cloud/bot-avatar.png',
        botDescription: 'Your virtual assistant for all things support.',

        phone: {
          title: 'Call Support',
          link: 'tel:+1234567890',
        },

        email: {
          title: 'Email Us',
          link: 'mailto:support@example.com',
        },

        website: {
          title: 'Visit our website',
          link: 'https://www.example.com',
        },

        termsOfService: {
          title: 'Terms of Service',
          link: 'https://www.example.com/terms',
        },

        privacyPolicy: {
          title: 'Privacy Policy',
          link: 'https://www.example.com/privacy',
        },
      }

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

        const { newConversation } = useWebchat({
          clientId: '$CLIENT_ID$', // Insert your client id here
        })

        return (
          <Header
            onOpenChange={() => console.log('Override the header open change')}
            defaultOpen={true}
            closeWindow={() => setIsWebchatOpen(false)}
            restartConversation={newConversation}
            disabled={false}
            configuration={headerConfig}
          />
        )
      }
      ```
    </Tab>
  </Tabs>
</Panel>

<Note>
  Although you can use the `Header` as a standalone component, we recommend using it within the
  [Container](./container) component and alongside the [Composer](./composer) and [MessageList](./message-list) components.
</Note>

## Props

<ResponseField name="defaultOpen" type="boolean">
  Controls whether the header is expanded by default. Only used when the `open` prop is uncontrolled.
</ResponseField>

<ResponseField name="open" type="boolean">
  Explicitly controls whether the header is open. Useful for managing the open state from a parent component.
</ResponseField>

<ResponseField name="onOpenChange" type="(open: boolean) => void">
  Callback triggered when the open state changes. It overrides the default behavior of expanding the header. Receives
  the new open state as an argument.
</ResponseField>

<ResponseField name="disabled" type="boolean">
  Disables the header toggle functionality when set to `true`.
</ResponseField>

<ResponseField name="restartConversation" type="() => void">
  Optional function to restart the current conversation. Typically resets the conversation state to the beginning. The
  header must be within a `ModalProvider` for this to work. A  ModalProvider is provided automatically with the
  `Container` component.
</ResponseField>

<ResponseField name="closeWindow" type="() => void">
  Optional function to close the chat window. Useful for embedding scenarios or controlled UIs.
</ResponseField>

<ResponseField name="configuration" type="Pick<Configuration, 'email' | 'phone' | 'privacyPolicy' | 'website' | 'termsOfService' | 'botAvatar' | 'botDescription' | 'botName'>" required>
  A configuration object containing bot identity and contact details. To enable the expanded header with additional
  links (e.g., website, terms of service), include the following fields: `email`, `phone`, `privacyPolicy`, `website`,
  and `termsOfService`.

  <Expandable>
    <ResponseField name="botName" type="string">
      Name of the bot displayed in the header.
    </ResponseField>

    <ResponseField name="botAvatar" type="string">
      URL to the bot avatar image.
    </ResponseField>

    <ResponseField name="botDescription" type="string">
      Description text shown in the Webchat header.
    </ResponseField>

    <ResponseField name="phone" type="{ title?: string, link?: string }">
      Phone contact information with title and link.
    </ResponseField>

    <ResponseField name="email" type="{ title?: string, link?: string }">
      Email contact information with title and link.
    </ResponseField>

    <ResponseField name="website" type="{ title?: string, link?: string }">
      Website link information with title and URL.
    </ResponseField>

    <ResponseField name="termsOfService" type="{ title?: string, link?: string }">
      Terms of Service link with title and URL.
    </ResponseField>

    <ResponseField name="privacyPolicy" type="{ title?: string, link?: string }">
      Privacy Policy link with title and URL.
    </ResponseField>
  </Expandable>
</ResponseField>