Como integrar seu sistema com o webphone hidden da Zenvia

Você conhece o webphone e suas vantagens? Veja como integrá-lo na aplicação da sua empresa por meio da nossa solução de voz.

7 de dezembro de 2017 | por: Zenvia

Olá pessoal, tudo bem?

Neste tutorial iremos apresentar como integrar seu sistema com o webphone hidden (escondido) da TotalVoice.

Após a criação da sua conta, você deve pegar seu Access-Token na página inicial da TotalVoice. Feito isso, basta acessar o método /webphone para buscar a URL de uso do seu ramal. Segue exemplo abaixo:

O método/webphone possui os seguintes parâmetros:

tipo
- floating = Popup
- embedded = Embutido no site
- hidden = Sem interface e com funções de callback
Id_ramal = ID do ramal para pré-configurar o widget
ramal = Número do ramal para pré-configurar o widget
ligar_para = Abrir o webphone ligando para o número, formato DDD + Número exemplo: 4832830151
fechar_fim = Fechar a janela do webphone quando a chamada for encerrada?

Até aqui tudo bem 🙂

A próxima etapa é adicionar essa URL numa tag do javascript para conectar o seu webphone, visualize o exemplo do github clicando aqui. Observe o trecho abaixo:

<!– URL que foi pega pela API no /webphone – cria o iframe e injeta o webphone–>
<script src=”URL_WEBPHONE_API_TOTALVOICE”></script>

Substitua URL_WEBPHONE_API_TOTALVOICE pelo conteúdo de sua URL. Ao executar o arquivo de exemplo o resultado esperado é o da imagem abaixo:

Funções javascript disponíveis para implementação

Nome do método: desligaChamada()

Descrição: Função para desligar uma chamada ativa.

Utilização:

          function desligaChamada() {
              webphone.contentWindow.postMessage({
                  message: 'hangup'
              }, '*');
          }

Nome do método: chamaNumero(numero)

Descrição: Função que realiza uma ligação para um número destino

Utilização:

            function chamaNumero(numero) {
                webphone.contentWindow.postMessage({
                    message: 'chamaNumero',
                    'numero': numero
                }, '*');
            }

OBS: Neste caso é preciso passar o número por parâmetro

Nome do método: atender()

Descrição: Função para atender uma ligação

Utilização:

            function atender() {
                webphone.contentWindow.postMessage({
                    message: 'answer'
                }, '*');
            }

Nome do método: enviaDTMF(meuDTMF)

Descrição: Função para utilizar com URAS, enviar valores para o destino.

Utilização:

            function enviaDTMF(meuDTMF) {
                webphone.contentWindow.postMessage({
                    message: 'enviaDTMF',
                    'dtmf': meuDTMF
                }, '*');
            }

Nome do método: mute()

Descrição: Função para colocar o telefone no modo mudo

Utilização:

            function mute() {
                webphone.contentWindow.postMessage({
                    message: 'mute'
                }, '*');
            }

Nome do método: transferir(numeroTelefone)

Descrição: Transferência blind – Encerra a ligação no número ativo e transfere para o número passado por parâmetro

Utilização:

            function transferir(numeroTelefone) {
                webphone.contentWindow.postMessage({
                    message: 'transferir',
                    'numeroTelefone': numeroTelefone
                }, '*');
            }

Nome do método: transferirConsulta(numeroTelefone)

Descrição: Transferência com consulta- Transfere a chamada para o número de telefone passado por parâmetro e, ao finalizar a chamada transferida, volta para a ligação para o número que realizou a transferência.

Utilização:

            function transferirConsulta(numeroTelefone) {
                webphone.contentWindow.postMessage({
                    message: 'transferirConsulta',
                    'numeroTelefone': numeroTelefone
                }, '*');
            }

Nome do método: conectar()

Descrição: Função para ativar o webphone. Não é necessário executar ao abrir pela primeira vez, pois ele se conecta automaticamente.

Utilização:

            function conectar() {
                webphone.contentWindow.postMessage({
                    message: 'conectar'
                }, '*');
            }

Nome do método: desconectar()

Descrição: Função para desligar o webphone e parar de receber ligações. Para reativar, deve ser executado o comando de conectar()

Utilização:

            function desconectar() {
                webphone.contentWindow.postMessage({
                    message: 'desconectar'
                }, '*');
            }

Nome do método: recStart()

Descrição: Função para iniciar uma nova gravação durante a chamada.

Utilização:

            function recStart() {
                webphone.contentWindow.postMessage({
                    message: 'recStart'
                }, '*');
            }

Nome do método: recStop()

Descrição: Função para parar a nova gravação durante a chamada. Se iniciar a gravação de várias, o stop termina a mais antiga cada vez que roda.

