DocHub

Como usar os aplicativos do painel (Yuzap)

Última atualização: 10 de abril de 2024

Com os Aplicativos do Painel, você integra um app ao painel do Yuzap para uso dos agentes. Esse app pode exibir dados do cliente, pedidos, histórico de pagamentos, etc., diretamente na conversa.

Quando incorporado ao painel do Yuzap, seu app recebe contexto da conversa e do contato via evento de janela. Basta implementar um listener para processar o evento.

PS: Confira nossa transmissão ao vivo sobre como criar um aplicativo de painel.

Como criar um aplicativo de painel

  1. Acesse Configurações → Integrações → Aplicativos do Painel e clique em Configurar.

  2. Informe o Nome do aplicativo e a URL onde ele está hospedado.

Após salvar, surgirá uma nova aba com o nome do app dentro da janela da conversa (ex.: “Pedidos do Cliente”). Ao clicar na aba, o seu app será carregado e poderá buscar dados usando o contexto enviado pelo Yuzap.

Recebendo dados do Yuzap no seu aplicativo

O Yuzap envia conversa e contato como evento de janela. No seu app, adicione um listener:

<script>
  function isJSONValid(str) {
    try { JSON.parse(str); return true; } catch (e) { return false; }
  }

  window.addEventListener("message", function (event) {
    if (!isJSONValid(event.data)) return;

    const eventData = JSON.parse(event.data);
    // eventData.event === "appContext"
    // eventData.data => { conversation, contact, currentAgent }
    console.log("AppContext recebido:", eventData);
  });
</script>

Solicitação sob demanda de dados do Yuzap

Se precisar solicitar o contexto on-demand, envie uma mensagem para a janela pai via postMessage.

  • Canal ouvido pelo Yuzap: yuzap-dashboard-app:fetch-info

Exemplo:

Carga útil do evento

Objeto conversation

Objeto contact

Objeto currentAgent

Payload final entregue ao seu app

Boas práticas

  • Segurança do embed: carregue seu app em HTTPS e valide a origem das mensagens (event.origin) antes de confiar no payload.

  • Resiliência: trate campos desconhecidos como opcionais (forward-compatibility).

  • Privacidade: evite armazenar PII desnecessária; anonimize quando possível.

  • Desempenho: faça cache local do contexto quando adequado e evite chamadas redundantes ao backend.

Checklist rápido

Pronto! Seu Aplicativo do Painel (Yuzap) está integrado e recebendo contexto em tempo real para enriquecer o atendimento.

Atualizado