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

# ChatWidget

> Boton flotante que abre un chat embebido en cualquier pagina.

El `<ChatWidget />` renderiza un boton flotante en la esquina de la pantalla. Al hacer click, abre un panel de chat completo. Ideal para agregar un asistente de IA a cualquier sitio web sin modificar el layout existente.

## Uso Basico

```tsx theme={null}
import { Plazbot } from 'plazbot'
import { PlazbotProvider, ChatWidget } from 'plazbot/react'

const sdk = new Plazbot({
  workspaceId: 'YOUR_WORKSPACE_ID',
  apiKey: 'YOUR_API_KEY',
  zone: 'LA',
})

function App() {
  return (
    <PlazbotProvider sdk={sdk} agentId="YOUR_AGENT_ID">
      <ChatWidget
        position="bottom-right"
        width={400}
        height={600}
        icon="robot"
        buttonColor="#2D84C7"
        showPoweredBy
      />
    </PlazbotProvider>
  )
}
```

## Props

| Prop                  | Tipo                               | Default          | Descripcion                                   |
| --------------------- | ---------------------------------- | ---------------- | --------------------------------------------- |
| `position`            | `'bottom-right' \| 'bottom-left'`  | `'bottom-right'` | Posicion del boton en pantalla.               |
| `offset`              | `number`                           | `24`             | Distancia desde el borde en pixeles.          |
| `width`               | `number`                           | `400`            | Ancho del panel de chat (px).                 |
| `height`              | `number`                           | `600`            | Alto del panel de chat (px).                  |
| `defaultOpen`         | `boolean`                          | `false`          | Si el chat se abre automaticamente al cargar. |
| `icon`                | `WidgetIcon`                       | `'robot'`        | Icono del boton flotante.                     |
| `buttonColor`         | `string`                           | `'#2D84C7'`      | Color de fondo del boton.                     |
| `placeholder`         | `string`                           | —                | Texto placeholder del input.                  |
| `allowAttachments`    | `boolean`                          | `false`          | Habilita adjuntar archivos.                   |
| `suggestedQuestions`  | `string[]`                         | `[]`             | Preguntas sugeridas en el estado vacio.       |
| `showPoweredBy`       | `boolean \| PoweredByProps`        | `false`          | Footer de atribucion.                         |
| `customCardRenderers` | `Record<string, ComponentType>`    | `{}`             | Renderers custom para acciones.               |
| `onMessage`           | `(msg: ChatMessage) => void`       | —                | Callback en cada mensaje.                     |
| `onActionExecuted`    | `(action: ActionExecuted) => void` | —                | Callback en cada accion ejecutada.            |

## Iconos del Widget

El prop `icon` acepta los siguientes valores:

| Valor       | Descripcion            |
| ----------- | ---------------------- |
| `robot`     | Robot (default)        |
| `message`   | Burbuja de mensaje     |
| `support`   | Auriculares de soporte |
| `qa`        | Pregunta y respuesta   |
| `chat`      | Chat                   |
| `smile`     | Cara sonriente         |
| `voice`     | Microfono              |
| `uservoice` | Usuario con audio      |

## Abierto por Default

Para que el chat se abra automaticamente cuando carga la pagina:

```tsx theme={null}
<ChatWidget defaultOpen />
```

## Posicion y Tamano

```tsx theme={null}
// Esquina inferior izquierda, mas grande
<ChatWidget
  position="bottom-left"
  offset={32}
  width={450}
  height={700}
/>
```

## Combinacion con Chat

Puedes usar `<ChatWidget />` y `<Chat />` en la misma aplicacion, incluso con diferentes agentes:

```tsx theme={null}
{/* Chat embebido en la pagina */}
<PlazbotProvider sdk={sdk} agentId="ag_soporte">
  <Chat style={{ height: 500 }} />
</PlazbotProvider>

{/* Widget flotante con otro agente */}
<PlazbotProvider sdk={sdk} agentId="ag_ventas">
  <ChatWidget />
</PlazbotProvider>
```