Webchat

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

    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

    Props

    clientId string required

    Your bot’s client ID.

    storageKey string

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

    user UserCredentials

    User to load Webchat with.

    conversationId string

    Conversation ID to load Webchat with.

    configuration Configuration

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