Atlassian uses cookies to improve your browsing experience, perform analytics and research, and conduct advertising. Accept all cookies to indicate that you agree to our use of cookies on your device. Atlassian cookies and tracking notice, (opens new window)
Directcall
/
Copy of APP - Menu de telefonia

    Copy of APP - Menu de telefonia

    out. 04, 2013

    Voltar para o menu:   Playground, APPs e Plugins

    Documentação

    A APP Menu facilita recursos de telefonia em Relatórios e Cadastros web. É aplicável em páginas HTML através de JavaScript e CSS. É um plugin baseado na biblioteca jQuery, portanto muito simples de utilizar, bastando usar um seletor jQuery e invocar o menu e todos os elementos selecionados terão o menu aplicado.

    NOTA: Se o seu software é DESKTOP nós temos uma solução similar baseada em DLLs +Inf.

    Dependências

    Os scripts necessários para o uso do menu devem ser adicionados dentro da tag <head> da página.

     

    Stylesheets:

    <link type="text/css" rel="stylesheet" href="css/jquery.directcallsoft.css" />

    <link type="text/css" rel="stylesheet" href="css/jquery-ui.min.css" />

    <link type="text/css" rel="stylesheet" href="css/jquery.ui.datepicker.min.css" />

     

    JavaScripts:

    <script type="text/javascript" src="js/jquery.min.js"></script>

    <script type="text/javascript" src="js/jquery.cookie.js"></script>

    <script type="text/javascript" src="js/jquery.datemaker.js"></script>

    <script type="text/javascript" src="js/jquery.placeholder.js"></script>

    <script type="text/javascript" src="js/jquery.ui.datepicker.min.js"></script>

    <script type="text/javascript" src="js/jquery.ui.datepicker-pt-BR.js"></script>

    <script type="text/javascript" src="js/jquery-ui.custom.min.js"></script>

    <script type="text/javascript" src="js/jquery.directcallsoft.min.js"></script>

     

    Como utilizar

    $(jQuerySelector).directcallsoft(options[opcional]);

    onde:

      • jQuerySelector é uma string descrevendo um elemento ou seleção de elementos (referência para jQuerySelector);
      • options é um objeto com as propriedades para configuração do menu.

     

    Configuração do menu

    O parâmetro options mencionado anteriormente permite as seguintes configurações/customizações do menu. É opcional e qualquer um dos parâmetros descritos abaixo pode ser omitido.

    var options = {

    // OBRIGATÓRIOS //

     

    // url para envio dos dados //

    apiGatewayUrl: 'DirectcallMenuApi.php', // gateway de requisições AJAX

     

    // OPCIONAIS //

    // dados da api //

    login: '', // login do usuário

    password: '', // senha do usuário

    originationPhone: '', // telefone onde o usuário irá receber chamadas


    apiFormReference: '', // nome da empresa para referência de processos internos

     

    // posicionamento do menu //

    phoneHPos: 'right', // posição horizontal do ícone do telefone em relação ao menu

    phoneVPos: 'top', // posição vertical do ícone do telefone em relação ao menu

    menuHPos: 'left', // posição horizontal do menu em relação ao ícone do telefone

    menuVPos: 'top', // posição horizontal do menu em relação ao ícone do telefone

    menuHOffset: 0, // deslocamento horizontal do menu em relação ao ícone do telefone

    menuVOffset: 0, // deslocamento verical do menu em relação ao ícone do telefone

     

    // posiciomento do ícone do telefone //

    phoneIconHPos: 'right',

     

    // evento para mostrar o menu //

    showOn: '', // click|hover|se vazio, após 1s sobre o ícone do telefone ou clique o menu aparece //

     

    // habilitação, visibilidade e texto dos itens do menu //

    menuItens: {

    call: {

    enabled: 1, // habilita/desabilita o item do menu

    visible: 1, // mostra/esconde o item do menu

    label: 'Ligar' // texto descritivo do item do menu (pode ser omitido)

    },

    callRecording: { enabled: 1, visible: 1, label: 'Ligar e Gravar' },

    sms: { enabled: 1, visible: 1, label: 'Enviar SMS' },

    smsVoice: { enabled: 1, visible: 1, label: 'Enviar SMS como voz para fixo' },

    cdr: { enabled: 1, visible: 1, label: 'Extrato de ligações' },

    cdrSms: { enabled: 1, visible: 1, label: 'Extrato de SMS' },

    cdrRecordings: { enabled: 1, visible: 1, label: 'Extrato de ligações gravadas' },

    config: { enabled: 1, visible: 1, label: 'Configurações' }

    }

    };

     

    Obs.: as requisições via AJAX são feitas para o script DirectcallMenuApi.php que fará o acesso à API de telefonia da Directcall, e este script deve ficar no servidor da aplicação do cliente.

    Sugestão: as configurações de menuItens podem construídas a partir de um banco de dados com perfil do usuário.

     

    Observações

    Caso esteja utilizando outra biblioteca com o operador $ (cifrão) como o prototype será necessário utilizar ao invés do cifrão a palavra jQuery ou atribuir para outra variável o apontador do jQuery, assim:

    var jq = jQuery.noConflict();

    e então:

    jq(jQuerySelector).directcallsoft();

     

     

    Exemplo:

    Considerando que temos dois elementos com telefones no corpo da página:

    <span class="directcallsoft">1 (212) 777 3456</span>

    <input type="text" value="12127773456" class="directcallsoft" />

    Note que ambos possuem a class directcallsoft, sendo esta uma marcação para os elementos que terão o menu atribuído. Para tal basta invocar a linha abaixo após o carregamento da página:

    $('.directcallsoft').directcallsoft();

    jQuerySelector neste caso é a class directcallsoft, representada na nomenclatura de stylesheet por ".directcallsoft".

     

    Exemplo de uma página completa:

     

    <!DOCTYPE html>
    <html>
    <head>
    <title>Directcall Menu API</title>

    <link type="text/css" rel="stylesheet" href="css/jquery.directcallsoft.css" />
    <link type="text/css" rel="stylesheet" href="css/jquery-ui.min.css" />
    <link type="text/css" rel="stylesheet" href="css/jquery.ui.datepicker.min.css" />

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.cookie.js"></script>
    <script type="text/javascript" src="js/jquery.datemaker.js"></script>
    <script type="text/javascript" src="js/jquery.placeholder.js"></script>
    <script type="text/javascript" src="js/jquery.ui.datepicker.min.js"></script>
    <script type="text/javascript" src="js/jquery.ui.datepicker-pt-BR.js"></script>
    <script type="text/javascript" src="js/jquery-ui.custom.min.js"></script>
    <script type="text/javascript" src="js/jquery.directcallsoft.min.js"></script>
    <script type="text/javascript">
    // execução após o carregamento da página //
    $(document).ready(function() {
        // atribuição do menu a todos os elementos que possuem class directcallsoft //
        $('.directcallsoft').directcallsoft({
            // OBRIGATÓRIOS //
            // url para envio dos dados //
            apiGatewayUrl: 'DirectcallMenuApi.php',
            
            // OPCIONAIS //
            // dados da api //
            login: '', // usuário da api
            password: '', // senha da api
            originationPhone: '', // número para receber chamadas
            
            apiFormReference: 'menu_dc',
            
            // posicionamento do menu //
            phoneHPos: 'right',
            phoneVPos: 'top',
            menuHPos: 'left',
            menuVPos: 'top',
            menuHOffset: 0,
            menuVOffset: 0,
            
            // evento para mostrar o menu //
            showOn: '', // click|hover|se vazio, após 1s sobre o ícone do telefone ou clique o menu aparece //
            
            // visibilidade/habilitação dos itens do menu //
            menuItens: {
                call: {
                    //label: 'Call',
                    enabled: 1,
                    visible: 1
                },
                callRecording: {
                    //label: 'Recording call',
                    enabled: 1,
                    visible: 1
                },
                sms: {
                    //label: 'SMS',
                    enabled: 1,
                    visible: 1
                },
                smsVoice: {
                    //label: 'SMS to Voice',
                    enabled: 1,
                    visible: 1
                },
                cdr: {
                    //label: 'CDR',
                    enabled: 1,
                    visible: 1
                },
                cdrRecordings: {
                    //label: 'Recordings CDR',
                    enabled: 1,
                    visible: 1
                },
                config: {
                    //label: 'Settings',
                    enabled: 1,
                    visible: 1
                }
            }
        });
    });
    </script>
    </head>

    <body>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        fone: <span class="directcallsoft">1 (212) 777 3456</span> usa<br /><br />
        fone: <input type="text" value="12127773456" class="directcallsoft" />
        <p style="text-align:right;">
            fone: <span class="directcallsoft">1 (212) 777 3456</span> usa<br />
        </p>
    </body>

    </html>

     

     

    Requisições AJAX

    As solicitações das ações são realizadas por AJAX (XMLHttpRequest) para o gateway (proxy) DirectcallMenuApi.php. Este script em PHP solicita para a API da Directcall as requisições de funcionalidades do menu. Segue código do script:

     

    <?php

    /**
     * Requisições para a API de telefonia da Directcall
     */
    class DirectcallMenuApi
    {
        /**
         * Domínio da API
         */
        const DOMAIN = 'http://api.directcallsoft.com/';
        
        /**
         * Requisição de uma url via post
         * @param string $url
         * @param array $data
         * @return string
         */
        public static function curlPost($url, $data)
        {
            if ( is_array($data) ) {
                $data = http_build_query($data);
            }
            
            $curlOptions = array(
                CURLOPT_URL             => $url,
                //CURLOPT_TIMEOUT         => 10, // tempo máximo de espera por resposta //
                CURLOPT_HEADER          => 0, // retorna o header //
                CURLOPT_HTTPHEADER => array(
                    "Content-Type: application/x-www-form-urlencoded",
                    "Content-Length: ".strlen($data),
                ),
                CURLOPT_RETURNTRANSFER  => 1, // força o retorno da resposta
                CURLOPT_POST            => 1,
                CURLOPT_POSTFIELDS      => $data,
                CURLOPT_SSL_VERIFYPEER  => 0, // não verifica SSL
                //CURLOPT_FOLLOWLOCATION  => 1,
                //CURLINFO_REDIRECT_COUNT => 2,
                //CURLINFO_REDIRECT_TIME  => 5,
            );
            
            $curlHandle = curl_init();
            curl_setopt_array($curlHandle, $curlOptions);
            
            $curlResponse = curl_exec($curlHandle);
            $resposta = ( curl_errno($curlHandle) > 0 ) ? curl_error($curlHandle) : $curlResponse;
            curl_close($curlHandle);
            
            return utf8_decode($resposta);
        }
        
        /**
         * Requisição para a API
         * @param array $data
         * @return string
         */
        public static function request($data) {
            if ( isset($data["format"]) ) {
                if ( $data["format"] == "json" ) {
                    header('Content-Type: application/json');
                } elseif ( $data["format"] == "xml") {
                    header('Content-Type: application/xml');
                }
            }
            return self::curlPost(self::DOMAIN . (isset($data['action']) ? $data['action'] : ''), $data);
        }
        
        /**
         * Busca informações de localização baseadas no IP
         * @access public
         * @param string $ip
         * @return string
         */
        public static function geolocation($ip) {
            return trim(file_get_contents("http://freegeoip.net/json/{$ip}"));
        }
    }


    // imprime o resultado da requisição da API //
    if ( isset($_REQUEST['tooltip']) && is_numeric($_REQUEST['tooltip']) )
    {
        // informações dos tooltips //
        echo DirectcallMenuApi::curlPost('https://www.directcallsoft.com/ecommerce/webservice/tooltips.php',
            array('identifier' => $_REQUEST['tooltip']));
    }
    elseif ( isset($_REQUEST['action']) && ($_REQUEST['action'] == 'geolocation') )
    {
        // informações sobre localização //
        $ip = $_SERVER['REMOTE_ADDR'];
        $ip = '';
        echo DirectcallMenuApi::geolocation($ip);
    }
    else
    {
        // requisições de telefonia //
        $request = DirectcallMenuApi::request($_REQUEST);
        if ( isset($_REQUEST['action']) ) {
            $ok = false;
            switch ( preg_replace('/^.+?([a-z]+)$/', '$1', $_REQUEST['action']) ) {
                case 'calls': $ok = true; $titulo = "liga&ccedil;&otilde;es";  break;
                case 'sms': $ok = true; $titulo = "SMS";  break;
                case 'recordings': $ok = true; $titulo = "grava&ccedil;&otilde;es";  break;
            }
            if ( $ok ) {
                $request = preg_replace('/(<body>)[\s\r\n]*(<table)/',
                    '$1<div style="font-family:arial;font-size:12px;font-weight:bold;margin-bottom:30px;">Directcall - Relat&oacute;rio de '.$titulo.'</div>$2',
                    $request);
            }
        }
        echo $request;
    }

    ?>

    Teste grátis

    Para testar clique aqui

     

     

     

     

     

    , multiple selections available,
    Bem-vindo à Área de Desenvolvedores
    Teams
    , (opens new window)
    Directcall APIs Telefonia - Voz, Gravação, Extratos, SMS
    • Directcall APIs Telecom
      Directcall APIs Telecom
       This trigger is hidden
    • Directcall APPs Telefonia
      Directcall APPs Telefonia
       This trigger is hidden
    Results will update as you type.
    • APP - Menu de telefonia
    • APP - Menu de telefonia.
    • API - DEV Interno
    • Copy of APP - Menu de telefonia
    • Bem-vindo à Área de Desenvolvedores
    • HELPERs de Telefonia
      You‘re viewing this with anonymous access, so some content might be blocked.
      {"serverDuration": 12, "requestCorrelationId": "73260a7edf494d7cbe46ebf3e948f28b"}