Обратный Звонок с Уведомлением в Telegram — Скрипт Для Сайта

09/29/2020

И так, появилась как-то у меня задача: Интегрировать на сайт кнопку Обратного звонка, т.е. кнопку с возможностью оставить телефон посетителя, и чтобы ему перезвонили менеджеры. Без сторонних(платных) сервисов.

Telegram очень мощная и удобная вещь. Очень уж мне он нравится. Особенно его тема с ботами.
Поэтому было решено все эти уведомления с сайта слать именно в телеграмм.

Начнем с фронтенда.

Все супер изи. Простенькая формочка + CSS +JS.
Думаю без особого труда интегрируете в любую платформу, CMS …
Открываем главный файл шаблона сайта и прописываем стили в <head> + добавляем форму.
Стили можете запихнуть в основной файл стилей style.css или прописываем их там же, обрамляя <style></style>. Кому как удобнее.

Код CSS:


.telButton .telButton_border{border-color:#51aaac}
.telButton .telButton_background{background-color:#088789}
.telButton{z-index:90;width:60px;height:60px;opacity:.7;position:fixed;right:40px;bottom:40px;}
.telButton svg{width:40px;height:40px;position:absolute;top:50%;left:50%;margin-left:-20px;margin-top:-20px;}
.telButton:hover{opacity:1;}
.telButton .telButton_background{background-position:center center;background-size:100% 100%;z-index:5010;width:60px;height:60px;border-radius:50%;position:absolute;animation-name:pulse;animation-duration:5s;animation-iteration-count:infinite;}
.telButton .telButton_background span{display:table-cell;vertical-align:middle;} 
.telButton .telButton_background:hover{background-color:#fe9126;cursor:pointer;opacity:1;}
.telButton .telButton_border{position:absolute;top:-1px;left:-1px;width:56px;height:56px;border-radius:50%;border-style:solid;border-width:3px;animation-name:shadow;animation-duration:1.5s;animation-iteration-count:infinite;animation-timing-function:ease-out;
}
.telButton_hover{width:150px; border:3px solid #fe9126; background-color:#FFFFFF; border-radius:15px; padding:10px; margin-left:-140px; margin-top:9px; font-size:1.0em; line-height:1.2; font-family:Arial; color:#000000; display:none; opacity:0; z-index:1}
.telButton_hover.open{display:block; opacity:1;}
@keyframes pulse{
 0%{width:60px; height:60px;top:0px; left:0px }
 5%{width:66px; height:66px;top:-3px; left:-3px }
 10%{width:60px; height:60px;top:0px; left:0px }
 15%{width:66px; height:66px;top:-3px; left:-3px }
 20%{width:60px; height:60px;top:0px; left:0px }
 25%{width:66px; height:66px;top:-3px; left:-3px }
 30%{width:60px; height:60px;top:0px; left:0px }
 59%{transform:rotate(0deg);}
 60%{transform:rotate(10deg);}
 65%{transform:rotate(-10deg);}
 70%{transform:rotate(10deg);}
 75%{transform:rotate(-10deg);}
 80%{transform:rotate(10deg);}
 85%{transform:rotate(-10deg);}
 90%{transform:rotate(0deg);}
 100%{width:60px; height:60px; top:0px; left:0px }
}
@keyframes shadow{
 0%{top:0px; left:0px; width:56px; height:56px}
 100%{top:-22px; left:-22px; width:96px; height:96px}
}
.window_wrap{display:none;position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(54,54,54,0.95);text-align:center;z-index:5005}
.window_wrap.open{display:block;}
.window_wrap:after{display:inline-block;height:100%;width:0;vertical-align:middle;content: ''} 
.window_close{display: block;position: absolute;top: 10px;right: 10px;width: 18px;height: 18px;padding: 8px;border-radius: 50%;cursor: pointer;background: #088789;text-align: center;font-family: arial;font-size: 18px;line-height: 18px;color: #fff;text-decoration: none;font-weight: bold;cursor:pointer;box-sizing: content-box !important;}
.window_close:hover{background: #ff6600;}
.window{display:inline-block;width:96%;hyphens:none}
.window p{color:#fff;font-family: "Arial",sans-serif;font-size: 18px;line-height: 24px;text-align: center;text-transform: uppercase;} 
#telForm{background:#fafafa none repeat scroll 0 0;border: medium none;border-radius: 5px 0 0 5px;float: left;height: 35px;text-align: center;width: 58%;}
#telButton{background: #e03f58 none repeat scroll 0 0;border: medium none;border-radius: 0 5px 5px 0;color: #fff;cursor: pointer;float: right;height: 37px;transition: all 0.6s ease 0s;width: 40%;}
.hide{display:none}
.notify{color: #fff;text-align: center;display: inline-block;width: 100%;font-size: 18px;margin-top: 20px;font-family: arial;}

Сама Форма HTML + Javascript(православный, а не jquery) к нему.

Вставляете в конце файла, перед </body>

HTML Форма:

<div class="window_wrap" id="window-callme">
 <div class="window"><div class="window_close" id="window_close">X</div>
 <div class="frmm" id="frmm">
 <p>Оставьте ваш телефон<br/>и наш менеджер свяжется с вами В течение нескольких минут</p>
 <form id="backPhone" name="backPhone" method="post">
 <input name="phone" type="tel" id="telForm" maxlength="20" placeholder="Введите ваш телефон" required="required" autocomplete="off">
 <button id="telButton" type="submit" form="backPhone">Заказать звонок</button>
 </form>
 </div>
 <div class="notify" id="notify"> </div>
 </div>
</div>
 <div  class="telButton anim" id="callme">
 <div class="telButton_background"><span>
 <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="50.000000pt" height="50.000000pt" viewBox="0 0 50.000000 50.000000" preserveAspectRatio="xMidYMid meet"><g transform="translate(0.000000,50.000000) scale(0.100000,-0.100000)" fill="#fff" stroke="none"><path d="M100 472 c-8 -2 -27 -16 -42 -30 -59 -55 -26 -144 102 -273 87 -87 169 -139 221 -139 31 0 89 59 89 90 0 13 -20 33 -55 57 -55 36 -56 36 -89 20 l-34 -16 -56 57 c-38 38 -54 61 -50 72 18 41 15 62 -15 109 -33 52 -46 61 -71 53z m45 -74 c27 -41 27 -43 12 -71 -21 -36 -16 -46 61 -120 64 -61 73 -64 112 -43 22 13 28 11 68 -16 l44 -30 -28 -30 c-22 -22 -34 -28 -54 -23 -96 24 -300 236 -300 311 0 17 37 64 50 64 4 0 20 -19 35 -42z"/></g></svg>
 </span></div>
 <div class="telButton_hover" id="telhover" >Заказать звонок</div>
 </div>

Следом после этого вставляем такой js код:

<script>
document.getElementById("callme").addEventListener("mouseover", hovertxt);
document.getElementById("callme").addEventListener("mouseout", hovertxt);
document.getElementById("callme").addEventListener("click", window_call);
document.getElementById("window_close").addEventListener("click", window_call);
function hovertxt(){var x = document.getElementById("telhover");if (x.className === "telButton_hover") {x.className += " open";} else {x.className = "telButton_hover";}}
function window_call(){
var x = document.getElementById("window-callme");if (x.className === "window_wrap") {x.className += " open";} else {x.className = "window_wrap";}
var x = document.getElementById("callme");if (x.className === "telButton anim") {x.className += " hide";} else {x.className = "telButton anim";}}
var cc = backPhone.telForm,
    events  = ['input', 'change', 'blur', 'keyup'];
for (var i in events) {
    cc.addEventListener(events[i], formatCardCode, false);}
function formatCardCode() {
    var cardCode = this.value.replace(/[^\d]/g, '').substring(0,12);
    cardCode = cardCode !== '' ? cardCode.match(/.{1,3}/g).join(' ') : '';
    this.value = cardCode;
}
window.addEventListener("load", function () {
  function sendData() {
    if (window.XMLHttpRequest) {
        XHR = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        XHR = new ActiveXObject("Microsoft.XMLHTTP");
    }
    var FD = new FormData(form);
    XHR.addEventListener("load", function(event) {
      return_response_ok(event.target.responseText);
    });
    XHR.addEventListener("error", function(event) {
      return_response_err('Произошла ошибка. Попробуйте позже');
    });
    XHR.open("POST", location.protocol + "//" + location.host + "/callback.php");
    XHR.send(FD);
  }
  function return_response_ok(e){
	e=JSON.parse(e);
	if(e.status == 'success'){
	 document.getElementById("notify").innerHTML = e.message;
	 document.getElementById("frmm").className += " hide";
	 setTimeout(window_call, 3000);
	 }else if(e.status == 'error'){
        document.getElementById("notify").innerHTML = e.message;
    }
 }
 function return_response_err(e){
	 document.getElementById("notify").innerHTML = e;
 }
  var form = document.getElementById("backPhone");
  form.addEventListener("submit", function (event) {
    event.preventDefault();
    sendData();
  });
});
</script>

На этом с фронтэндом мы закончили. Переходим к настройке телеграмма.

Создание и Настройка Бота Telegram

Далее нам нужно создать бота который будет принимать все эти сообщения с запросами обратного звонка и отправлять их в нужный чат.

1. Создаем бота.

Иструкций на эту тему предостаточно и кому захочется копнуть глубже, Вы знаете где это делать. А здесь я вкратце опишу нужные телодвижения…:)
В поиске Telegram пишем @botfather. Открываем бота и пишем ему:
/start.
Он вывалит свои команды. Нам же нужно:
/newbot
Далее, Следуя подсказкам создаем своего бота. По итогу вам должно выдать что-то типа того:

Done! Congratulations on your new bot…
…..
Use this token to access the HTTP API:
…..

Из этого сообщения нам будет нужен этот токен. Запишите его куда-то.

2. Создаем Группу(Канал)

Теперь нам необходимо создать чат куда все эти заявки будут поступать. Ну тут даже как бы и объяснять особо нечего…

  • Жмем в телеграмм «Создать Группу» ( ну или «Создать Канал» тут уж зависит от цели и кому как удобнее будет…)
  • Как-то по умному называем ее.. ну и добавляем картинку.
  • Теперь добавляем в группу(канал) нашего бота. Жмем кнопку «Добавить участников», пишем имя бота и добавляем его.
  • Добавляем в группу участников которые будут обрабатывать эти звонки.

Ремарка: Делайте Частный чат/канал, чтобы никто не мог без вашего ведома в него добавиться или просматривать его.

Следующий этап. Теперь нам нужно получить ID нашего чата.

Для этого нужно написать сообщение в созданную группу.
Затем вспоминаем токен из пункта 1 и переходим: 

https://api.telegram.org/bot<BOTToken>/getUpdates

где <BOTToken> — это тот самый наш токен.
Ищем значение «id» из объекта «chat». Это и будет нужный идентификатор чата.
Для групповых чатов он будет со знаком минус.

Теперь у нас есть все, чтобы перейти к следующему этапу.

Переходим к Бекэнду

Создадим файл callback.php в корне вашего сайта и разместим в нем следующий код.

В нем необходимо указать свои TELEGRAM_TOKEN и TELEGRAM_CHATID.
Скрипт бекэнда для отправки сообщений в чат:

<?php	
	// сюда нужно вписать токен вашего бота	
	define('TELEGRAM_TOKEN', '111111111:XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX');	
	// сюда нужно вписать ваш внутренний айдишник	
	define('TELEGRAM_CHATID', '-0000000000000');

	function message_to_telegram($text) {
		$ch = curl_init();
		curl_setopt_array(
			$ch,
			array(
				CURLOPT_URL => 'https://api.telegram.org/bot' . TELEGRAM_TOKEN . '/sendMessage',
				CURLOPT_POST => TRUE,
				CURLOPT_RETURNTRANSFER => TRUE,
				CURLOPT_TIMEOUT => 10,
				CURLOPT_POSTFIELDS => array(
					'chat_id' => TELEGRAM_CHATID,
					'text' => $text,
					'parse_mode' => 'html',
				),
			)
		);
		curl_exec($ch);
	}

if(isset($_POST['phone'])){
	$phone			=	str_replace(" ","",$_POST['phone']);
	$httpReferer	=	isset($_SERVER['HTTP_REFERER']) ? $_SERVER['HTTP_REFERER'] : null;
	if (strlen($phone) >=10){
		if (substr( $phone, 0, 1 )=== "0" || substr( $phone, 0, 2 )=== "38" )	{
			$message = "<i>Перезвоните мне:</i>\n\n<b>$phone</b>\n\nОтправлено со страницы:\n$httpReferer";
			message_to_telegram($message);
					$response['status'] = 'success';
 			$response['message'] = "Спасибо за Ваше обращение.<br> В течение нескольких минут с Вами свяжется наш менеджер.";
		}else{
			$response['status'] = 'error';
 			$response['message'] = "<span style='color:yellow'>Возможно, Вы не верно ввели номер телефона.<br> Номера телефонов Украины должны начинаться с 0 или 380<br>Проверьте и повторите попытку</span>";
		}
	}else{
			$response['status'] = 'error';
 			$response['message'] = "<span style='color:yellow'>Возможно, Вы не верно ввели номер телефона.<br>Проверьте и повторите попытку.<br>*Подсказка:Номер должен содержать в себе не менее 10 знаков(с кодом города или оператора).<br>Пример: 099 999 99 99</span>";
	}
			header('Content-type: application/json');
		echo json_encode($response);}

На этом все, интеграция скрипта обратного звонка окончена.
Если я, что-то упустил задавайте вопросы в комментариях, т.к. это решение делал давненько, мог что-то и подзабыть.

Если Вам был полезен этот скрипт, не стесняйтесь поставить обратную ссылку на него. Вам все равно, а мне приятно:)

Запись опубликована в рубрике: Разное.

Смотрите также:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Комментарии