Skip to main content
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

PropTipoDefaultDescripcion
position'bottom-right' | 'bottom-left''bottom-right'Posicion del boton en pantalla.
offsetnumber24Distancia desde el borde en pixeles.
widthnumber400Ancho del panel de chat (px).
heightnumber600Alto del panel de chat (px).
defaultOpenbooleanfalseSi el chat se abre automaticamente al cargar.
iconWidgetIcon'robot'Icono del boton flotante.
buttonColorstring'#2D84C7'Color de fondo del boton.
placeholderstring—Texto placeholder del input.
allowAttachmentsbooleanfalseHabilita adjuntar archivos.
suggestedQuestionsstring[][]Preguntas sugeridas en el estado vacio.
showPoweredByboolean | PoweredByPropsfalseFooter de atribucion.
customCardRenderersRecord<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:
ValorDescripcion
robotRobot (default)
messageBurbuja de mensaje
supportAuriculares de soporte
qaPregunta y respuesta
chatChat
smileCara sonriente
voiceMicrofono
uservoiceUsuario 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>