APP - Menu de telefonia

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:

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:

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> </p>
    <p> </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ções"; break;
            case 'sms': $ok = true; $titulo = "SMS"; break;
            case 'recordings': $ok = true; $titulo = "gravaçõ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ório de '.$titulo.'</div>$2',
                $request);
        }
    }
    echo $request;
}

?>

Teste grátis

Para testar clique aqui