linkia-ai-widget-react
v0.5.1
Published
Wrapper React del widget de chat de Linkia (boton flotante + iframe).
Readme
linkia-ai-widget-react
Componente React para integrar el widget de chat de Linkia AI Assistant. Renderiza el botón
flotante y el chat con props tipadas y una API imperativa. Es el equivalente al
script widget.js, pensado para importarse en cualquier proyecto React.
Instalación
npm install linkia-ai-widget-reactreact y react-dom (>=18) son peer dependencies y deben estar presentes en el
proyecto.
Uso básico
import { LinkiaChat } from "linkia-ai-widget-react";
export function App() {
return <LinkiaChat publicKey="pk_live_xxx" apiBase="https://linkia.ai" />;
}Con businessContext y control imperativo
import { useRef } from "react";
import { LinkiaChat, type LinkiaChatHandle } from "linkia-ai-widget-react";
export function App() {
const chat = useRef<LinkiaChatHandle>(null);
return (
<>
<button onClick={() => chat.current?.open()}>Abrir soporte</button>
<LinkiaChat
ref={chat}
publicKey="pk_live_xxx"
apiBase="https://linkia.ai"
contextToken={token}
onContextExpired={() => refreshToken()}
hideLauncher
/>
</>
);
}Props
| Prop | Tipo | Default | Descripción |
| ------------------ | -------------------------- | ------------ | ---------------------------------------------------- |
| publicKey | string | — | Public key del tenant (pk_live_...). |
| apiBase | string | — | Origen del backend (https://linkia.ai), sin slash. |
| contextToken | string \| null | — | Token de businessContext; se sincroniza al cambiar. |
| onContextExpired | (reason: string) => void | — | Se invoca cuando el token de contexto expira. |
| defaultOpen | boolean | false | Monta el chat abierto. |
| onOpenChange | (open: boolean) => void | — | Notifica aperturas y cierres. |
| hideLauncher | boolean | false | Oculta el botón flotante (control total vía la ref). |
| zIndex | number | 2147483645 | z-index base del iframe. |
| theme | "light" \| "dark" \| "auto" | "light" | Tema del chat. "auto" sigue el tema del host. |
Tema (dark / light)
Por defecto el chat se ve en modo claro. Pasá theme para cambiarlo:
// Fijo
<LinkiaChat publicKey="pk_live_xxx" apiBase="https://linkia.ai" theme="dark" />
// Atado a tu estado de tema (recomendado)
<LinkiaChat
publicKey="pk_live_xxx"
apiBase="https://linkia.ai"
theme={isDark ? "dark" : "light"}
/>theme="auto" resuelve el tema contra el host —clase dark/dark-mode, atributo
data-theme, luminancia del fondo del <body>, o prefers-color-scheme— y reacciona
a los cambios de tema del sistema en vivo.
Abrir con un mensaje
Para que un botón del host abra el chat y mande una pregunta sin que el visitante
la escriba, usá sendMessage (envía al bot) o prefill (solo deja el texto en el
input). Funcionan con el chat cerrado: el mensaje se encola hasta que el iframe
está listo.
import { useRef } from "react";
import { LinkiaChat, type LinkiaChatHandle } from "linkia-ai-widget-react";
export function App() {
const chat = useRef<LinkiaChatHandle>(null);
return (
<>
<button onClick={() => chat.current?.sendMessage("¿Cuánto cuesta el plan Pro?")}>
Preguntar al asistente
</button>
<LinkiaChat ref={chat} publicKey="pk_live_xxx" apiBase="https://linkia.ai" />
</>
);
}Ref (LinkiaChatHandle)
open()/close()/toggle()setContext(token)/clearContext()sendMessage(text)— abre y envía al botprefill(text)— abre y deja el texto en el input, sin enviarisOpen(solo lectura)
Licencia
MIT