Site da NuvidioAntiga documentação
Referência de API

Integração via Iframe (frontend)

Este documento oferece algumas orientações sobre como eventos podem ser recebidos no frontend, utilizando a renderização por Iframe.

Renderização do Iframe

Na integração, é necessário configurar o Iframe adequadamente para garantir o bom funcionamento do serviço. As configurações necessárias estão presentes no código abaixo:

<iframe 
	allow="camera; microphone; geolocation; display-capture"
	sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
	src="https://nuvidio.ai/:companySlug/invite/:inviteId" // ou o short link gerado na criação do invite
	allowfullscreen
/>

Payload do evento

Os eventos são enviados do Iframe para a aplicação principal seguindo um formato padronizado. Abaixo, encontra-se um exemplo de como o payload de um evento é estruturado:

{
  "event": "video_autonomous_escaped_journey",
  "content": {
    "type": "customer_with_incorrect_data",
    "invite": {
      "id": "2998600f-4e79-4c31-af93-a38f6c06de87",
      "step": "data_validation"
    }
  }
}

Recebendo eventos

A aplicação envia eventos baseados nas ações do cliente dentro do Iframe. A comunicação é estabelecida viawindow.postMessage, permitindo a transmissão de dados 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
    }


});

Eventos enviados

video_autonomous_journey_completed

Esse evento é disparado quando o usuário completa a jornada.

video_autonomous_abandon_agreement

Esse evento é disparado quando o usuário abandona a jornada.

video_autonomous_escaped_journey

A tabela a seguir detalha os eventos que podem ser recebidos pela aplicação host, juntamente com suas descrições:

event_typeDescrição
customer_accessed_expired_inviteEnviado quando o cliente tenta acessar um link de convite que já expirou.
customer_with_incorrect_dataEnviado quando o cliente clica em Meus dados estão incorretos durante a etapa de validação de dados no início da jornada.
customer_asked_for_helpEnviado quando o cliente clica em Preciso de Ajuda em em qualquer etapa da jornada. A etapa específica em que o pedido de ajuda ocorreu será detalhada no parâmetro step do payload do evento.

⚠️

Atenção: Considerações sobre Segurança para URLs Externas

Ao utilizar URLs externas para redirecionamentos dentro da jornada (como em links de ajuda ou suporte), é fundamental verificar se o site de destino permite ser carregado em um Iframe. Isso geralmente é controlado por cabeçalhos de segurança HTTP comoX-Frame-Optionsou pela diretiva frame-ancestors na Content Security Policy (CSP).

Caso o site externo não esteja configurado para permitir isso, o conteúdo pode ser bloqueado pelo navegador, impedindo a visualização ou o redirecionamento.