Saltar al contenido principal

​
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 esta vinculado a una plataforma. Si ya tienes un workspace de Discord, crea un workspace separado para tu widget web.

​
Crea Tu Widget

Elige Plataforma

Desde tu workspace, veras el dialogo Elegir Plataforma. Selecciona Web Widget para integrar chat en tu sitio web.
Dialogo Elegir Plataforma mostrando opciones de Discord y Web Widget

Configura Tu Widget

Completa el formulario de configuracion:
  • Name — un nombre para tu widget (ej: “My Website Widget”)
  • Allowed Origins — los dominios donde el widget puede funcionar, uno por linea. Soporta wildcards (*.example.com). Deja vacio para permitir todos.
  • Primary Color — el color de tu marca en hexadecimal (ej: #F97316)
Haz clic en Create Widget cuando estes listo.
Formulario Configure Web Widget con campos de Name, Allowed Origins y Primary Color

Ve Tu Widget

Despues de la creacion, tu widget aparece en la pagina Web Widgets. Cada tarjeta de widget muestra:
  • Nombre y estado (Activo/Inactivo)
  • Toggle de activacion para habilitar o deshabilitar el widget
  • Indicador de color mostrando el color de tu marca
  • Acciones rapidas: codigo embed <> y configuracion ⚙
Widget Manager mostrando una tarjeta de widget con estado, color y botones de accion
Haz clic en el icono de globo en la barra lateral para ir directamente a la pagina de Web Widgets.

​
Obtener Tu Codigo de Integracion

Haz clic en el boton de codigo embed (<>) en la tarjeta de tu widget, o ve a Configuracion del Widget → pestana Installation. Veras un fragmento listo para pegar:
Dialogo Embed Code mostrando el script tag con instrucciones
El codigo se ve asi: 
<script
  src="https://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://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

  1. Ve a Apariencia → Editor de archivos del tema (o usa un plugin como “Insert Headers and Footers”)
  2. Abre footer.php
  3. Pega el codigo justo antes de </body>
  4. Guarda los cambios
Alternativamente, usa un plugin como WPCode para insertar el codigo en todo el sitio sin editar archivos del tema.
  1. Ve a Tienda Online → Temas → Editar codigo
  2. Abre theme.liquid
  3. Pega el codigo justo antes de </body>
  4. Guarda
  1. Ve a Configuracion → Codigo personalizado
  2. Haz clic en Agregar codigo personalizado
  3. Pega el codigo
  4. Selecciona ubicacion Body - Final
  5. Aplica a Todas las paginas
  1. Ve a Configuracion → Avanzado → Inyeccion de codigo
  2. Pega el codigo en el campo Footer
  3. Guarda
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://bestchatbot.io/widget/v1/chat.js"
          data-api-key="rk_live_xxxxxxxxxxxxxxxxxxxx"
          strategy="lazyOnload"
        />
      </body>
    </html>
  )
}
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:
  1. La pagina carga → el script se carga desde los servidores de BestChatBot
  2. El widget aparece → un boton de chat se muestra en la esquina inferior derecha
  3. El visitante hace clic → la ventana de chat se abre
  4. El visitante hace una pregunta → el widget la envia a tu base de conocimiento
  5. La respuesta llega en streaming → la respuesta aparece palabra por palabra en tiempo real
  6. Se muestran las fuentes → las fuentes relevantes de tu base de conocimiento se listan (expandibles)

​
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.

​
Configuracion del Widget

Haz clic en el boton de configuracion (⚙) en la tarjeta de tu widget para abrir el panel de configuracion. Tiene tres pestanas:

​
Pestana Configuration

Cambia el color de tu marca y los dominios permitidos despues de la creacion. Primary Color — Elige el color de tu marca usando el selector de color o ingresa un valor hexadecimal (ej: #F97316). El widget ajusta automaticamente:
  • Acento del boton de chat
  • Borde de mensajes del usuario
  • Color del boton de enviar
  • Contraste del texto (blanco o negro) segun tu color
Allowed Origins — Ingresa los dominios donde el widget puede funcionar, uno por linea. Esto previene el uso no autorizado de tu codigo embed.
FormatoEjemploQue Coincide
URL exactahttps://example.comSolo ese dominio exacto
Wildcardhttps://*.mysite.comCualquier subdominio de mysite.com
Soporta wildcards como *.example.com para cubrir todos los subdominios. No puedes usar * solo.
Haz clic en Save Changes para aplicar.

​
Pestana Installation

Consulta y copia tu codigo de integracion. Es lo mismo que hacer clic en el boton <> de la tarjeta del widget.

​
Pestana Danger Zone

Pestana Danger Zone mostrando la opcion de regenerar API Key
Regenerate API Key — Si sospechas que tu API key ha sido comprometida, haz clic en Regenerate Key. Esto:
  • Invalida inmediatamente la API key actual
  • Genera una nueva
  • 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.
PlanBadge
FreeVisible
StarterVisible
ProOculto
BusinessOculto

​
Monitorear Conversaciones del Widget

Todas las conversaciones de tu web widget aparecen en la pagina Bot Responses de tu dashboard. Usa el filtro Web para ver solo las conversaciones del widget.
Pagina Bot Responses filtrada para mostrar conversaciones del Web widget
Haz clic en cualquier conversacion para ver el intercambio completo, incluyendo la pregunta del usuario y la respuesta completa del bot.
Vista detallada de una conversacion del widget mostrando pregunta y respuesta completa del bot
Las conversaciones del widget muestran un badge Web, lo que las hace faciles de distinguir de las conversaciones de Discord.

​
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

MetodoDescripcion
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:
NavegadorSoportado
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

  • Verifica que el data-api-key sea correcto
  • Comprueba que tu dominio este en la lista de Allowed Origins (Configuracion del Widget → Configuration)
  • Abre las DevTools del navegador (pestana Consola) y busca advertencias [BestChatBot]
  • Asegurate de que el script tag tenga el atributo defer
  • Verifica que el widget este en estado Active en el Widget Manager
  • Verifica que tu base de conocimiento tenga contenido y haya sido reconstruida
  • Busca errores en la Consola del navegador
  • Verifica que tu suscripcion este activa
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 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://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.

Integracion Discord

Ejecuta el bot en Discord junto con el widget.