PLUGIN para Ligar, Ligar e gravar (JQuery)

Esse plugin habilita em poucos minutos um botão "Chamar" ou "Chamar e Gravar" simples na sua aplicação web (JQuery 1.8 ou maior)

Quando a ligação for gravada, ela poderá ser ouvida num clique, a partir do extrato web.
Facilita o “extrato de ligações” e “ouvir ligações gravadas” a partir de links, melhora o histórico de contatos da sua aplicação e o acompanhamento de atividades por gestores.

Implementação em 3 passos:

Faça o download: DirectcallChamarEGravar.zip (exige JQuery 1.8 ou maior)
Crie Cipher para efetuar a requisição com segurança, criptografando a sua chave de acesso à API.
Recomendamos criptografar junto o número de destino para evitar que alterem o mesmo via script.
Escolha um exemplo de código abaixo e implemente-o na sua aplicação

Visualizar código Implante em 3 passos

<style>
    .box-limiter{
        width: 330px;
		vertical-align: top;
    }
    .dc_box {
        vertical-align: top;
        border: 1px solid #AAAAAA;
        border-left: 5px solid #9d0b0e;
        width: 100%;
        margin: 5px;
        color: #888888;
    }

    .dc_box .dc_body {
        min-height: 30px;
        max-height: 340px;
        padding: 5px;
    }

    .dc_box .dc_title {
        border-bottom: 1px solid #AAAAAA;;
        padding: 5px;
        font-weight: bold;
    }

    .dc_box .dc_title img {
			vertical-align: middle !important;
			margin-right: 5px;
			width: 14px;
			height: 14px;
    }

    .dc_box .dc_body table {
        width: 100%;
    }

	.temp_ctn {
   	 	display: none;
    		font-size: 12px !important;
    		color: #666666 !important;
    		font-style: italic;
	}
	.letra_menor {
		font-size: 9px;
		margin-top: 9px;
	}

	hr {
    		margin: 3px 0 3px 0;
    		padding: 0;
	}
</style>
<script src="http://directcall.com.br/chamargravar/DirectCall.ChamarEGravar-min.js"></script>
<script>
    var cipher = '123456789ABCFDEF';
    var origem = '554140621860';
    $(document).ready(function () {
        $('#telefone').DirectcallChamarEGravar({
    cipher: cipher,
    origem: origem,
    abrir: 'direita',
    conteudo: '<strong><span style="font-size: 20px">Nós ligamos para você!</span><br><br>Como funciona este recurso:</strong>' +
    '<p>Chama o seu tel. e em seguida o tel. do seu cliente, fornecedor, etc.<br>' +
    'O seu tel. deve estar livre e ser capaz de receber uma chamada direta.</p><br>',
    containerCss: {
        minWidth: '460px',
			marginTop: '-9px'
    },
    boxAlertCss: {
        top: '0px',
        bottom: 'auto'
    },
    autoSaveEdit: true,
    mostrarTelefone: true,
    fechaPopupChamada: false,
    beforeCall: function (self, container, hImage) {
        //customizacao
        if (container.find('.temp_ctn').length < 1) {
            var html = '<div class="temp_ctn"><hr><p>Esta implementação não realiza chamadas, apenas monstra o funcionamento.</p>' +
                    '<p>Adicional as opções "Chamar" e "Chamar e gravar" este plugin fornece links como "Extrato de ligações" e "Ouvir ligação gravada" que pode melhorar o histórico dos seus contatos, facilitar o acompanhamento de atividades para gestores, etc.</p>' +
                    '<p>O "seu tel." e o "tel. do seu cliente, fornecedor, etc." pode ser qualquer número de tel. ligado a uma linha fixa, móvel ou IP.<br><br>' +
                    'Note que a solução não exige VoIP para funcionar.</p>' +
                    'Para completar chamadas implante os exemplos de código indicados abaixo.</div>';

            html = $(html).appendTo(container);

        } else {
            html = container.find('.temp_ctn');
        }
        html.fadeIn(400);
    },
    beforeHide: function (self, container, hImage) {
        container.find('.temp_ctn').slideUp(100);
    }
});

$('.telefones').DirectcallChamarEGravar({
    cipher: cipher,
    abrir: 'direita',
    conteudo: '<strong><span style="font-size: 20px">Nós ligamos para você!</span><br><br>Como funciona este recurso:</strong>' +
    '<p>Chama o seu tel. e em seguida o tel. do seu cliente, fornecedor, etc.<br>' +
    'O seu tel. deve estar livre e ser capaz de receber uma chamada direta.</p><br>',
    containerCss: {
        minWidth: '460px',
			marginTop: '-9px'
    },
    boxAlertCss: {
        top: '0px',
        bottom: 'auto'
    },
    autoSaveEdit: true,
    mostrarTelefone: true,
    fechaPopupChamada: false,
    beforeCall: function (self, container, hImage) {
        //customizacao
        if (container.find('.temp_ctn').length < 1) {
            var html = '<div class="temp_ctn"><hr><p>Esta implementação não realiza chamadas, apenas monstra o funcionamento.</p>' +
                    '<p>Adicional as opções "Chamar" e "Chamar e gravar" este plugin fornece links como "Extrato de ligações" e "Ouvir ligação gravada" que pode melhorar o histórico dos seus contatos, facilitar o acompanhamento de atividades para gestores, etc.</p>' +
                    '<p>O "seu tel." e o "tel. do seu cliente, fornecedor, etc." podem ser qualquer número de telefone ligado à uma linha fixa, móvel ou IP.<br><br>' +
                    'Note que a solução não exige VoIP para funcionar.</p>' +
                    'Para completar chamadas adicione os exemplos de código indicados abaixo.</div>';
            html = $(html).appendTo(container);

        } else {
            html = container.find('.temp_ctn');
        }
        html.fadeIn(400);
    },
    beforeHide: function (self, container, hImage) {
        container.find('.temp_ctn').slideUp(100);
    }
});

    });
