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.

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>
Categorias:
Escrito por

Zenvia

Fique por dentro e confira as nossas dicas sobre o mercado mobile e interação digital.