Docs

Botpress Cloud: Messaging Channels

Web Chat

Messaging channels

Adding Web Chat to your Website

To set up and customize your web chat in Botpress Cloud, follow these steps:

  1. Publish your chatbot to Botpress Cloud. Ensure that your chatbot is published and available in the Botpress Cloud dashboard.
  2. Enable the Web Chat channel. In the Botpress Cloud dashboard, navigate to your published chatbot and go to the Channels tab. Click on Web Chat and enable it for your chatbot.
  3. Copy and paste the Pre-configured script. Copy the Pre-configured script provided in the Web Chat Options and Paste this script within the <body></body> tags of your HTML page. This step allows you to embed the web chat directly into your website.
  4. Share your chatbot using the Sharable Link.(optional) You can share your chatbot with others who want to test it quickly by sharing the Sharable Link provided in the Pre-configured section.

For further customization, you can access the Webchat Settings section in the Botpress Cloud dashboard. Here are the four options available:

Settings

For further customization, you can access the Webchat Settings section in the Webchat Channel page. Here are the four options available:

1. General

These will be displayed on the webchat page.

  • Bot name: Specify the name of your chatbot that will be displayed in the web chat interface.
  • Avatar URL: Set a custom URL for the chatbot's avatar image.
  • Bot description: Provide a brief description or introduction of your chatbot.
  • Composer placeholder: Customize the placeholder text displayed in the message input field.
  • Stylesheet URL: Add a path to a custom CSS file to apply your own styling to the web chat interface.

2. Bot Information

These will be displayed when the user clicks on the bot information page.

  • Website: Display the bot's website URL, allowing users to visit the website for more information or additional resources.
  • Phone: Show the bot's contact phone number, enabling users to reach out for support or inquiries.
  • Email: Display the bot's email address, providing users with a contact option for communication purposes.
  • Terms & Conditions: Define the terms and conditions that will be displayed when the user clicks on the bot information page.
  • Privacy Policy: Specify the privacy policy information to be shown in the bot information page.

3. Features

These will add options to the header of the webchat page.

  • Show Bot Information: Enable this option to display a bot information button in the web chat header, allowing users to access detailed information about the bot.
  • Show delete conversation: If enabled, users can delete their conversation history within the web chat.
  • Clear conversation on exit: Choose whether to clear the conversation history automatically when the user exits the web chat.

4. Others

  • Show "Created with Botpress": Toggle the display of the "Created with Botpress" branding on the web chat interface. This option is useful for white-labeling and branding purposes, allowing you to customize the appearance without any Botpress branding.

By adjusting these settings, you can create a personalized and branded web chat experience for your users, tailoring it to your specific requirements and enhancing the overall user experience.

Pre-configured

To quickly integrate and use the webchat, you have two options:

  1. Shareable URL: This link can be shared with anyone who wants to test your chatbot instantly. Simply copy and distribute the Shareable URL.

  2. Embedded: This method allows you to embed the webchat directly into your website. Add the following script tags to your HTML page:

Note

The Stylesheet URL from the Settings only applies to the pre-configured script and not to the Shareable URL.

Configurable

The configurable version of the webchat requires manual updates whenever changes are made. It is recommended to use the pre-configured version mentioned above for a more streamlined experience.

With the pre-configured webchat, updates are automatically applied, ensuring that your chatbot is always up to date without the need for manual intervention.

When to use the Configurable Script?

The configurable webchat is useful when you require more granular control over the webchat configuration and want to customize it according to specific needs.

It allows you to manually update and modify the webchat code to tailor the behavior and appearance to your preferences.

Consider using the configurable version if you have advanced customization requirements or specific features that are not available in the pre-configured version.

However, keep in mind that with the configurable option, you will need to handle updates and maintenance manually.

Styling your Chabot

For detailed instructions on styling and configuring the web chat, please refer to Customizing your chatbot.

This documentation provides comprehensive guidance on customizing the behavior and appearance of the web chat for your chatbot.

Previous
Vonage
Next
Viber