Utilização:

            function recStop() {
                webphone.contentWindow.postMessage({
                    message: 'recStop'
                }, '*');
            }

Nome do método: pausarNaFila(filaId)

Descrição: Função para colocar o ramal em pausa em uma fila específica.

Utilização:

            function pausarNaFila(filaId) {
                webphone.contentWindow.postMessage({
                    message: 'pausarNaFila',
                    filaId: filaId
                }, '*');
            }

Nome do método: despausarNaFila(filaId)

Descrição: Função para colocar o ramal em pausa em uma fila específica.

Utilização:

            function despausarNaFila(filaId) {
                webphone.contentWindow.postMessage({
                    message: 'despausarNaFila',
                    filaId: filaId
                }, '*');
            }

Nome do método: entrarNaFila(filaId)

Descrição: Função para colocar o ramal em uma fila de atendimento específica

Utilização:

            function entrarNaFila(filaId) {
                webphone.contentWindow.postMessage({
                    message: 'entrarNaFila',
                    filaId: filaId
                }, '*');
            }

Nome do método: sairDaFila(filaId)

Descrição: Função para retirar o ramal em uma fila de atendimento específica

Utilização:

            function sairDaFila(filaId) {
                webphone.contentWindow.postMessage({
                    message: 'sairDaFila',
                    filaId: filaId
                }, '*');
            }

Exemplo completo de como integrar no seu ambiente

