# Widget del Agente IA

> Definición de como funciona el widget del Agente de IA

Source: https://docs.plazbot.com/kb/agentes-widget

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

![](https://storage-tickos-files.s3.us-east-1.amazonaws.com/tickos-files-compose/kba_f196d23c8b9d253ae166b0d8841ae2bd/1788104175944-rzbui0dyedp.png)

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

![](https://storage-tickos-files.s3.us-east-1.amazonaws.com/tickos-files-compose/kba_f196d23c8b9d253ae166b0d8841ae2bd/1788104224995-ab2nxv9e8eu.png)

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

![](https://storage-tickos-files.s3.us-east-1.amazonaws.com/tickos-files-compose/kba_f196d23c8b9d253ae166b0d8841ae2bd/1788104312685-a7tmdwrmxkq.png)

Tip: ✅ 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.

![](https://storage-tickos-files.s3.us-east-1.amazonaws.com/tickos-files-compose/kba_f196d23c8b9d253ae166b0d8841ae2bd/1788104336167-1bevmi7smn3.png)

### URL del widget

Para cambiar la URL del widget tienes que ir al tab de Widget y cambiar la URL del widget.

```script
<script id="id-widget-agent-plz" type="module" defer src="https://storagelaplazbot.z13.web.core.windows.net/widget.js?Id={{idAgent}}&zone={{zone}}&workspaceId={{workspaceId}}"></script>
```

### 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
<button onclick="PlzWidget.open()">Hablar con el asistente</button>
```

**Ejemplo: Abrir el widget desde un evento JavaScript**

```javascript
document.getElementById('mi-boton').addEventListener('click', function() {
  PlzWidget.open();
});
```

**Ejemplo: Abrir el widget automaticamente despues de 5 segundos**

```javascript
setTimeout(function() {
  PlzWidget.open();
}, 5000);
```

### 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
{
  "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" }
  ]
}
```