Voltar para o menu: Playground, APPs e Plugins
Documentação
O menu de funcionalidades é 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 Se o seu software for é DESKTOP nos nós temos uma solução similar a esta, porém baseada em DLLs DLLs +Inf.
Dependências
Os scripts necessários para o uso do menu devem ser adicionados dentro da tag head <head> da página.
Stylesheets:
<link type="text/css" rel="stylesheet" href="css/jquery.directcallsoft.css" />
...
<script type="text/javascript" src="js/jquery.directcallsoft.min.js"></script>
Como utilizar
$(jQuerySelector).directcallsoft(options[opcional]);
...
- 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.
...
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:
...
jq(jQuerySelector).directcallsoft();
Exemplo:
Considerando que temos dois elementos com telefones no corpo da página:
...
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">
...
$(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