<!-- Exemplo Webphone com interface propria ou oculto -->
<html>
   <body>
      <div id="widget-evoline-api-container" style="display:inline" width="10" height="20"></div>
      <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
      <script>
         //todas as mensagens oriundas do webphone são recebidas aqui.
         window.onmessage = function(e) {
             //quando receber uma ligacao
             if (e.data.message == 'chegandoChamada') {
                 alert('Chegando Chamada de ' + e.data.numeroChegando + ' para: ' + e.data.numeroDestino + ' chamada_recebida_id: ' + e.data.chamadaRecebidaId);
             }
             //conectado, desconectado, chamando, encerrada, conversando
             if (e.data.message == 'status') {
                 alert('Status: ' + e.data.status);
             }
             //o id é único e pode ser utilizado na api para recuperação de mais informações (get na api ou webhooks) 
             if (e.data.message == 'chamada_id') {
                 alert('Chamada_id: ' + e.data.chamada_id);
             }
             //os erros são finais
             if (e.data.message == 'status_erro') {
                 alert('Sem Permissão: ' + e.data.status_erro);
             }
             //confirmação de que iniciou a gravação. o rec_parcial_id vem 0 se falhou. Se estiver gravando, vem o id da gravação parcial (id >0)
             if (e.data.message == 'recStart') {
                 alert('Iniciando gravação - status:'+e.data.sucesso + ' rec_parcial_id: '+e.data.rec_parcial_id);
             }
             //confirmação de que parou a gravação. Vem o id da gravação que parou
             if (e.data.message == 'recStop') {
                 alert('Parando gravação - status:'+e.data.sucesso + ' rec_parcial_id: '+e.data.rec_parcial_id);
             }
             //info de qualidade do cliente webphone (ping, jiter = ms. cpu - ghz);
             if (e.data.message == 'stats_webphone') {
                 alert('internet:'+e.data.internet + ' computador '+e.data.computador + ' info_cpu:'+e.data.info_cpu + ' info_ping:'+e.data.info_ping + ' info_jitter:'+e.data.info_jitter);
             }
         
         };
         
         //encerra chamada ativa
         function desligaChamada() {
             webphone.contentWindow.postMessage({
                 message: 'hangup'
             }, '*');
         }

         //Conecta o webphone para coloca-lo em operação
         function conectar(){
             webphone.contentWindow.postMessage({message : 'conectar'}, '*');
         }

         //desconecta o webphone - ele nao recebe nem envia mais chamadas
         function desconectar(){
             webphone.contentWindow.postMessage({message : 'desconectar'}, '*');
         }
         
         //telefona para um número
         function chamaNumero(numero) {
             webphone.contentWindow.postMessage({
                 message: 'chamaNumero',
                 'numero': numero
             }, '*');
         }
         
         //atender
         function atender() {
             webphone.contentWindow.postMessage({
                 message: 'answer'
             }, '*');
         }
         
         //para uso com uras
         function enviaDTMF(meuDTMF) {
             webphone.contentWindow.postMessage({
                 message: 'enviaDTMF',
                 'dtmf': meuDTMF
             }, '*');
         }
         
         //mute microfone
         function mute() {
             webphone.contentWindow.postMessage({
                 message: 'mute'
             }, '*');
         }
         
         //transferencia blind - encerra a ligação aqui e transfere para o numero
         function transferir(numeroTelefone) {
             webphone.contentWindow.postMessage({
                 message: 'transferir',
                 'numeroTelefone': numeroTelefone
             }, '*');
         }
         
         //transferencia com consulta
         function transferirConsulta(numeroTelefone) {
             webphone.contentWindow.postMessage({
                 message: 'transferirConsulta',
                 'numeroTelefone': numeroTelefone
             }, '*');
         }

         //inicia gravação da chamada neste momento
         function recStart(){
             webphone.contentWindow.postMessage({message : 'recStart'}, '*');
         }

         //para a gravação parcial( se houver uma em andamento). Não afeta a gravação total da chamada
         function recStop(){
             webphone.contentWindow.postMessage({message : 'recStop'}, '*');
         }

         //Pausa o ramal em uma fila
         function pausarNaFila(filaId) {
                webphone.contentWindow.postMessage({
                    message: 'pausarNaFila',
                    filaId: filaId
                }, '*');
            }

         //Despausa o ramal em uma fila
         function despausarNaFila(filaId) {
                webphone.contentWindow.postMessage({
                    message: 'despausarNaFila',
                    filaId: filaId
                }, '*');
            }


         //Entra em um fila de atendimento
         function entrarNaFila(filaId) {
                webphone.contentWindow.postMessage({
                    message: 'entrarNaFila',
                    filaId: filaId
                }, '*');
            }

         //Sai de uma fila de atendimento
         function sairDaFila(filaId) {
                webphone.contentWindow.postMessage({
                    message: 'sairDaFila',
                    filaId: filaId
                }, '*');
            }


      </script>
      <!-- URL que foi pega pela API no /webphone - cria o iframe e injeta o webphone-->
      <script src="URL_WEBPHONE_API_TOTALVOICE"></script>

      <input type="button" onclick="javascript:conectar();" value="Conectar"> (o sistema conecta sozinho por default ao abrir)<br>
      <input type="button" onclick="javascript:desconectar();" value="Desconectar"> (nao recebe nem faz mais chamadas)<br>

      <input type="button" onclick="javascript:desligaChamada();" value="Desliga Chamada">
      <input type="button" onclick="javascript:chamaNumero(4545);" value="Chama 4545">
      <br>
      <input type="button" onclick="javascript:chamaNumero(4832830151);" value="Chama 4832830151">
      <br>
      <input type="button" onclick="javascript:chamaNumero(48996281618);" value="Chama 48996281618">
      <br> (DTMF: 0,1,2,3,4,5,6,7,8,9,*,#)<br>
      <input type="button" onclick="javascript:enviaDTMF('1');" value="DTMF 1">
      <br>
      <input type="button" onclick="javascript:enviaDTMF('*');" value="DTMF *">
      <br>
      <input type="button" onclick="javascript:enviaDTMF('#');" value="DTMF #">
      <br><input type="button" onclick="javascript:mute();" value="Mute/Unmute">
      <br>
      <br>
      <input type="button" onclick="transferirConsulta('4000');" value="Transferir Consulta para 4998">
      <br>
      <input type="button" onclick="transferir('4515');" value="Transferir para 4515">
      <input type="button" onclick="javascript:atender();" value="Atender">
<br><br>
      &lt;input type="button" onclick="javascript:recStart();" value="recStart">
      <input type="button" onclick="javascript:recStop();" value="recStop">
<br><br>
      <input type="button" onclick="pausarNaFila(1234);" value="Pausar em todas filas">
      <input type="button" onclick="despausarNaFila(1234);" value="Despausar em todas filas">
<br><br>
      <input type="button" onclick="entrarNaFila(1234);" value="Pausar em todas filas">
      <input type="button" onclick="sairDaFila(1234);" value="Despausar em todas filas">
   </body>
</html>

Como integrar seu sistema com o webphone hidden da Zenvia

Funções javascript disponíveis para implementação

Exemplo completo de como integrar no seu ambiente

Zenvia

Leia também

Plataforma de voz: 5 recursos de voz para otimizar a comunicação da sua empresa

Mensagem de cobrança: como utilizá-la para diminuir a inadimplência de clientes

Como integrar seu sistema com o webphone hidden da Zenvia

Funções javascript disponíveis para implementação

Exemplo completo de como integrar no seu ambiente

Zenvia

Que bom ver você aqui! Obrigado pela visita! Que tal se inscrever na nossa news e receber conteúdos exclusivos da Zenvia?

Leia também

Plataforma de voz: 5 recursos de voz para otimizar a comunicação da sua empresa

Mensagem de cobrança: como utilizá-la para diminuir a inadimplência de clientes