O atendente possui diferentes formas de realizar uma chamada com o cliente. Desde um portal web NuVidio, website com autenticação single sign-on e aplicativo mobile. Alguns possuem funcionalidades específicas mas possuem a mesma utilidade que é o atendimento eficiente e organizado dos seus clientes.

Portal NuVidio

A maneira mais básica e prática de atendimento da NuVidio é através do nosso Portal de atendimento. Nele o atendente possui notificações sonoras e visuais, consegue gerenciar outras informações da sua conta e consultar histórico de atendimentos realizados por ele e até mesmo de chamadas perdidas (muito útil para recontato). É válido salientar que as notificações são enviadas enquanto o portal encontra-se disponível no seu navegador, ou seja, mesmo em background, o website deve estar aberto.

O login é feito através do email cadastrado e a senha é criada através do link enviado para o email quando a empresa realiza o cadastro do atendente. Em caso de não relembrar a senha é possível sempre solicitar o esqueci minha senha.

Portal Transparente

Em alguns casos em que o atendente já possui algum portal interno é de grande relevância que ele não necessite realizar o acesso em outra aplicação, para evitar múltiplos websites o que pode ocasionar confusões. Visando diminuir esse trabalho nós disponibilizamos uma funcionalidade que permite que o atendente consiga acessar o nosso portal de atendimento, através de um iFrame por exemplo, de maneira transparente, sem a necessidade de realizar login.

O que é feito é uma integração da empresa com o nossa API para solicitar um token de autenticação que pode ser enviado através da URL permitindo que o atendente seja direcionado para a tela de atendimento sem a necessidade de realizar o login. O fluxo utilizado é o seguinte:

O importação do iFrame é realizada da seguinte forma, onde o token é o recebido da API da NuVidio:

`

`

NOTE
Os atributos de permissão "allow="camera;microphone"" e "allowfullscreen" devem ser adicionados anteriormente a vinculação do iframe ao DOM, ou seja, caso o iframe seja criado de forma dinâmica a configuração das permissões deve ser realizada antes de acrescentar o iframe ao HTML da sua página.

Ainda, no atributo "allow" do seu iframe, é preciso adicionar a seguinte opção "display-capture" caso deseje permitir o compartilhamento de tela através do iframe.

Também é possível enviar algumas configurações para desabilitar funcionalidades conforme a tabela seguinte:

Verificando se existe chamada em andamento

É possível validar se existe alguma chamada em andamento através de uma integração via iFrame. Para isso é utilizada a API de post message. Através da sua aplicação é enviado uma mensagem do tipo IS_CALL_IN_PROGRESS para o nosso iFrame questionando se existe uma chamada em andamento da seguinte forma:

// Referência para o elemento do iFrame que está sendo realizada a vídeo chamada no DOM const iframe = document.getElementById("iframe"); iframe.contentWindow.postMessage({ type: "IS_CALL_IN_PROGRESS" }, "https://atendimento.nuvidio.com");

Ao recebe a mensagem, nossa aplicação verifica se existe algum atendimento em progresso e retorna uma nova mensagem para a janela pai com os dois possíveis tipos: CALL_IN_PROGRESS ou NO_CALL_IN_PROGRESS, correspondentes a existe uma chamada em andamento e não existe uma chamada em andamento respectivamente. Também é enviado um objeto com com a propriedade isCallInProgress (boolean) que identifica a existência de um atendimento em progresso. O evento pode ser escutado da seguinte forma:

window.addEventListener("message", ({ data }) => {  
    if (!data) return;  
    const dataParsed = typeof data === "string" ? JSON.parse(data) : data;

if (dataParsed.type === "CALL_IN_PROGRESS") { 
    // Existe chamada em andamento
}
if (dataParsed.type === "NO_CALL_IN_PROGRESS") { 
    // Não existe chamada em andamento
}

// OU

if (dataParsed.isCallInProgress) { 
    // Existe chamada em andamento
}
  });

Finalizar chamada através do iFrame

Caso exista a necessidade de que o seu sistema finalize um atendimento que estiver acontecendo dentro de um iFrame não é aconselhável a simples remoção do iFrame do DOM da sua página web. A remoção inesperada do iFrame pode ocasionar uma finalização incorreta da chamada, bloqueando o atendente para realização de um outro atendimento.

Como uma forma de contornar essa situação adicionamos o suporte a um evento de finalização da chamada que deve ser executado previamente à finalização da chamada, permitindo um encerramento correto e eficiente. Esse evento consiste em utilizar a API de Post Message disponibilizada pelo browser para enviar uma mensagem para a nossa aplicação que está sendo executada dentro do iFrame.

Uma vez tendo a referência do elemento do iFrame que está sendo realizada a vídeo chamada, basta postar uma mensagem para esse elemento passando o tipo FINALIZE_CALL e utilizando como target a URL da aplicação de atendimento da Nuvidio (https://atendimento.nuvidio.com). O evento deve ser enviado da seguinte forma:

// Referência para o elemento do iFrame que está sendo realizada a vídeo chamada no DOM const iframe = document.getElementById("iframe"); iframe.contentWindow.postMessage({ type: "FINALIZE_CALL" }, "https://atendimento.nuvidio.com");

OBS: Aguarde o evento de retorno para remover o iFrame do DOM da sua aplicação

Após o envio do evento realizaremos o processo natural de finalização da chamada de vídeo. Uma vez finalizada enviaremos um evento confirmando a finalização adequada da chamada com o tipo CALL_FINALIZED. Nesse momento o iFrame em que é realizada a chamada pode ser removido com total tranquilidade. O evento deve ser escutado da seguinte forma:

window.addEventListener("message", ({ data }) => {
if (!data) return;
const dataParsed = typeof data === "string" ? JSON.parse(data) : data;

window.addEventListener("message", ({ data }) => {  
    if (!data) return;  
    const dataParsed = typeof data === "string" ? JSON.parse(data) : data;
  
// Valida o tipo correto do evento de finalização
if (dataParsed.type === "CALL_FINALIZED") { 
    iframe.remove();
}
  });

Seguindo o fluxo detalhado é garantida uma finalização adequada da vídeo chamada sem risco de encerramento incorreto.

Verificando existência da uma chamada antes de finalizá-la

Para melhor utilização do evento de finalização de uma chamada é possível validar antes do envio do evento FINALIZE_CALL se existe ou não uma chamada ocorrendo naquele instante. Uma sugestão de implementação é a seguinte.

// Referência para o elemento do iFrame que está sendo realizada a vídeo chamada no DOM  
const iframe = document.getElementById("iframe");

window.addEventListener("message", ({ data }) => {  
    if (!data) return;  
    const dataParsed = typeof data === "string" ? JSON.parse(data) : data;

// Valida que existe uma chamada em andamento
if (dataParsed.type === "CALL_IN_PROGRESS") { 
    iframe.contentWindow.postMessage({ type: "FINALIZE_CALL" }, "https://atendimento.nuvidio.com");
}

// Caso não exista chamada em andamento remove o iframe sem a necessidade de emitir o evento de finalização
if (dataParsed.type === "NO_CALL_IN_PROGRESS") { 
    iframe.remove();
}

// Valida o tipo correto do evento de finalização
if (dataParsed.type === "CALL_FINALIZED") { 
    iframe.remove();
}
  });

iframe.contentWindow.postMessage({ type: "IS_CALL_IN_PROGRESS" }, "<https://atendimento.nuvidio.com")>;