ќбсудим вашу задачу в Telegram - чате?

ћерион Ќетворкс

 оллбэк сервисы созданы дл€ роста звонков. ѕредлага€ перезвонить, вы создаете комфортные дл€ клиента услови€ потенциального диалога, и, как следствие Ц продажи. »сследовани€ показывают, что наличие callback на сайте обеспечивает до 10% рост звонков.

¬ статье мы хотим рассказать, как сделать callback сервис на вашем сайте с помощью IP Ц ј“— Asterisk не прибега€ к оплате услуг попул€рных сервисов Ц то есть бесплатно.  акие плюсы показанного ниже решени€ мы бы хотели отметить:

  1. ƒизайн шаблона - сам HTML Ц темплейт использует простой CSS - дизайн в двухцветной гамме. ћен€йте цвета и сделайте шаблон гармоничным дл€ своего сайта, чтобы не вызвать у клиента диссонанс и отторжение;
  2. ¬рем€ перезвона - по нашим подсчетам, обещать клиенту перезвон через 10 секунд вполне реально. ѕравда, это в случае, если оператор не зан€т (вы можете кидать вызов на группу) ;

ѕриступаем к настройке?


Prerequisites

Ќа нашем лабораторном стенде, в рамках которого была написана эта стать€, соблюдены следующие услови€:

  1. WEB Ц сервер, на котором развернут сайт имеет сетевую св€зность с сервером IP Ц ј“— Asterisk и находитс€ в рамках одной сети (VLAN);
  2. WEB Ц сервер поддерживает PHP и Javascript;

≈сли ваш web Ц сайт находитс€ на платном хостинге, то в файл callback.js в параметре URL вы можете указать внешний линк на callback.php файл, например путем проброса портов (внешний_IP:порт/callback.php). ¬ажно отметить, что мы не рекомендуем такой путь, так как это не безопасно.

ѕредварительно, нам необходимо настроить AMI (Asterisk Manager Interface). ѕодключаемс€ по SSH к серверу IP Ц ј“— Asterisk и открываем файл настройки AMI:

vim /etc/asterisk/manager.conf

ƒалее провер€ем, чтобы в секции [general] у нас было выставлено enabled = yes и остальные параметры, как показано ниже:

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

ƒобавл€ем нового пользовател€. ƒл€ этого, в открытый файл внесите следующую конструкцию:

[им€_пользовател€]
secret = пароль
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

¬ам нужно помен€ть следующие параметры:

  • им€_пользовател€ - создайте им€ дл€ юзера. ” нас будет callback;
  • пароль - создайте криптостойкий пароль, с помощью сервисов онлайн генерации, например. ¬ нашей лабы мы сделали простой пароль Ц P@ssword;
  • permit - укажите вашу подсеть. ¬ указанной подсети должен находитс€ IP Ц адрес, с которого скрипт будет обращатьс€ к AMI. Ќаш скрипт будет расположен на самом хосте Asterisk, поэтому, мы указываем его IP (192.168.1.7/32);

Ќастройка скриптов

¬ схеме будет участвовать 3 файла:

  1. index.php - файл, в котором будет содержатьс€ наша форма (HTML + CSS). ‘айл находитс€ на web - сервере;
  2. callback.js - небольшой javascript, который будет возвращать сообщение о вызове абоненту или об ошибке. ‘айл находитс€ на web - сервере;
  3. callback.php - php скрипт, который будет лезть в AMI Asterisk и кидать Originate дл€ коллбэка;

ѕредварительно, откройте консоль сервера и создайте директорию, в которой будет хранитьс€ файл callback.php:

mkdir /var/www/html/callback

“еперь формируем файл callback.php (комментарии по коду):

