.transparent-accordion .bg-background-light {
  background-color: transparent !important;
}

/* Info callout background and border */
.callout[data-callout-type='info'] {
  background-color: light-dark(rgba(253, 244, 255, 0.5), rgba(217, 70, 239, 0.1));
  border-color: light-dark(rgba(217, 70, 239, 0.2), rgba(168, 85, 247, 0.3));
}

/* Info callout icon */
.callout[data-callout-type='info'] [data-component-part='callout-icon'] svg {
  color: light-dark(rgba(192, 38, 211), rgba(232, 121, 249, 0.8));
}

/* Info callout text */
.callout[data-callout-type='info'] [data-component-part='callout-content'] {
  color: light-dark(rgba(112, 26, 117), rgba(245, 208, 254));
}

.bpFab {
  box-shadow: none !important;
}

@media (min-width: 768px) { .bpWebchat {
    box-shadow: none !important;
    min-width: 450px;
    width: 29.7vw !important;
    max-height: 83.2vh !important;
  }
}

// Inject the Botpress Webchat script
const webchatScript = document.createElement('script')
webchatScript.src = 'https://cdn.botpress.cloud/webchat/v3.0/inject.js'
webchatScript.async = true
webchatScript.defer = true

function loadWebchat() {
  window.botpress.init({
      botId: 'e3098b37-2e06-4351-859c-d79e06f39ca8',
      configuration: {
        version: 'v1',
        composerPlaceholder: 'Ask a question...',
        botName: 'Assistant',
        botAvatar: 'https://files.bpcontent.cloud/2025/06/16/20/20250616204038-BRUW6C2R.svg',
        botDescription: 'Ask AI a question about the documentation.',
        website: {},
        email: {
          title: '',
          link: '',
        },
        phone: {},
        termsOfService: {
          title: 'Terms of service',
          link: 'google.com',
        },
        privacyPolicy: {},
        color: '#0588F0',
        variant: 'soft',
        headerVariant: 'glass',
        themeMode: 'light',
        fontFamily: 'inter',
        radius: 3,
        feedbackEnabled: true,
        footer: '[⚡️ by Botpress](https://botpress.com/?from=webchat)',
        additionalStylesheetUrl: 'https://files.bpcontent.cloud/2025/06/13/14/20250613145950-XC43YPI7.css',
        allowFileUpload: true,
      },
      clientId: '44246de9-1d1b-462c-8ef3-1ce39e65d89a',
  })
};

webchatScript.onload = () => {
  if (window.botpress && typeof window.botpress.init === 'function') {
    loadWebchat()
  } else {
    console.error('Botpress init not available')
  }
}

document.body.appendChild(webchatScript)

Manage and configure your webchat deployment settings.

Webchat

Botpress

Documentation

Understand the Botpress documentation and start building.

Welcome to Botpress

Build, test, and deploy your first AI agent.

Quickstart

Introduction

Development environment for building AI agents and chatbots.

Introduction to Studio

Main menu with global configuration for your bot.

Home

Workflows

Tables

Reusable custom code components to execute specific tasks.

Actions

Repository for managing global Intents and Entities, enabling the extraction and classification of messages.

Library

Customizable points that allow you to execute custom code in response to specific events.

Hooks

Download and install integrations with external services or premade workflows from across the web.

Allow your bot to connect to external services, APIs, and tools.

Integrations

Blueprint that defines the structure, format, and validation rules for data.

Schemas

View, compare, and revert to previous versions of your bot.

Versions

An overview of general settings that apply to your bot.

Chatbot Settings

Quickly search through your bot's content, workflows, and configurations.

Find

Debugger, Logs & JSON

Emulator

Import & Export

Duplicate the configuration of a bot into another bot.

Copy to bot

Introduction to integrations

Marketplace to find and install integrations.

Botpress Hub

Extend or enhance your bot's performance with these prebuilt integrations.

Functional Integrations

Automatically improve your bot's ability to respond to knowledge queries.

Knowledge Base Optimization

This functional integration automatically stores all of your bot's conversations and provides AI-generated analysis.

Conversation Analyzer

Provide feedback on specific LLMz iterations to improve future conversations.

Improvement

Asana

Allow a live agent to participate directly in the bot's conversation.

Human-in-the-loop (HITL)

Instagram

Intercom

Line

Messenger

Microsoft Teams

Notion

Slack

Telegram

Trello

Twilio

Viber

Vonage

Webhook

Zapier

Integrate your bot with Zendesk using the official integration.

Zendesk

Chat

Google Sheet

Google Calendar

Introduction to Webchat

Use the Webchat embed code to add a bot to your website.

Quick Start

Embed Webchat

Style your Webchat

Manually open or close Webchat on your website.

Open/close your Webchat

Provide your bot with data about the current user.

Send user data to your bot

Listen for when Webchat opens, closes, raises an error, and more.

Listen to events

Trigger actions on start

Trigger actions when conversation starts

Add a bot to your WordPress website using Webchat.

WordPress

Add a bot to your Wix website using Webchat.

Add a bot to your Webflow website using Webchat.

Webflow

Use the React library to build a basic Webchat component.

Get Started

Guides

Reference

Webchat