Botpress Cloud: Messaging Channels

Web Chat

Messaging channels
  1. Make sure you've published your chatbot to Botpress Cloud.
  2. Go to your published chatbot in the Botpress Cloud dashboard and click on Web Chat under the Channels tab and enable it.
  3. Copy the Pre-configured script and paste it in the <body></body> tag of your HTML page.(Optional)
  4. 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.


Messaging channels

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..)
Defaults to the user's browser language if not set


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