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 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
clientId string
required
storageKey string
user UserCredentials
conversationId string
configuration Configuration