Webchat

Example
Code

import { Fab, Webchat } from '@botpress/webchat'
import { useState } from 'react'

function App() {
const [isWebchatOpen, setIsWebchatOpen] = useState(false)
const toggleWebchat = () => {
    setIsWebchatOpen((prevState) => !prevState)
}
return (
    <>
    <Webchat
        clientId="$CLIENT_ID$" // Your client ID here
        style={{
        width: '400px',
        height: '600px',
        display: isWebchatOpen ? 'flex' : 'none',
        position: 'fixed',
        bottom: '90px',
        right: '20px',
        }}
    />
    <Fab
        onClick={() => toggleWebchat()}
        style={{
        position: 'fixed',
        bottom: '20px',
        right: '20px',
        width: '64px',
        height: '64px'
        }}
    />
    </>
)
}

export default App

Example
Code

import { Fab, Webchat } from '@botpress/webchat'
import { useState } from 'react'

function App() {
const [isWebchatOpen, setIsWebchatOpen] = useState(false)
const toggleWebchat = () => {
    setIsWebchatOpen((prevState) => !prevState)
}
return (
    <>
    <Webchat
        clientId="$CLIENT_ID$" // Your client ID here
        style={{
        width: '400px',
        height: '600px',
        display: isWebchatOpen ? 'flex' : 'none',
        position: 'fixed',
        bottom: '90px',
        right: '20px',
        }}
    />
    <Fab
        onClick={() => toggleWebchat()}
        style={{
        position: 'fixed',
        bottom: '20px',
        right: '20px',
        width: '64px',
        height: '64px'
        }}
    />
    </>
)
}

export default App

The Webchat component is a batteries-included implementation of the Webchat window. It contains most of what you’d expect when injecting Webchat.

The Webchat component doesn’t use the configuration set in your bot’s Dashboard. Instead, configure it using the configuration prop.

The <Webchat> component is incompatible with the useWebchat hook—using them together will cause issues and unexpected behaviour.If you need to use the hook, make sure you’re manually building Webchat.

Props

string

required

Your bot’s client ID.

string

Custom key for Webchat’s local storage (if your bot’s configuration uses local storage)

UserCredentials

User to load Webchat with.

Show child attributes

string

The user’s ID.

string

The user’s token.

string

Conversation ID to load Webchat with.

Configuration

Configuration for Webchat’s appearance and style. This object’s properties are similar to the Webchat configuration options available in the Dashboard.

Show child attributes

string

Name of the bot displayed in the header.

string

URL to the bot avatar image.

string

Description text shown in the Webchat header.

string

Image for the Fab.

{ title?: string, link?: string }

Phone contact information with title and link.

{ title?: string, link?: string }

Email contact information with title and link.

{ title?: string, link?: string }

Website link information with title and URL.

{ title?: string, link?: string }

string

Placeholder text for the input composer.

string

Primary theme color in hex format.

number

Corner radius for UI elements. Can be 0.5 - 4

'light' | 'dark'

Light or dark mode theme.

'solid' | 'soft'

Visual style of the chat window.

'rubik' | 'inter' | 'ibm' | 'fira'

Font family used in Webchat.

boolean

Flag to show or hide the “Powered by Botpress” footer.

string

Custom inline CSS to apply to the Webchat.

string

URL pointing to an external stylesheet.

boolean

Flag to enable file uploads in the chat.

'localStorage' | 'sessionStorage'

Location to store Webchat session data.

string

Footer content in Markdown.

'solid' | 'glass'

Style variant of the header.

boolean

Toggle for user feedback feature.

Last modified on January 15, 2026

Get started

ADK

Studio

Integrations

Botpress Desk

Webchat

Props

​Props

Props