> ## Documentation Index
> Fetch the complete documentation index at: https://docs.plazbot.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Widget del Agente IA
> Definición de como funciona el widget del Agente de IA
### Introducción
Este documento menciona como se puede agregar acciones al Agente de IA, como por ejemplo:
* Habilitar el widget.
* Cambiar el tema del widget.
* Cambiar el nombre del widget.
* Mostrar el widget inicialmente abierto.
* Controlar el widget desde JavaScript.
### Habilitar el widget
Para habilitar el widget tienes que ir al tab de Widget y activar el switch.
Dentro de la **Habilitación del Widget** se generan la posiblilidad de poder configurar tu Widget a la medida, colocando dos opciones adicionales que son:
* Colocar un Botón de Whatsapp directo.
* Colocando un Formulario de Registro antes de poder conversar con el Agente
### Cambiar el tema del widget
Para cambiar el tema del widget tienes que ir al tab de Widget y activar el switch de Dark Mode.
✅ Recuerda que en el Chat en línea cuando el agente humano Activa o desactiva el Bot, podrá conversar con el contacto directo. Aprovecha las Acciones del agente de IA para alertar a los agentes humanos.
### Cambiar el Icon del widget
Para cambiar el icono del widget tienes que ir al tab de Widget y cambiar el icono del widget.
### URL del widget
Para cambiar la URL del widget tienes que ir al tab de Widget y cambiar la URL del widget.
```script theme={null}
```
### Funciones JavaScript
El widget expone una API publica a traves del objeto global `PlzWidget`, que permite controlar el widget programaticamente desde cualquier evento de tu sitio web.
**Metodos disponibles**
| Metodo | Descripcion |
| -------------------- | --------------------------------------------------------------------------------- |
| `PlzWidget.open()` | Abre el widget. Si ya esta abierto, no hace nada. |
| `PlzWidget.close()` | Cierra el widget. Si ya esta cerrado, no hace nada. |
| `PlzWidget.toggle()` | Alterna el estado del widget: si esta cerrado lo abre, si esta abierto lo cierra. |
**Ejemplo: Abrir el widget desde un boton personalizado**
```html theme={null}
```
**Ejemplo: Abrir el widget desde un evento JavaScript**
```javascript theme={null}
document.getElementById('mi-boton').addEventListener('click', function() {
PlzWidget.open();
});
```
**Ejemplo: Abrir el widget automaticamente despues de 5 segundos**
```javascript theme={null}
setTimeout(function() {
PlzWidget.open();
}, 5000);
```
Los metodos de `PlzWidget` estan disponibles inmediatamente despues de que el script del widget se haya cargado en la pagina. Asegurate de que el script del widget este cargado antes de llamar a estos metodos.
### Cambios en Agent.config.json
Recuerda que todas las modificaciones que se realizan se reflejan en el agent.config.json:
**Configuracion basica**
* **enableWidget**: Booleano que indica si el widget está activo o no.
* **typeWidget**: Tipo de widget: `widget` (chat lateral) o `search` (buscador centrado).
* **nameWidget**: String que indica el nombre del widget.
* **question**: Pregunta principal que aparece en la pantalla de inicio.
* **iconWidget**: String con el ícono del widget (`robot`, `message`, `support`, `qa`, `chat`, `smile`, `voice`, `uservoice`).
* **initialShowWidget**: Booleano que indica si el widget aparece inicialmente abierto.
**Tema visual**
* **colorWidget**: Tema visual (`white` | `dark` | `green` | `blue` | `gray`). `white` y `dark` tiñen todo el widget; `green`, `blue` y `gray` tiñen solo la cabecera. Si es `null` se aplica el fallback legacy `darkWidget`.
* **darkWidget**: Booleano legacy; se usa solo cuando `colorWidget` no está definido.
**Comportamiento**
* **multianswerWidget**: Si está activo, la respuesta del agente IA se divide en varios mensajes consecutivos para una conversación más natural.
* **formWidget**: Muestra un formulario de registro (nombre, apellido, correo, WhatsApp) antes de iniciar el chat.
* **fUseAutomationFlowWidget**: Prioriza los flujos de automatización sobre el agente IA.
* **enablePoweredBy**: Muestra el pie de página "Powered by Plazbot" en el widget. Solo editable para administradores de Plazbot; para marcas blancas queda en `false`.
**Canal WhatsApp**
* **enableWhatsappWidget**: Muestra botón de acceso directo a WhatsApp.
* **urlWhatsappWidget**: URL completa tipo `https://wa.me/1234567890`.
**Preguntas de ejemplo**
* **examples**: Lista de botones de pregunta sugerida. Cada entrada tiene `value` (texto) y `color` (`orange` | `blue` | `green` | `gray` | `white`).
```json theme={null}
{
"enableWidget": true,
"typeWidget": "widget",
"nameWidget": "Plazbot",
"question": "En que puedo ayudarte?",
"colorWidget": "blue",
"darkWidget": false,
"iconWidget": "robot",
"initialShowWidget": true,
"multianswerWidget": true,
"formWidget": false,
"fUseAutomationFlowWidget": false,
"enablePoweredBy": true,
"enableWhatsappWidget": false,
"urlWhatsappWidget": null,
"examples": [
{ "value": "Cuales son sus horarios?", "color": "blue" },
{ "value": "Como puedo contactar a soporte?", "color": "green" }
]
}
```
Dentro de la **Habilitación del Widget** se generan la posiblilidad de poder configurar tu Widget a la medida, colocando dos opciones adicionales que son:
* Colocar un Botón de Whatsapp directo.
* Colocando un Formulario de Registro antes de poder conversar con el Agente
### Cambiar el tema del widget
Para cambiar el tema del widget tienes que ir al tab de Widget y activar el switch de Dark Mode.
### URL del widget
Para cambiar la URL del widget tienes que ir al tab de Widget y cambiar la URL del widget.
```script theme={null}
```
### Funciones JavaScript
El widget expone una API publica a traves del objeto global `PlzWidget`, que permite controlar el widget programaticamente desde cualquier evento de tu sitio web.
**Metodos disponibles**
| Metodo | Descripcion |
| -------------------- | --------------------------------------------------------------------------------- |
| `PlzWidget.open()` | Abre el widget. Si ya esta abierto, no hace nada. |
| `PlzWidget.close()` | Cierra el widget. Si ya esta cerrado, no hace nada. |
| `PlzWidget.toggle()` | Alterna el estado del widget: si esta cerrado lo abre, si esta abierto lo cierra. |
**Ejemplo: Abrir el widget desde un boton personalizado**
```html theme={null}
```
**Ejemplo: Abrir el widget desde un evento JavaScript**
```javascript theme={null}
document.getElementById('mi-boton').addEventListener('click', function() {
PlzWidget.open();
});
```
**Ejemplo: Abrir el widget automaticamente despues de 5 segundos**
```javascript theme={null}
setTimeout(function() {
PlzWidget.open();
}, 5000);
```