Referência de eventos manuais
Emita e escute eventos do Support a partir do seu próprio código do widget.
Venha a esta página quando o seu código do widget precisar de um canal de eventos em processo.
Se você ainda está colocando o widget no ar, comece por Visão geral, Mude uma coisa só ou Páginas e layouts.
Use esta página quando
- você quer que suas páginas personalizadas publiquem eventos para os callbacks do app
- você quer um registro de erros próprio ligado às suas ações do widget
- você está construindo páginas personalizadas que precisam emitir eventos do Support
O widget embutido não emite automaticamente eventos de conversa, de mensagem
nem de erro. As props de callback e as assinaturas só rodam para os eventos
que o seu próprio código emitir com useSupportEventEmitter(). Ainda não
use essas props como instrumentação de analítica pronta.
O menor trecho que funciona
Coloque a função de retorno e o emissor sob o mesmo ambiente <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>
);
}Conteúdo dos eventos
onConversationStart
Parâmetro
Tipo
onConversationEnd
Parâmetro
Tipo
onMessageSent
Parâmetro
Tipo
onMessageReceived
Parâmetro
Tipo
onError
Parâmetro
Tipo
Assinar a partir da sua própria interface
Use useSupportEvents() quando o ouvinte precisar ficar dentro de um componente próprio do 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 a partir de páginas próprias
Use useSupportEventEmitter() quando a sua própria página precisar emitir os
mesmos eventos do widget que os outros ouvintes esperam. A emissão é síncrona e
local ao runtime atual. O Fluxo não persiste, não repete, não deduplica nem
confirma no servidor esses 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>;
}Passe a ação do seu app como onArchive. Emita só depois que essa ação atingir
o estado que o seu contrato de analítica define. Os eventos de mensagem exigem o
TimelineItem real; não fabrique um a partir de um ID de mensagem.
Próximo passo
- Referência de hooks para as APIs de hooks usadas nesta página
- Referência de tipos para os tipos compartilhados de eventos e mensagens
Esta página foi útil?
Abra uma issue de documentação já preenchida para que a equipe possa agir.