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:
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:
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 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>
<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>
