You have some basic understanding of PHP/Asterisk/Javascript
You know your way around the freepbx layout.
What we need to do on the Asterisk side is login to web admin section and create a new queue.
With that queue leave all the static agents blank, or else the image will display constantly even when you don't want to take calls.
Then create a directory in web(apache/httpd) directory which we will use for access from the public website. in that directory we are going to have a few files:
index.php ( the php script to do the calling )
callingscript.js ( the main chunk of javascript )
callback.png ( the image to display )
We are only using 1 image, i.e. an online image the code is very easy to change to include an offline image if you want. In this example everything will reference
http://call.pracapps.com.au/callback and will live in /var/www/html/callback
First lets start out with index.php
- Code: Select all
<?
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: POST, GET");
$queue = '7';// change this to the queue you have created on your system
$asterisk_location = '/usr/sbin/asterisk';
$command = "$asterisk_location -rx 'queue show $queue'";
if( !empty($_REQUEST['callback_number']) ) // this is the do the call part
{
require_once('/var/lib/asterisk/agi-bin/phpagi-asmanager.php');
$ami = new AGI_AsteriskManager();
$ami->connect();
$ami->originate("Local/$queue@from-internal", $_REQUEST['callback_number'], "from-internal", "1");
die('Your Call has been placed and your phone should be ringing shortly.');
} else { // display the javascript
exec($command, $output);
if(trim($output[1]) == 'Members:')
{
echo file_get_contents('http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js');
echo file_get_contents('http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js');
include('callingscript.js');
}
}
?>
In the index.php file you will need to edit line 4:
$queue = '7'; // change this to the queue you have created on your system
Then we have the callingscript.js, and just change line 1
- Code: Select all
base_url = 'http://call.pracapps.com.au/callback';
$('#callback').append(
$('<div></div>')
.append(
$('<img></img>')
.attr( { src: base_url + '/callback.png' } )
.click(function() { $('#callback-details').dialog('open'); } )
)
.append(
$('<div></div>')
.attr( { id: 'callback-details', title: 'Call Me Now' } )
.append(
$('<span>Please enter your number</span><br>')
)
.append(
$('<input></input>')
.attr( { name : 'callback_number', size : '20', id: 'callback_number' } )
)
)
);
var link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/themes/base/jquery-ui.css';
document.head.appendChild(link);
$(function() {
$('#callback-details').dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
" Call Me ": function() {
$.ajax({
url: base_url+'/index.php',
data:{ callback_number: $('#callback_number').val() },
dataType: "text",
success: function(data){
$('#callback-details').dialog('close');
$('#callback').append(
$('<div>'+data+'</div>')
.attr( { id: 'callback-response', title: 'Your Call Status' } )
);
$('#callback-response').dialog({
height: 300,
width: 350,
});
}
});
$(this).dialog('close');
},
" Cancel ": function() {
$(this).dialog('close');
}
}
});
});
Then all we need to is log into queue from an extension to make it activate it. in the above example on a standard freepbx system it would be 7* and then 7** when their shift is finished.
I'm afraid I do not understand any of it, I am still a newbie at this 