</script>

Veja como funciona com um botão de chamada:

<div class="box-limiter">
    <div class="dc_box">
        <div class="dc_title"><img src="http://directcall.com.br/chamargravar/boneco.png">CADASTRO DE CLIENTES:</div>
        <div class="dc_body">
            <span><strong>Nome:</strong> Directcall</span>
            <span><strong>Telefone:</strong> <span id="telefone"></span></span>

            <div class="letra_menor">Liga&ccedil;&otilde;es | Liga&ccedil;&otilde;es Gravadas para este contato</div>
        </div>
    </div>
</div>

Exemplo para Cadastros da sua aplicação:

<!--CODIGO HTML-->
<span><strong>Nome:</strong> Directcall</span>
<span><strong>Telefone:</strong> <span id="telefone"></span></span>

<!--CODIGO JAVASCRIPT-->
$('#telefone').DirectcallChamarEGravar({
    cipher: '123456789ABCFDEF',
    origem: '554140621860',
    abrir: 'direita',
    conteudo: '<strong><span style="font-size: 20px">Nós ligamos para você!</span><br><br>Como funciona este recurso:</strong>' +
    '<p>Chama o seu tel. e em seguida o tel. do seu cliente, fornecedor e etc.<br>' +
    'O seu tel. deve estar livre e ser capaz de receber uma chamada direta.</p><br>',
    autoSaveEdit: true,
    mostrarTelefone: true
});

Veja como funciona com múltiplos botões de chamada:

<div class="box-limiter">
	<div class="dc_box">
        <div class="dc_title"><img src="http://directcall.com.br/chamargravar/boneco.png">RELATÓRIO DE CONTAS A RECEBER:</div>
        <div class="dc_body">
            <table>
                <thead>
                <tr>
                    <th>Nome:</th>
                    <th>Telefone:</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>Directcall Telecom</td>
                    <td><span class="telefones" data-origem="4130160300"></span></td>
                </tr>
                <tr>
                    <td>Signallink Ltda.</td>
                    <td><span class="telefones" data-origem="1140621860"></span></td>
                </tr>
                <tr>
                    <td>TSC Ltda.</td>
                    <td><span class="telefones" data-origem="4130175700"></span></td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

Exemplo para Relatórios da sua aplicação:

<!--CODIGO HTML-->
<table>
    <thead>
    <tr>
        <th>Nome:</th>
        <th>Telefone:</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Directcall Telecom</td>
        <td><span class="telefones" data-origem="4130160300"></span></td>
    </tr>
    <tr>
        <td>Signallink Ltda.</td>
        <td><span class="telefones" data-origem="1140621860"></span></td>
    </tr>
    <tr>
        <td>TSC Ltda.</td>
        <td><span class="telefones" data-origem="4130175700"></span></td>
    </tr>
    </tbody>
</table>

<!--CODIGO JAVASCRIPT-->
$('.telefones').DirectcallChamarEGravar({
    cipher: '123456789ABCFDEF',
    abrir: 'direita',
    conteudo: '<strong><span style="font-size: 20px">Nós ligamos para você!</span><br><br>Como funciona este recurso:</strong>' +
    '<p>Chama o seu tel. e em seguida o tel. do seu cliente, fornecedor e etc.<br>' +
    'O seu tel. deve estar livre e ser capaz de receber uma chamada direta.</p><br>',
    autoSaveEdit: true,
    mostrarTelefone: true
});