Botpress se integra con tu sitio web a través de Webchat, un frontend personalizado para tu bot creado por Botpress. Añade tu bot a un sitio web o aplicación con un código de inserción o una biblioteca React totalmente personalizable.
Copia el código de inserción de tu bot desde el Panel y agrégalo a la sección head del HTML de tu sitio web.
Utiliza la biblioteca React de Webchat para construir un componente de Webchat directamente en tu aplicación.
Configura el color principal, la fuente, el modo de tema, el estilo del encabezado, el formato de los mensajes y el radio de las esquinas, o modifica las clases CSS integradas.
Muestra Webchat dentro de un elemento HTML específico, lo que oculta la burbuja de chat y te da más control sobre su apariencia y ubicación.
Necesitas un bot publicado y conocimientos básicos de HTML para añadir Webchat a un sitio web autohospedado.
Abre el Espacio de trabajo de tu bot, selecciona el bot, ve a Webchat, luego a Configuración de despliegue y copia el código de inserción.
Pega el código de inserción en la sección head del HTML de tu sitio web, luego abre tu sitio web y comienza a chatear con tu bot.
Ajusta la identidad, apariencia, configuración de despliegue y funciones en la sección Webchat del Panel, luego selecciona Publicar configuración.
Configura el avatar de tu bot, el nombre visible, la descripción, el texto del compositor y un avatar personalizado para el botón flotante de acción.
Agrega opcionalmente un correo electrónico, número de teléfono, sitio web, términos de servicio y política de privacidad.
Configura un mensaje proactivo, un tipo de activador y un tiempo de retardo, y visualiza la burbuja en el Panel.
Activa la retroalimentación de mensajes y consulta los datos de retroalimentación en el menú de Analítica.
Permite a los usuarios subir archivos y activa las notificaciones de sonido para nuevos mensajes con Webchat v3.3 o superior.
Permite a los usuarios ver y continuar conversaciones anteriores con Webchat v3.6 o superior, y elige entre almacenamiento de sesión o local para el historial de chat.
Activa Webchat con la burbuja de chat predeterminada, una imagen de burbuja personalizada o tu propio elemento HTML.
Mueve el botón y la ventana de chat al lado izquierdo de la pantalla sobrescribiendo el CSS predeterminado.
Utiliza el ID de cliente de Webchat de tu bot para identificar su instancia de Webchat al desarrollar con la biblioteca React.
Sí. Webchat es un frontend personalizado para tu bot, creado por Botpress, que añade tu bot a tu sitio web con un código de inserción o una biblioteca React.
Sí. La documentación de Webchat incluye guías para añadir tu bot a sitios web de WordPress, Wix y Webflow.
Necesitas un bot publicado y conocimientos básicos de HTML. Conocer CSS ayuda si quieres usar estilos personalizados.
Sí. La configuración de Orígenes Permitidos, disponible en el plan Team de Botpress o superior, te permite autorizar los dominios que pueden acceder a Webchat.
No. Los estilos configurados en el Panel no se aplican a la biblioteca React de Webchat, donde debes usar la propiedad de configuración.
Copia el código de inserción desde la Configuración de despliegue de Webchat y agrégalo a la sección head del HTML de tu sitio web.
