Tags

Related Posts

Share This

COMO LIGAR TELEFONIA NO SEU SOFTWARE, EM 5 MINUTOS

Olá Pessoal, hoje vamos ver como é fácil integrar aos Relatórios e Cadastros do SEU SOFTWARE um MENU que facilita Ligar com um clique para o telefone dos seus clientes; Gravar ligações; Ouvir ligações gravadas; Enviar SMS; Enviar Torpedo de voz; e Extrato de consumo por colaborador.

chat_ponto_branco_offline

É fantástico como este plugin pode melhorar gestão de atividades e de recursos de telefonia no SEU SOFTWARE.
– Para saber mais sobre este plugin veja APPs Directcall.

NOTA: Se o seu software for DESKTOP nos temos uma solução similar a esta, porém baseada em DLL +Inf.

chat_ponto_branco_offline

Tempo estimado para testar e implantar: 5 minutos.

chat_ponto_branco_offline

Mãos a obra, vamos à implementação.

1º – Primeiro passo: Onde obter um acesso grátis para testar esta APP (pegue neste link o seu usuário e senha de teste)

– Adição dos arquivos necessários: vamos adicionar no cabeçalho da página (dentro da tag <head>) em que se deseja ter as funcionalidades de telefonia da Directcall basta adicionar as bibliotecas do Menu App DirectCall. Assim:

<br /> &lt;link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;https://www.directcallsoft.com/api/menu/css/jquery.directcallsoft.css&quot; /&gt;<br /> &lt;link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;https://www.directcallsoft.com/api/menu/css/jquery-ui.min.css&quot; /&gt;<br /> &lt;link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;https://www.directcallsoft.com/api/menu/css/jquery.ui.datepicker.min.css&quot; /&gt;</p> <p>&lt;link href=&quot;https://www.directcallsoft.com/api/menu/css/jquery.ui.datepicker.min.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;<br /> &lt;script type=&quot;text/javascript&quot; src=&quot;https://www.directcallsoft.com/api/menu/js/jquery.cookie.js&quot;&gt;&lt;/script&gt;<br /> &lt;script type=&quot;text/javascript&quot; src=&quot;https://www.directcallsoft.com/api/menu/js/jquery.datemaker.js&quot;&gt;&lt;/script&gt;<br /> &lt;script type=&quot;text/javascript&quot; src=&quot;https://www.directcallsoft.com/api/menu/js/jquery.placeholder.js&quot;&gt;&lt;/script&gt;<br /> &lt;script type=&quot;text/javascript&quot; src=&quot;https://www.directcallsoft.com/api/menu/js/jquery.ui.datepicker.min.js&quot;&gt;&lt;/script&gt;<br /> &lt;script type=&quot;text/javascript&quot; src=&quot;https://www.directcallsoft.com/api/menu/js/jquery.ui.datepicker-pt-BR.js&quot;&gt;&lt;/script&gt;<br /> &lt;script type=&quot;text/javascript&quot; src=&quot;https://www.directcallsoft.com/api/menu/js/jquery-ui.custom.min.js&quot;&gt;&lt;/script&gt;<br /> &lt;script type=&quot;text/javascript&quot; src=&quot;https://www.directcallsoft.com/api/menu/js/jquery.directcallsoft.min.js&quot;&gt;&lt;/script&gt;<br /> &lt;script type=&quot;text/javascript&quot;&gt;<br /> // execução após o carregamento da página //<br /> jQuery(document).ready(function() {<br /> // atribuição do menu a todos os elementos que possuem class directcallsoft //<br /> jQuery('.directcallsoft').directcallsoft({<br /> // url para requisição das funcionalidades do menu //<br /> apiGatewayUrl: '/proxy/DirectcallMenuApi.php'<br /> });<br /> });<br /> &lt;/script&gt;</p> <p>&lt;/head&gt;<br /> 


