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.
Although you can use the
Header as a standalone component, we recommend using it within the
Container component and alongside the Composer and MessageList components.Props
boolean
Controls whether the header is expanded by default. Only used when the
open prop is uncontrolled.boolean
Explicitly controls whether the header is open. Useful for managing the open state from a parent component.
(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.
boolean
Disables the header toggle functionality when set to
true.() => 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.() => void
Optional function to close the chat window. Useful for embedding scenarios or controlled UIs.
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.