Esse documento irá descrever como receber eventos no frontend via uma renderização por Iframe.
Renderização
<iframe allow="camera;microphone;display-capture" allowfullscreen src="https://nuvidio.ai/:companySlug/invite/:inviteId"></iframe>
Payload do evento
Abaixo temos um payload de exemplo do formato de como o Iframe irá enviar o evento.
{
"event": "video_autonomous_escaped_journey",
"content": {
"type": "customer_with_incorrect_data",
"invite": {
"id": "2998600f-4e79-4c31-af93-a38f6c06de87",
"step": "data_validation"
}
}
}
Recebendo eventos
Nossa aplicação irá enviar alguns eventos baseados em ações do cliente, como quando o mesmo clica em Meus dados estão incorretos ou então quando o cliente clica em Precisa de ajuda
A comunicação é feita usando window.postMessage do iframe para a página host.
Exemplo de código
Abaixo temos um exemplo de como a aplicação host pode escutar por esse eventos vindo do Iframe
window.addEventListener("message", ({ data }) => {
if (!data) return;
const dataParsed = typeof data === "string" ? JSON.parse(data) : data;
if (dataParsed.type === "video_autonomous_escaped_journey") {
// Cliente saiu da jornada
}
});