3
º – Adição do arquivo de requisições das funcionalidades (também conhecido como web-proxy para as requisições em AJAX): Vamos criar o proxy do menu na raiz do seu sistema. Crie uma pasta chamada “proxy” e dentro dela adicione o arquivo “DirectcallMenuApi.php” que está anexado a este post. Até agora temos os arquivos necessários para o funcionamento do menu, mas ainda precisamos marcar na página os elementos (telefones) que devem apresentar o menu.

No corpo da página (dentro da tag <body>) vamos marcar os telefones que terão funcionalidades de telefonia. Assim:

Exemplo sem o menu:

api-menu_sem-marcacao

<br /> &lt;body&gt;</p> <p>&lt;h1&gt;Exemplo 1: num texto&lt;/h1&gt;<br /> Entre em contato pelo telefone 55 41 3016 0300<br /> &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;<br /> &lt;h1&gt;Exemplo 2: numa caixa de texto editável&lt;/h1&gt;<br /> &lt;br /&gt;<br /> Seu telefone: &lt;input type=&quot;text&quot; /&gt;</p> <p>&lt;/body&gt;<br /> 

Agora com a marcação para uso do menu:

api-menu_com-marcacao

<br /> &lt;body&gt;</p> <p>&lt;h1&gt;Exemplo 1: num texto&lt;/h1&gt;<br /> Entre em contato pelo telefone &lt;span&gt;55 41 3016 0300&lt;/span&gt;<br /> &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;<br /> &lt;h1&gt;Exemplo 2: numa caixa de texto editável&lt;/h1&gt;<br /> &lt;br /&gt;<br /> Seu telefone: &lt;input type=&quot;text&quot; /&gt;</p> <p>&lt;/body&gt;<br /> 

Como funciona?

O menu da Directcall é um plugin para a biblioteca jQuery, biblioteca esta, que facilita muito o desenvolvimento com JavaScript.

O menu é aplicado através do método jQuery.directcallsoft(<configurações>), mas para isso é necessário selecionar alguns elementos, como os marcados com a propriedade class=”directcallsoft” (Obs.: pode-se utilizar qualquer nome para a propriedade class e sua respectiva chamada na seleção pelo Jquery). Nos elementos marcados com a classe directcallsoft a invocação do método ficaria assim:

</p> <p>jQuery(&amp;amp;quot;.directcallsoft&amp;amp;quot;).directcallsoft({</p> <p> apiGatewayUrl: '/proxy/DirectcallMenuApi.php'</p> <p>});</p> <p>

Para selecionar elementos usando jQuery veja aqui

A configuração passada na linha acima é obrigatória, pois é através dela que serão realizadas as requisições das funcionalidades do menu.

PRONTO! Veja o resultado abaixo:

api-menu_menu

api-menu_menu-config

4º – Vamos dar uma olhada em todas as configurações do menu:

