Embedded Webchat

The Embedded Webchat allows you to integrate chatbot functionality directly into your web application. It supports message handling, event subscriptions, and customization, enabling a dynamic user experience within the browser.

Quickstart

1. Obtain the embedded code

  1. Open your bot in the Botpress Workspace.
  2. Go to the Webchat tab in your bot's dashboard.
  3. Click Advanced Settings to expand the section.
  4. Copy the provided Embed Code.
The image shows the "Webchat" tab of the Botpress interface, highlighting the "General" and "Share" sections. It includes a shareable link for testing the bot and an embed code for adding the webchat to a webpage. The left-hand menu lists "General," "Share," "Advanced Settings," and "Styles."

2. Add the code

Paste the copied code to your HTML.

<!DOCTYPE html>
<html>
<head>
  <title>My Webchat</title>
</head>
<body>
  //...
  <script src="https://cdn.botpress.cloud/webchat/v2/inject.js"></script>
  <script src="https://mediafiles.botpress.cloud/52345432-5432543-5435-435545434/webchat/v2/config.js"></script>
</body>
</html>


Styling

  1. Open your bot in the Botpress Workspace.
  2. Go to the Webchat Tab in your bot's dashboard.
  3. Click Styles to expand the section.
  4. Add your custom CSS. You can style the components using our pre-defined CSS classes
The image shows the "Styles" section of the Botpress web interface. Users can add custom CSS to style the webchat, with examples displayed for changing the title color to red and adding a green border to buttons. The left-hand menu includes "General," "Share," "Advanced Settings," and "Styles."

Webchat controls

When you embed Botpress Webchat into your website, a botpress object becomes available on the global window object. This object provides various methods and properties that allow you to interact with the webchat, customize its behavior, and manage the user experience.

Properties

PropertyDescription
initializedIndicates whether the webchat has been initialized.
versionThe version of the Botpress Webchat.
messagingUrlThe URL used for messaging interactions with the bot.
clientIdThe unique client identifier for the webchat instance.
fabIframeThe iframe element used for the floating action button (FAB).
fabIdThe ID of the FAB element.
stateThe current state of the webchat (e.g., "opened", "closed").
webchatIframeThe iframe element used for the webchat interface.
webchatIdThe ID of the webchat element.
styleThe URL of the stylesheet used by the webchat.
configurationThe configuration settings for the bot, such as bot name and description.
userInformation about the current user interacting with the webchat.

Methods

MethodDescription
openOpens the webchat interface.
closeCloses the webchat interface.
toggleToggles the webchat interface between opened and closed states.
initInitializes the webchat with the specified properties.
configUpdates the webchat configuration.
sendEventSends a custom event to the bot.
sendMessageSends a message to the bot.
getUserRetrieves the current user's information.
updateUserUpdates the current user's information.
onListens for specific events emitted by the webchat (e.g., message received). Full list of events can be found in the demo below.

Listen to events

The on method on the botpress object is used to register event listeners for various webchat events, allowing you to execute custom JavaScript code in response to those events. It takes two arguments: the event name (as a string) and a callback function that gets executed when the specified event occurs.


Live Demo


Markdown support

We use the react-markdown to display markdown in the front-end. You can find their documentation here.

Saving User Information

With the Embedded Webchat, you can send information to Botpress and use it in your Studio. Look here for more information.