<?php
$strhost = "192.168.1.7"; # укажите IP Ц адрес вашего Asterisk. Ћибо localhost/127.0.0.1, если скрипт загружен на сервер Asterisk;
$strport = "5038"; # AMI  - порт, как настроено в секции [general] файла manager.conf;
$timeout = "10";
$num = $_POST['phone']; # получаем номер абонента, который хочет получить callback; 
$name = 'Callback - '.$_POST['name'].''; # формируем строку, которую будем выводить на дисплей оператору, который будет осуществл€ть коллбэк. ќна будет состо€ть из двух параметров: 1 Ц callback, чтобы оператор пон€л, что это не вход€ща€, а потенциально исход€ща€ активность и 2 Ц им€ абонента;
$cid = "111"; # экстеншен оператора;
$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"); # укажите им€ созданного пользовател€ в файле manager.conf вместо callback; fputs($sconn, "Secret: P@ssw0rd\r\n"); # укажите пароль созданного пользовател€ в файле manager.conf вместо 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; } ?>
ѕосле того как скачаете файл по ссылке ниже, измените его расширение с .txt на .php;
—качать callback.php

—охраните файл и загрузите его в директорию /var/www/html/callback. “еперь переходим в консоль сервера IP Ц ј“— Asterisk и даем следующие команды:

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

“еперь подключаемс€ к веб Ц серверу (хостингу). ” нас у web Ц сервера IP Ц адрес 192.168.1.8. ‘ормируем файл callback.js:

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 = '
”же звоним :)
'; } else { result = msg; } $('#note').html(result); } }); return false; }); });

ќбратите внимание на параметр url: "http://192.168.1.7/callback/callback.php", . ¬ам нужно заменить IP Ц адрес на адрес вашего Asterisk.

ѕосле того как скачаете файл по ссылке ниже, измените его им€ с callbackjs на callback, а расширение с .txt на .php;
—качать callback.js

«агружаем файл в директорию /callback в корне веб Ц сервера. ƒвигаемс€ вперед. ‘ормируем файл формы. Ќиже мы приведем только HTML код, без CSS, так как это сильно увеличит длину статьи. ѕолную версию файла вы можете скачать по ссылке, котора€ будет после кода:

¬ корне WEB Ц сервера создайте директорию callback. “уда загрузить сформированный ранее callback.js и скачайте в интернете jquery-1.11.3.min.js Ц он так же необходим дл€ корректной работы. ‘орма следующа€:

<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>ƒавайте поговорим?</h3>
    <h4>ѕерезвоним через 10 секунд.</h4>
	<div id="note"></div>
    <fieldset>
      <input placeholder="¬аше им€" type="text" name="name">
    </fieldset>
    <fieldset>
      <input id="phone" placeholder="Ќомер телефона в формате 89123456789" type="text" name="phone">
    </fieldset>
    <fieldset>
      <button type="submit" name="submit" id="contact-submit">∆ду звонка!</button>
    </fieldset>
  </form>
</div>
ѕосле того как скачаете файл по ссылке ниже, измените его расширение с .txt на .php;
—качать index.php

 идаем файл index.php в директорию /callback в корне веб Ц сервера.

»так, подводим итоги. ” нас имеетс€:

  1. ‘айл callback.php загружен в директорию /var/www/html/callback на сервере IP Ц ј“— Asterisk;
  2. ‘айл callback.js загружен в директорию /callback в корне web - сервера;
  3. ‘айл index.php загружен в директорию /callback в корне web - сервера;

¬ыполн€ем проверку. ѕерехожим на URL формы и указываем контактные данные:

WEB Ц callback на Asterisk своими руками

Ќа столе оператора звонит телефон:

веб - коллбэк на јстериск

„итаем им€, поднимаем трубку Ц начинаетс€ вызов мобильного телефона абонента.


ѕолезна ли ¬ам эта стать€?

–аз в неделю мы отправл€ем дайджест с самыми интересными стать€ми.

P.S. ≈сли укажите свою дату рождени€, то мы об€зательно ¬ас поздравим и подарим небольшой подарок :)

Ќажима€ на кнопку "ѕодписатьс€", вы даете согласие на обработку своих персональных данных