Telegram - . ? :)

Handmade WEB callback on Asterisk

Do you want me to call you back?

Merion Networks

Callback services were created to increase the amount of calls. When you offer callback, you create comfortable conditions for the potential dialog with the client, and, consequently sales. Research shows, that callback existence guarantee 10% call growth.

In the article we want to show you how to create callback service on your website with help of Asterisk without any money. What are pros of this solutions we want to underline?

  1. Design template - HTML template itself is using simple CSS design with 2 colors. Change colors and make the template suitable for your website, so the client will not be irritated;
  2. Callback time - after we done some tests, we found out that it is possible to offer callback to the client after 10 seconds (only if operator is not busy, but you can send the call to the ring group or to the queue);

Lets start


Prerequisites

On our lab server we have following parameters:

  1. )Web-Server, where we have website installed has network connectivity with Asterisk IP-PBX and located within one VLAN;
  2. WEB server supports PHP & Javascript;

If your website is located on paid hosting, then you can state external link to callback.php in callback.js in URL parameter. But keep in mind that its not secure.

Before you need to set up AMI (Asterisk Manager Interface). Connect to Asterisk SSH and open AMI settings file:

vim /etc/asterisk/manager.conf

Then check the [general] section so there is enabled = yes and everything else as shown below:

[general]
enabled = yes
port = 5038
bindaddr = 0.0.0.0
displayconnects=no ;only effects 1.6+

. To do so, in opened file add following string Add new user.:

[username]
secret = password
deny=0.0.0.0/0.0.0.0
permit=192.168.1.7/255.255.255.255
read = system,call,log,verbose,command,agent,user,config,command,dtmf,reporting,cdr,dialplan,originate,message
write = system,call,log,verbose,command,agent,user,config,command,dtmf,reporting,cdr,dialplan,originate,message

You need to change following parameters:

  • username - create a name for the user. You will have callback;
  • password - create sophisticated password, with password generation services. In our lab we created simple password P@ssword;
  • permit - state your subnet. In this subnet there should be IP - address from which AMI will be reached.Our script will be located on Asterisk itself, so well state its IP address: (192.168.1.7/32);

Script setup

In our scheme there will be three files:

  1. index.php - file with our HTML + CSS form. File is located on the web - server;
  2. callback.js - small javascript, wich is gonna return the either the message about the call to subscriber or the message about an error. File is located on the web - server;
  3. callback.php - php script, which should reach AMI of Asterisk and send Originate for the callback;

Initially, you need to open server console and create the directory with callback.php file:

mkdir /var/www/html/callback

Lets create the callback.php file (comments are included in code itself):

<?php
$strhost = "192.168.1.7"; # state the IP  address of your Asterisk. Or state the localhost/127.0.0.1 address, if script is loaded on Asterisk server;
$strport = "5038"; # AMI  - port, as shown in [general] section of the manager.conf file;
$timeout = "10";
$num = $_POST[<phone<]; # getting the subscribers number who wants to get the callback; 
$name = <Callback - <.$_POST[<name<].<<; # create a string, which is gonna see the callback receiving operator. There are two parameters, 1 - that its inbound call from callback and the second one is caller name;
$cid = "111"; # operators extension;
$c="from-internal";
$p="1";
$errno=0 ;
$errstr=0 ;
$sconn = fsockopen($strhost, $strport, &$errno, &$errstr, $timeout) or die("Connection to $strhost:$strport failed");
if (!$sconn) { echo "$errstr ($errno)
\n"; } else { echo <OK<; fputs($sconn, "Action: login\r\n"); fputs($sconn, "Username: callback\r\n"); # state the name of created user in manager.conf instead of callback; fputs($sconn, "Secret: P@ssw0rd\r\n"); # state the password of created user in manager.conf instead of P@ssw0rd; fputs($sconn, "Events: off\r\n\r\n"); usleep(500); fputs($sconn, "Action: Originate\r\n"); fputs($sconn, "Channel: SIP/$cid\r\n"); fputs($sconn, "Callerid: $name\r\n"); fputs($sconn, "Timeout: 15000\r\n"); fputs($sconn, "Context: $c\r\n"); fputs($sconn, "Exten: $num\r\n"); fputs($sconn, "Priority: $p\r\n"); fputs($sconn, "Async: yes\r\n\r\n" ); fputs($sconn, "Action: Logoff\r\n\r\n"); usleep (500); $wrets=fgets($sconn,128); fclose($sconn); exit; } ?>
After you downloaded the file change its extension from .txt to .php;
Download callback.php

Save the file and upload it to the /var/www/html/callback directory. Now go Asterisk console and execute the following commands:

chmod 755 /var/www/html/callback/callback.php 
dos2unix /var/www/html/callback/callback.php 

Now connect to the web-server. Our web - server has and 192.168.1.8 IP - address. Create the callback.js file:

jQuery(document).ready(function($) {
$("#contact").submit(function() {
var str = $(this).serialize();
var delay = 3000;
$.ajax({
type: "POST",
url: "http://192.168.1.7/callback/callback.php",
data: str,
success: function(msg) {
if(msg == <OK<) {
result = <
We are already calling :)
<; } else { result = msg; } $(<#note<).html(result); } }); return false; }); });

Pay attention to the url: "http://192.168.1.7/callback/callback.php", parameter. You need to change the IP address to your Asterisk IP - address.

After you downloaded the file via the link below, change its name from callbackjs to callback, and its extension from .txt to .php;
Download callback.js

Download the file to /callback directory in web servers root folder. Moving forward. Create the form. Below is just HTML code without any CSS, as it significantly will increase the article size. The full fil you can download from the link below:

WEB callback. In the root folder of WEB server create the callback directory. Put there created before callback.js and download jquery-1.11.3.min.js from the Internet. Form is below::

<script type="text/javascript" src="http://merionet.ru/callback/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://merionet/callback/callback.js"></script>
<div class="container">  
  <form id="contact" action="">
    <h3>Lets talk?</h3>
    <h4>Well call you back in 10 seconds.</h4>
	<div id="note"></div>
    <fieldset>
      <input placeholder="Your name" type="text" name="name">
    </fieldset>
    <fieldset>
      <input id="phone" placeholder="Your phone number in 89123456789 format" type="text" name="phone">
    </fieldset>
    <fieldset>
      <button type="submit" name="submit" id="contact-submit">Waiting for the call!</button>
    </fieldset>
  </form>
</div>
After you download the file via the link below, change its extension from .txt to .php;
Download index.php

Put the file index.php into /callback directory in root folder of the server.

So, lets sum up. We have:

  1. File callback.php which is uploaded to /var/www/html/callback on Asterisk server;
  2. File callback.js which is uploaded to /callback directory in web servers root folder;
  3. File index.php which is uploaded /callback directory in web servers root folder;

Lets check. Go to the form URL and put your contact details:

 Handmade web - callback Asterisk

Operators phone is ringing:

 web - callback Asterisk

Read the name, pick up the phone and the call is right about to start.


?