Referencia de eventos manuales
Emite y escucha eventos de Support desde tu propio código del widget.
Ven a esta página cuando tu código del widget necesite un canal de eventos en proceso.
Si todavía estás poniendo el widget en marcha, empieza por Visión general, Cambia una sola cosa o Páginas y layouts.
Usa esta página cuando
- quieres que tus páginas personalizadas publiquen eventos hacia los callbacks de la aplicación
- quieres un registro de errores propio ligado a tus acciones del widget
- estás construyendo páginas personalizadas que necesitan emitir eventos de Support
El widget integrado no emite automáticamente eventos de conversación, de
mensaje ni de error. Las props de callback y las suscripciones solo se
ejecutan para los eventos que emita tu propio código con
useSupportEventEmitter(). Todavía no uses estas props como instrumentación
de analítica lista para usar.
El fragmento más pequeño que funciona
Pon la función de retorno y el emisor bajo el mismo entorno <Support.Root>.
import { Support, useSupportEventEmitter } from "@fluxolat/react";
function StartConversationButton() {
const events = useSupportEventEmitter();
return (
<button
onClick={() => events.emitConversationStart("01K0000000000000000000000")}
type="button"
>
Start conversation
</button>
);
}
export function SupportWidget() {
return (
<Support.Root
onConversationStart={({ conversationId }) => {
analytics.track("support_conversation_started", { conversationId });
}}
>
<StartConversationButton />
</Support.Root>
);
}Contenido de los eventos
onConversationStart
Parámetro
Tipo
onConversationEnd
Parámetro
Tipo
onMessageSent
Parámetro
Tipo
onMessageReceived
Parámetro
Tipo
onError
Parámetro
Tipo
Suscribirse desde tu propia interfaz
Usa useSupportEvents() cuando el oyente deba vivir dentro de un componente propio del widget.
"use client";
import { useSupportEvents } from "@fluxolat/react";
import { useEffect } from "react";
export function AnalyticsTracker() {
const events = useSupportEvents();
useEffect(() => {
if (!events) {
return;
}
const unsubscribe = events.subscribe("messageSent", (event) => {
analytics.track("message_sent", event);
});
return unsubscribe;
}, [events]);
return null;
}Emitir desde páginas propias
Usa useSupportEventEmitter() cuando tu propia página necesite emitir los
mismos eventos del widget que esperan los demás oyentes. La emisión es síncrona
y local al runtime actual. Fluxo no persiste, no reintenta, no deduplica ni
confirma en el servidor estos eventos.
"use client";
import { useSupportEventEmitter } from "@fluxolat/react";
export function CustomConversationPage({
conversationId,
onArchive,
}: {
conversationId: string;
onArchive: (conversationId: string) => Promise<void>;
}) {
const emitter = useSupportEventEmitter();
const handleArchive = async () => {
try {
await onArchive(conversationId);
emitter.emitConversationEnd(conversationId);
} catch (cause) {
const error =
cause instanceof Error ? cause : new Error("Could not archive conversation");
emitter.emitError(error, "conversation_archive_failed");
}
};
return <button onClick={() => void handleArchive()}>Archive</button>;
}Pasa la acción de tu aplicación como onArchive. Emite solo cuando esa acción
alcance el estado que define tu contrato de analítica. Los eventos de mensaje
necesitan el TimelineItem real; no lo fabriques a partir de un ID de mensaje.
Siguiente paso
- Referencia de hooks para las APIs de hooks que se usan en esta página
- Referencia de tipos para los tipos compartidos de eventos y mensajes
¿Te resultó útil esta página?
Abre una incidencia de documentación ya rellenada para que el equipo pueda actuar.