Web Widget

Agrega un widget de chat a tu sitio web para que los visitantes puedan hacer preguntas y obtener respuestas instantaneas de tu base de conocimiento.

Widget de chat BestChatBot abierto en un sitio web real mostrando una conversacion

Que Incluye

Una linea de codigo: pega un script tag y listo
Base de conocimiento dedicada para tu sitio web
Streaming en tiempo real: las respuestas aparecen palabra por palabra
Colores personalizables para coincidir con tu marca
Adaptado a moviles: pantalla completa en dispositivos pequenos
Sin impacto en tu sitio: se ejecuta en un Shadow DOM aislado
Seguimiento de respuestas: todas las conversaciones del widget aparecen en tu dashboard

Requisitos Previos

Antes de agregar el widget a tu sitio web, asegurate de tener:

Una cuenta de BestChatBot con un workspace activo

Contenido en tu base de conocimiento (documentos o URLs)

Acceso para editar el HTML del sitio web donde quieres el widget

Cada workspace ejecuta un widget. Para gestionar varios sitios o marcas, crea un workspace por widget.

Cada workspace viene con un web widget, creado automaticamente al configurar el workspace. No lo construyes desde cero: lo configuras. Haz clic en el icono de globo en la barra lateral para abrir la configuracion de tu widget, organizada en pestanas: Appearance, Quick links, Integrations, Slack, Installation & Security y Preferences. Abre la pestana Appearance para dar estilo a tu widget:

Brand color: el color de tu marca en hexadecimal (ej: #F97316), usado para el boton, el boton de enviar y los acentos
Teaser color: un acento opcional aparte para el teaser proactivo — si esta apagado usa tu color de marca
Brand logo: una imagen opcional que se muestra en el boton flotante y junto a cada respuesta del bot (PNG, JPEG o WebP, hasta 512 KB)
Greeting y Proactive message: el texto de bienvenida y el aviso proactivo que se muestran a los visitantes

Haz clic en Save Changes para aplicar.

Para ejecutar un widget en mas de un sitio o marca, crea un workspace separado: cada workspace tiene su propia base de conocimiento aislada y su propio widget.

Obtener Tu Codigo de Integracion

Abre la pestana Installation & Security en la configuracion de tu widget para encontrar un fragmento listo para pegar:

Dialogo Embed Code mostrando el script tag con instrucciones

El codigo se ve asi:

<script
  src="https://widget.bestchatbot.io/widget/v1/chat.js"
  data-api-key="rk_live_xxxxxxxxxxxxxxxxxxxx"
  defer>
</script>

Instala en Tu Sitio Web

Pega el codigo en el HTML de tu sitio web, justo antes de la etiqueta de cierre </body>:

<!DOCTYPE html>
<html>
  <head>
    <title>Mi Sitio Web</title>
  </head>
  <body>
    <!-- Tu contenido -->

    <!-- BestChatBot Widget -->
    <script
      src="https://widget.bestchatbot.io/widget/v1/chat.js"
      data-api-key="rk_live_xxxxxxxxxxxxxxxxxxxx"
      defer>
    </script>
  </body>
</html>

Eso es todo. El widget aparecera como un boton de chat flotante en la esquina inferior derecha de tu sitio.

Nunca compartas ni modifiques el valor de data-api-key. Es el identificador unico de tu widget.

Instrucciones por Plataforma

WordPress

Ve a Apariencia → Editor de archivos del tema (o usa un plugin como “Insert Headers and Footers”)
Abre footer.php
Pega el codigo justo antes de </body>
Guarda los cambios

Alternativamente, usa un plugin como WPCode para insertar el codigo en todo el sitio sin editar archivos del tema.

Shopify

Ve a Tienda Online → Temas → Editar codigo
Abre theme.liquid
Pega el codigo justo antes de </body>
Guarda

Wix

Ve a Configuracion → Codigo personalizado
Haz clic en Agregar codigo personalizado
Pega el codigo
Selecciona ubicacion Body - Final
Aplica a Todas las paginas

Squarespace

Ve a Configuracion → Avanzado → Inyeccion de codigo
Pega el codigo en el campo Footer
Guarda

Next.js / React

Agrega el script tag a tu layout raiz o usa el componente next/script:

import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://widget.bestchatbot.io/widget/v1/chat.js"
          data-api-key="rk_live_xxxxxxxxxxxxxxxxxxxx"
          strategy="lazyOnload"
        />
      </body>
    </html>
  )
}