<br /> jQuery(&quot;.directcallsoft&quot;).directcallsoft({<br /> // OBRIGATÓRIOS //<br /> // url para envio dos dados //<br /> apiGatewayUrl: '/proxy/DirectcallMenuApi.php', // gateway de requisições AJAX</p> <p> // OPCIONAIS //<br /> // dados da api //<br /> login: '', // login do usuário<br /> password: '', // senha do usuário<br /> originationPhone: '', // telefone onde o usuário irá receber chamadas<br /> apiFormReference: '', // nome da empresa para referência de processos internos</p> <p> // posicionamento do menu //<br /> phoneHPos: 'right', // posição horizontal do ícone do telefone em relação ao menu<br /> phoneVPos: 'top', // posição vertical do ícone do telefone em relação ao menu<br /> menuHPos: 'left', // posição horizontal do menu em relação ao ícone do telefone<br /> menuVPos: 'top', // posição horizontal do menu em relação ao ícone do telefone<br /> menuHOffset: 0, // deslocamento horizontal do menu em relação ao ícone do telefone<br /> menuVOffset: 0, // deslocamento verical do menu em relação ao ícone do telefone</p> <p> // posiciomento do ícone do telefone //<br /> phoneIconHPos: 'right',</p> <p> // evento para mostrar o menu //<br /> showOn: '', // click|hover|se vazio, após 1s sobre o ícone do telefone ou clique o menu aparece //</p> <p> // habilitação, visibilidade e texto dos itens do menu //<br /> menuItens: {<br /> call: {<br /> enabled: 1, // habilita/desabilita o item do menu<br /> visible: 1, // mostra/esconde o item do menu<br /> label: 'Ligar' // texto descritivo do item do menu (pode ser omitido)<br /> },<br /> callRecording: { enabled: 1, visible: 1, label: 'Ligar e Gravar' },<br /> sms: { enabled: 1, visible: 1, label: 'Enviar SMS' },<br /> smsVoice: { enabled: 1, visible: 1, label: 'Enviar SMS como voz para fixo' },<br /> cdr: { enabled: 1, visible: 1, label: 'Extrato de ligações' },<br /> cdrSms: { enabled: 1, visible: 1, label: 'Extrato de SMS' },<br /> cdrRecordings: { enabled: 1, visible: 1, label: 'Extrato de ligações gravadas' },<br /> config: { enabled: 1, visible: 1, label: 'Configurações' }<br /> }<br /> });<br /> 

Bem, muito simples como você pode ver

chat_ponto_branco_offline

Links de interesse deste post:

Onde obter um acesso grátis para testar este plugin ou APP (pegue neste link o seu usuário e senha de teste, online)

Onde você pode contratar online este plugin ou APP (aqui você pode escolher um plano e contratar a solução via web)

chat_ponto_branco_offline

Espero que tenham gostado do nosso tutoria de hoje, e duvidas e sugestões podem comentar no post.

Até o próximo tutorial.

Abraço.

Veja também as demais APPs da Directcall – Elas podem reduzir o tempo de implantação de diversos recursos avançados Telefonia para o DESENVOLVEDOR:

  • Sem exigir que ele tenha conhecimentos na área de telefonia;
  • Sem obrigar do DESENVOLVEDOR e do USUÁRIO DO SEU SOFTWARE, investimentos em infraestrutura de telefonia e de informática;

A APPs da Directcall são aplicações construídas a partir das APIs e do Playground da Directcall com recursos que podem facilitar a experiencia do usuário, o teste grátis online para o usuário e a compra online das APIs disponibilizadas no seu software, para o usuário do seu software

  • Facilidades que livram o desenvolvedor do suporte para o usuário testar e comprar online as APIs da Directcall

chat_ponto_branco_offline

Links deste post:

Onde obter um acesso grátis para testar esta API (pegue aqui o seu usuário e senha de teste)

Documentação completa sobre esta API (todos os parâmetros códigos e endpoints da API)

Onde você pode contratar esta API (aqui você pode escolher um plano e contratar a solução via web)

Home – Webservices & APIs da Directcall (descritivo comercial desta solução e como ela pode ajudar diversas áreas de negócios)

Conheça as demais APIs da Directcall (Permitem: Enviar SMS ou TORPEDO DE VOZ; Ligar a partir de um clique; Ligar e gravar; Gerenciar Linhas de telefone (DID); Consultar a bases de dados de portabilidade da telefonia Móvel e Fixa e etc. )

Playground Directcall (Facilita o teste das APIs da Directcall e avaliar online a linha de código que corresponde a cada funcionalidade, na linguagem de sua preferencia)

APPs Directcall (Reduzem o tempo de implantação destas APIs para DESENVOLVEDORES . Facilitam a experiência do usuário final, o teste grátis e compra online das APIs disponibilizadas no seu software – No interesse de livrar o desenvolvedor de ter que prestar suporte para o entendimento e para a compra desta solução )