Botpress Cloud: Messaging Channels
Web Chat

- Make sure you've published your chatbot to Botpress Cloud.
- Go to your published chatbot in the Botpress Cloud dashboard and click on
Web Chat
under theChannels
tab and enable it. - Copy the Pre-configured script and paste it in the
<body></body>
tag of your HTML page.(Optional) - You can share your chatbot with people that would like to quickly test your chatbot using the Sharable Link
You can also click on the Configurable option if you want to customize the web chat configuration.

The configuration object passed to the .init()
accepts the following available options which you can pass to customize
the behavior of the web chat:
Customization Variable | Variable type | Default value | Description |
stylesheet |
string | - |
Provide a path to a stylesheet to customize the web chat |
showConversationsButton |
boolean | true |
If false, will hide the conversation list pane |
showTimestamp |
boolean | false |
If true, will display a timestamp under each messages |
enableTranscriptDownload |
boolean | true |
Allows the user to download the conversation history |
enableConversationDeletion |
boolean | false |
Allows the user to delete its conversation history |
closeOnEscape |
boolean | true |
Close the web chat when pressing the Esc key |
botName |
string | - |
Displays the bot name to the right of its avatar |
composerPlaceholder |
string | 'Reply to {botname}' |
Allows to set a custom composer placeholder |
avatarUrl |
string | - |
Allow to specify a custom URL for the bot's avatar |
locale |
string | 'browser' | Force the display language of the web chat (en, fr, ar, ru, etc..) Set to 'browser' to force use the browser's language |
botConversationDescription |
string | - |
Small description written under the bot's name |
hideWidget |
boolean | false |
When true, the widget button to open the chat is hidden |
disableAnimations |
boolean | false |
Disable the slide in / out animations of the web chat |
useSessionStorage |
boolean | false |
Use sessionStorage instead of localStorage, which means the session expires when tab is closed |
containerWidth |
string | number | 360 |
Sends an event to the parent container with the width provided |
layoutWidth |
string | number | 360 |
Sets the width of the web chat |
enablePersistHistory |
boolean | true |
When enabled, sent messages are persisted to local storage (recall previous messages) |
className |
string | - |
CSS class to be applied to iframe |
disableNotificationSound |
boolean | false |
If true, chat will no longer play the notification sound for new messages. |
googleMapsAPIKey |
string | - |
Google Maps API Key required to display the map. It will display a link to Google Maps otherwise. |
website |
string | - |
Displays the bot's website in the conversation page |
phoneNumber |
string | - |
Displays the bot's contact phone number in the conversation page |
termsConditions |
string | - |
Displays the bot's terms of service in the conversation page |
privacyPolicy |
string | - |
Displays the bot's privacy policy in the conversation page |
emailAddress |
string | - |
Displays the bot's email address in the conversation page. |
coverPictureUrl |
string | - |
Displays the bot's cover picture in the conversation page |
showBotInfoPage |
boolean | false |
Enables the bot's information page in the web chat |
showCloseButton |
boolean | true |
Display's the web chat close button when the web chat is opened |