> ## Documentation Index
> Fetch the complete documentation index at: https://docs.bestchatbot.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Web Widget

> Integra BestChatBot como un widget de chat en cualquier sitio web con su propia base de conocimiento dedicada.

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

<Frame>
  <img src="https://mintcdn.com/bestchatbot/f1dLrYEbIflhrKGl/images/widget-chat-open.png?fit=max&auto=format&n=f1dLrYEbIflhrKGl&q=85&s=e063b8cd604be75b95392e920985cb34" alt="Widget de chat BestChatBot abierto en un sitio web real mostrando una conversacion" width="515" height="804" data-path="images/widget-chat-open.png" />
</Frame>

## 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:

<Check>Una cuenta de BestChatBot con un workspace activo</Check>
<Check>Contenido en tu base de conocimiento (documentos o URLs)</Check>
<Check>Acceso para editar el HTML del sitio web donde quieres el widget</Check>

<Tip>Cada workspace ejecuta un widget. Para gestionar varios sitios o marcas, crea un workspace por widget.</Tip>

***

## Configura Tu 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

<Frame>
  <img src="https://mintcdn.com/bestchatbot/97kdRjnWT0Lew0EI/images/widget-configuration-tab.png?fit=max&auto=format&n=97kdRjnWT0Lew0EI&q=85&s=782574029dc26262fd5239d116caf427" alt="Pestana Appearance del Web Widget con brand color, teaser color, brand logo, greeting y proactive message" width="1169" height="1224" data-path="images/widget-configuration-tab.png" />
</Frame>

Haz clic en **Save Changes** para aplicar.

<Tip>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.</Tip>

***

## Obtener Tu Codigo de Integracion

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

<Frame>
  <img src="https://mintcdn.com/bestchatbot/97kdRjnWT0Lew0EI/images/widget-embed-code.png?fit=max&auto=format&n=97kdRjnWT0Lew0EI&q=85&s=b128684febdd3a80643d4193072aae6d" alt="Dialogo Embed Code mostrando el script tag con instrucciones" width="1177" height="1214" data-path="images/widget-embed-code.png" />
</Frame>

El codigo se ve asi:

```html theme={null}
<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>`:

```html theme={null}
<!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.

<Warning>Nunca compartas ni modifiques el valor de `data-api-key`. Es el identificador unico de tu widget.</Warning>

### Instrucciones por Plataforma

<AccordionGroup>
  <Accordion title="WordPress">
    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.
  </Accordion>

  <Accordion title="Shopify">
    1. Ve a **Tienda Online → Temas → Editar codigo**
    2. Abre `theme.liquid`
    3. Pega el codigo justo antes de `</body>`
    4. Guarda
  </Accordion>

  <Accordion title="Wix">
    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**
  </Accordion>

  <Accordion title="Squarespace">
    1. Ve a **Configuracion → Avanzado → Inyeccion de codigo**
    2. Pega el codigo en el campo **Footer**
    3. Guarda
  </Accordion>

  <Accordion title="Next.js / React">
    Agrega el script tag a tu layout raiz o usa el componente `next/script`:

    ```tsx theme={null}
    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>
      )
    }
    ```
  </Accordion>

  <Accordion title="HTML Estatico / Otros">
    Pega el codigo antes de `</body>` en tu archivo HTML. Funciona con cualquier sitio web que soporte HTML personalizado.
  </Accordion>
</AccordionGroup>

***

## 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)

<Note>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](/es/integrations/agentic-actions).</Note>

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

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

***

## Configuracion del Widget

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](/es/customization/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](/es/integrations/agentic-actions) e [Integraciones disponibles](/es/integrations/available-integrations).

### 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](/es/live-chat/connect-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](/es/integrations/identity/overview)), 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.

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

***

## 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  |

***

## Monitorear Conversaciones del Widget

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

<Frame>
  <img src="https://mintcdn.com/bestchatbot/97kdRjnWT0Lew0EI/images/conversations-tab-dashboard.png?fit=max&auto=format&n=97kdRjnWT0Lew0EI&q=85&s=5a4867e46a3fbace3320df78387010ef" alt="Pagina de Conversaciones listando conversaciones del widget con estado y numero de respuestas" width="1701" height="878" data-path="images/conversations-tab-dashboard.png" />
</Frame>

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

<Frame>
  <img src="https://mintcdn.com/bestchatbot/97kdRjnWT0Lew0EI/images/visitor-conversation-detailed.png?fit=max&auto=format&n=97kdRjnWT0Lew0EI&q=85&s=b88d4375d3af741531be28766180dd80" alt="Vista detallada de una conversacion del widget mostrando el intercambio completo y los pasos agenticos" width="1882" height="1202" data-path="images/visitor-conversation-detailed.png" />
</Frame>

<Tip>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](/es/using-the-bot/bot-responses).</Tip>

***

## 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:**

```html theme={null}
<button onclick="BestChatBot.open()">
  Chatea con nosotros
</button>
```

**Enviar una pregunta pre-llenada:**

```html theme={null}
<button onclick="BestChatBot.sendMessage('Como restablezco mi contrasena?')">
  Ayuda con contrasena
</button>
```

**Esperar a que el widget este listo:**

```javascript theme={null}
BestChatBot.onReady(() => {
  console.log('Widget listo!')
})
```

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

***

## 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

<AccordionGroup>
  <Accordion title="El widget no aparece">
    * 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 activo en tu dashboard
  </Accordion>

  <Accordion title="El widget aparece pero no responde">
    * 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
  </Accordion>

  <Accordion title="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`
  </Accordion>

  <Accordion title="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:

    ```javascript theme={null}
    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)
    }
    ```
  </Accordion>
</AccordionGroup>

***

## Siguientes Pasos

<CardGroup cols={2}>
  <Card title="Subir Documentos" icon="file-arrow-up" href="/es/knowledge-base/upload-documents">
    Agrega contenido para que el widget pueda responder.
  </Card>

  <Card title="Agregar URLs" icon="globe" href="/es/knowledge-base/add-urls">
    Extrae contenido de tu sitio web a la base de conocimiento.
  </Card>

  <Card title="Planes de Precios" icon="credit-card" href="/es/billing/pricing-plans">
    Consulta las funciones de cada plan incluyendo limites del widget.
  </Card>

  <Card title="Personalizar respuestas" icon="sliders" href="/es/customization/response-preferences">
    Define el tono y la longitud de respuesta del bot.
  </Card>
</CardGroup>