Channel integration
Webchat
Botpress integrates with your website through Webchat, a custom frontend for your bot built by Botpress. Add your bot to a website or application with an embed code or a fully customizable React library.
Botpress integrates with your website through Webchat, a custom frontend for your bot built by Botpress. Add your bot to a website or application with an embed code or a fully customizable React library.
Copy your bot's embed code from the Dashboard and add it to the head section of your website's HTML.
Use the Webchat React library to build a Webchat component directly into your application.
Set the primary color, font, theme mode, header style, message styling and corner radius, or modify the built-in CSS classes.
Display Webchat inside a specific HTML element, which hides the chat bubble and gives you more control over its appearance and location.
You need a published bot and basic familiarity with HTML to add Webchat to a self-hosted website.
Open your bot's Workspace, select the bot, go to Webchat, then Deploy Settings, and copy the Embed code.
Paste the embed code into the head section of your website's HTML, then open your website and start chatting with your bot.
Adjust identity, appearance, deploy settings and features in the Webchat section of the Dashboard, then select Publish Configuration.
Set your bot's avatar, display name, description, composer placeholder and a custom avatar for the Floating Action Button.
Add an optional email address, phone number, website, terms of service and privacy policy.
Set a proactive message, a trigger type and a delay time, and preview the bubble in the Dashboard.
Enable message feedback and view the feedback data in the Analytics menu.
Allow users to upload files, and turn on sound notifications for new messages with Webchat v3.3 or later.
Let users view and continue previous conversations with Webchat v3.6 or later, and choose session or local storage for chat history.
Toggle Webchat with the default chat bubble, a custom bubble image or your own HTML element.
Move the chat button and chat window to the left side of the screen by overriding the default CSS.
Use your bot's Webchat client ID to identify its Webchat instance when building with the React library.
Yes. Webchat is a custom frontend for your bot, built by Botpress, that adds your bot to your website with an embed code or a React library.
Yes. The Webchat documentation includes guides for adding your bot to WordPress, Wix and Webflow websites.
You need a published bot and basic familiarity with HTML. Familiarity with CSS helps if you want to use custom styles.
Yes. The Allowed Origins setting, available on the Botpress Team plan or higher, lets you whitelist the domains allowed to access Webchat.
No. Styles set in the Dashboard do not apply to the Webchat React library, where you use the configuration prop instead.
Copy the embed code from Webchat Deploy Settings and add it to the head section of your website's HTML.