HTML Estatico / Otros

Pega el codigo antes de </body> en tu archivo HTML. Funciona con cualquier sitio web que soporte HTML personalizado.

Como Funciona

Una vez instalado, el widget funciona asi:

La pagina carga → el script se carga desde los servidores de BestChatBot
El widget aparece → un boton de chat se muestra en la esquina inferior derecha
El visitante hace clic → la ventana de chat se abre
El visitante hace una pregunta → el widget la envia a tu base de conocimiento
La respuesta llega en streaming → la respuesta aparece palabra por palabra en tiempo real
Se muestran las fuentes → las fuentes relevantes de tu base de conocimiento se listan (expandibles)

En los planes Pro y Business, el widget tambien puede ejecutar acciones reales como agendar reuniones, abrir tickets de soporte o consultar pedidos, mediante las Acciones agenticas.

Memoria de Conversacion

El widget recuerda la conversacion dentro de la misma sesion del navegador. Si un visitante navega a otra pagina, su historial de chat se preserva. Hacer clic en el boton + en el header inicia una conversacion nueva.

El historial de conversacion se almacena en el navegador del visitante (localStorage). Nunca se comparte entre visitantes ni se envia a terceros.

Haz clic en el icono de globo en la barra lateral para abrir la configuracion de tu widget. Tiene seis pestanas:

Appearance

Da estilo al widget: brand color, un teaser color opcional para el teaser proactivo, un brand logo, y el greeting y proactive message que se muestran a los visitantes (vistos arriba).

Quick links

Anade help links a la pantalla de inicio de tu widget. Cada pagina enlazada se scrapea para que el bot pueda responder con su contenido. Consulta Help Links.

Integrations

Conecta las herramientas sobre las que el bot puede actuar (calendario, mesa de ayuda, tienda, CRM, facturacion) para que pueda agendar reuniones, abrir tickets, captar leads y consultar pedidos. Consulta Acciones agenticas e Integraciones disponibles.

Slack

Envia los traspasos de chat en vivo a un canal de Slack: tu equipo responde en Slack mientras los visitantes siguen chateando en el widget. Consulta Conectar Slack.

Installation & Security

Todo para instalar y asegurar el widget en un solo lugar: el codigo embed y tu workspace API key (vistos arriba), las signing keys para la verificacion de identidad del visitante (consulta Identidad del visitante), y Allowed Origins — los dominios donde el widget puede funcionar, uno por linea, con wildcards como *.example.com (dejalo vacio para permitir todos). Regenerate API Key: Si sospechas que tu API key ha sido comprometida, haz clic en Regenerate Key. Esto invalida inmediatamente la key actual, genera una nueva y requiere que actualices el codigo en tu sitio web.

La key anterior deja de funcionar inmediatamente. Actualiza tu sitio web enseguida para evitar tiempo de inactividad.

Badge “Powered by BestChatBot”

El badge del footer se muestra por defecto en los planes Free y Starter. Actualiza a Pro o Business para ocultarlo.

Plan	Badge
Free	Visible
Starter	Visible
Pro	Oculto
Business	Oculto

Cada conversacion de tu web widget aparece en la pagina Conversaciones de tu dashboard, agrupada por sesion de visitante.

Pagina de Conversaciones listando conversaciones del widget con estado y numero de respuestas

Haz clic en cualquier conversacion para ver el intercambio completo: los mensajes del visitante, las respuestas del bot y cualquier accion agentica que ejecuto.

Vista detallada de una conversacion del widget mostrando el intercambio completo y los pasos agenticos

Cada conversacion esta anclada a una sesion de visitante, asi ves el intercambio completo, no solo preguntas aisladas. Aprende mas en la pagina de Conversaciones.

Experiencia Movil

En pantallas menores a 640px, la ventana de chat se expande automaticamente a pantalla completa para una mejor experiencia movil. El boton de chat ajusta su posicion para adaptarse a pantallas mas pequenas.

Avanzado: API Programatica

