ChatWidget - Plazbot Docs

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

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.

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:

<ChatWidget defaultOpen />

Posicion y Tamano

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

{/* 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>