Para desarrolladores que quieran mas control, el widget expone una API de JavaScript en window.BestChatBot despues de cargar.

Metodos Disponibles

Metodo	Descripcion
`BestChatBot.open()`	Abrir la ventana de chat
`BestChatBot.close()`	Cerrar la ventana de chat
`BestChatBot.toggle()`	Alternar abrir/cerrar
`BestChatBot.destroy()`	Remover el widget de la pagina completamente
`BestChatBot.sendMessage(texto)`	Enviar un mensaje programaticamente (abre la ventana)
`BestChatBot.onReady(callback)`	Ejecutar una funcion cuando el widget este listo
`BestChatBot.onMessage(callback)`	Ejecutar una funcion cuando llegue un nuevo mensaje

Ejemplos

Abrir el widget al hacer clic en un boton:

<button onclick="BestChatBot.open()">
  Chatea con nosotros
</button>

Enviar una pregunta pre-llenada:

<button onclick="BestChatBot.sendMessage('Como restablezco mi contrasena?')">
  Ayuda con contrasena
</button>

Esperar a que el widget este listo:

BestChatBot.onReady(() => {
  console.log('Widget listo!')
})

La API solo esta disponible despues de que el script del widget haya cargado. Si necesitas usarla inmediatamente, usa onReady() para esperar la inicializacion.

Compatibilidad

El widget funciona en todos los navegadores modernos:

Navegador	Soportado
Chrome 80+	✅
Firefox 80+	✅
Safari 14+	✅
Edge 80+	✅
Chrome Movil	✅
Safari Movil	✅
Internet Explorer	❌

El widget usa Shadow DOM para aislamiento de estilos, lo que significa que no entrara en conflicto con el CSS de tu sitio web, y tu CSS no afectara al widget.

Solucion de Problemas

El widget no aparece

El widget aparece pero no responde

Conflictos de estilos

El widget se ejecuta dentro de un Shadow DOM cerrado, por lo que los conflictos son extremadamente raros. Si ves problemas:

Verifica que no tengas una regla global * { all: unset }
Asegurate de que ningun script este eliminando el elemento #bestchatbot-widget-host

El widget aparece en paginas incorrectas

El script tag se carga en cada pagina donde esta incluido. Para limitarlo:

Agrega el codigo solo a plantillas de paginas especificas
O usa carga condicional con JavaScript:

if (window.location.pathname === '/soporte') {
  const script = document.createElement('script')
  script.src = 'https://widget.bestchatbot.io/widget/v1/chat.js'
  script.setAttribute('data-api-key', 'rk_live_xxxx')
  script.defer = true
  document.body.appendChild(script)
}

Siguientes Pasos

Subir Documentos

Agrega contenido para que el widget pueda responder.

Agregar URLs

Extrae contenido de tu sitio web a la base de conocimiento.

Planes de Precios

Consulta las funciones de cada plan incluyendo limites del widget.

Personalizar respuestas

Define el tono y la longitud de respuesta del bot.

​Web Widget

​Que Incluye

​Requisitos Previos

​Configura Tu Widget

​Obtener Tu Codigo de Integracion

​Instala en Tu Sitio Web

​Instrucciones por Plataforma

​Como Funciona

​Memoria de Conversacion

​Configuracion del Widget

​Appearance

​Quick links

​Integrations

​Slack

​Installation & Security

​Badge “Powered by BestChatBot”

​Monitorear Conversaciones del Widget

​Experiencia Movil

​Avanzado: API Programatica

​Metodos Disponibles

​Ejemplos

​Compatibilidad

​Solucion de Problemas

​Siguientes Pasos

Subir Documentos

Agregar URLs

Planes de Precios

Personalizar respuestas

Que Incluye

Requisitos Previos

Configura Tu Widget

Obtener Tu Codigo de Integracion

Instala en Tu Sitio Web

Instrucciones por Plataforma

Como Funciona

Memoria de Conversacion

Configuracion del Widget

Appearance

Quick links

Integrations

Slack

Installation & Security

Badge “Powered by BestChatBot”

Monitorear Conversaciones del Widget

Experiencia Movil

Avanzado: API Programatica

Metodos Disponibles

Ejemplos

Compatibilidad

Solucion de Problemas

Siguientes Pasos