Обратный звонок с сайта

Обратный звонок для сайта

Зачастую бывает, что нет возможности использовать библиотеки jQuery или Mootools из за их несовместимости. При этом хочется, чтобы на сайте была всплывающая форма обратного звонка.

Это вполне выполнимо по средствам html + php + css.

Данный пример хорош тем что он абсолютно не привязан ни к какому движку, принцип работы действует на базовых компонентах. При необходимости скрипт обратного звонка можно дополнить дополнительными полями. Вид окна и формы также легко настраивается в файле CSS.

Исходный код обратного звонка

Код кнопки

<a href="#modal" class="button openModal">Заказать обратный звонок</a>

Код Исходный код формы заказа обратного звонка

<div id="modal" class="modal"> <div> <div class="text" align="center"> <div id="blok_tel"> <form action="" method="post" class="form1"> ЗАКАЗ ОБРАТНОГО ЗВОНКА <input type="text" name="tel" class="inputbox" value="Номер телефона с кодом" onfocus="(this.value == '0123456789') && (this.value = '')" onblur="(this.value == '') && (this.value = '0123456789')"> <input type="submit" class="button" name="submit_tel"> </form> <?if(isset($_POST["submit_tel"])) { $email = 'ваша_почта@yandex.com'; /* Отправляем email */ mail($email, "Заказ обратного звонка на сайте …", "\n Посетитель заказал обратный звонок! \n Телефон : ".$_POST['tel']." "); echo 'Заявка принята!'; } ?> </div> </div> <a href="#close" title="Закрыть">Закрыть</a> </div> </div>

CSS таблица стилей для всплывающего окна

/* Контейнер */ .modal { /* Слой перекрытия */ position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 10000; /* Трансформации прозрачности при открытии */ -webkit-transition: opacity 500ms ease-in; -moz-transition: opacity 500ms ease-in; transition: opacity 500ms ease-in; /* Скрываем изначально */ opacity: 0; pointer-events: none; } /* Показываем модальное окно */ .modal:target { opacity: 1; pointer-events: auto; } /* Содержание */ .modal > div { width: 300px; background: #ffffff; position: relative; margin: 10% auto; /* По умолчанию минимизируем анимацию */ -webkit-animation: minimise 500ms linear; /* Придаем хороший вид */ padding: 30px; -moz-border-radius: 7px; border-radius: 7px; -webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9); -moz-box-shadow: 0 3px 20px rgba(0,0,0,0.9); box-shadow: 0 3px 20px rgba(0,0,0,0.9); text-shadow: 0 1px 0 #fff; } /* Изменяем анимацию при открытии модального окна*/ .modal:target > div { -webkit-animation-name: bounce; } .modal h2 { font-size: 36px; padding: 0 0 20px; } @-webkit-keyframes bounce { 0% { -webkit-transform: scale3d(0.1,0.1,1); -webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9); } 55% { -webkit-transform: scale3d(1.08,1.08,1); -webkit-box-shadow: 0 10px 20px rgba(0,0,0,0); } 75% { -webkit-transform: scale3d(0.95,0.95,1); -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.9); } 100% { -webkit-transform: scale3d(1,1,1); -webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9); } } @-webkit-keyframes minimise { 0% { -webkit-transform: scale3d(1,1,1); } 100% { -webkit-transform: scale3d(0.1,0.1,1); } } /* Ссылка на кнопку Закрыть */ .modal a[href="#close"] { position: absolute; right: 0; top: 0; color: transparent; } /* Сбрасываем изменения */ .modal a[href="#close"]:focus { outline: none; } /* Создаем кнопку Закрыть */ .modal a[href="#close"]:after { content: 'X'; display: block; /* Позиционируем */ position: absolute; right: -10px; top: -10px; width: 20px; padding: 1px 1px 1px 2px; /* Стили */ text-decoration: none; text-shadow: none; text-align: center; font-weight: bold; background: #000; color: #ffffff; border: 3px solid #ffffff; -moz-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); box-shadow: 0 1px 3px rgba(0,0,0,0.5); } .modal a[href="#close"]:focus:after, .modal a[href="#close"]:hover:after { -webkit-transform: scale(1.1,1.1); -moz-transform: scale(1.1,1.1); } .modal a[href="#close"]:focus:after { outline: 0px solid #000; } /* Открываем модальное окно */ a.openModal { } a.openModal:hover, a.openModal:focus { } .modal .modal_title { display: block; text-align: center; font-size: 22pt; }

Так как базовым направлением является создание сайтов с нуля, предлагаем создание авторских сайтов с удобным функционалом, для ведения бизнеса в интернете.

Что это?

Наш сервис представляет собой механизм взаимодействия менеджера и клиента с помощью заказа звонка на сайте. В отличие от других подобных сервисов, мы позиционируем себя как решение для малого и среднего бизнеса. Мы не берем плату за использование сервиса, не снимаем лишние минуты с каждого звонка, не навязываем подчас ненужные функции. 

Мы делаем звонки клиентам! 

Наши преимущества:

Посекундно
Вы оплачиваете разговоры с точностью до секунды

Не загружает сайт
Быстрая скорость работы виджета

Самые дешевые звонки
Стоимость звонков минимальная

Бесплатный сервис
Вы оплачиваете только фактические разговоры

 

Зарегистрироваться

Кнопка заказать звонок для сайта

Функциональный скрипт на сайт — «Заказать обратный звонок».

Полноценное демо можно посмотреть на главной странице сайта:
https://web-ptica.ru

Если вы хотите подключить — кнопку заказать обратный звонок, без абонентской платы в Нижнем Новгороде, тогда переходите сюда.

Решил оставить комментарии для следующего сайта, чтобы было попроще делать красивый обратный звонок с удобной маской для ввода телефонного номера:

Для получения красивого всплывающего модального окна будем использовать плагин jquery — fancybox. Скачать минимум файлов для работы.

Джаваскрипт код — вставляем между head в шаблоне.

HTML код — вставляем в самый низ шаблона перед /body

<div id=»call» class=»modalbox-wrap»> <div class=»form-valid»> <form id=»contact» method=»post» action=»/web-ptica.ru.php»> <div class=»popup-title»>Заказ звонка</div> <input type=»text» id=»form_name» name=»name» placeholder=»Имя*» required /> <input type=»text» id=»form_phone» name=»phone» placeholder=»Телефон*» /> <!— <input type=»text» id=»mess» name=»mess» placeholder=»Комментарий» /> —> <div class=»b5-captcha»> <div id=»recaptcha2″ ></div> </div> <input type=»submit» class=»btn» value=»заказать звонок» /> </form> </div> </div>

PHP файл с названием «web-ptica.ru.php» кладем его в корень сайта с правами 644. Проставляем адреса страниц, куда будет ссылаться проверка отправлено сообщение или нет, указываем почту, куда будут приходить письма.

<?php function change_input_text_mini ($text=»){ return htmlspecialchars( ( str_replace(chr(0), », $text) )); } # Минимальная очистка входящего текста — нет mysql_escape_string $name = isset($_POST[‘name’])?change_input_text_mini($_POST[‘name’]):»; $phone = isset($_POST[‘phone’])?change_input_text_mini($_POST[‘phone’]):»; $mess = isset($_POST[‘mess’])?change_input_text_mini($_POST[‘mess’]):»; $result = 0; $to = «Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.»; //ВАША ПОЧТА $subject = «Заявка с сайта!»; $text = «\nИмя — $name Телефон — $phone Комментарий — $mess «; $header.= «Content-type: text/html; charset=utf-8\r\n»; $header .= «MIME-Version: 1.0\r\n»; $sending = mail($to, $subject, $text, $header); if($sending) $result = 1; //echo $result; if($result == 1) { header(‘Location: Страница с сообщением об успешной доставке’); }else{ header(‘Location: Страница с сообщением о неудачной доставке’); } ?> CSS код — вставляем в стили своего шаблона. /* Обратный звонок — начало*/ .modalbox-wrap { padding: 45px 55px 40px; width: 470px; } .popup-title { font-size: 36px; color: #787878; font-weight: 300; text-transform: uppercase; line-height: 38px; padding: 0 0 25px; } .modalbox-wrap p { font-size: 16px; color: #000; line-height: 24px; float: none; } .modalbox-wrap ul { padding: 0 0 35px; } .modalbox-wrap ul li { font-size: 16px; color: #000; line-height: 24px; padding: 0 0 0 17px; position: relative; } .modalbox-wrap ul li:after { width: 4px; height: 4px; content: ‘ ‘; border-radius: 50%; background: #ffa200; position: absolute; left: 0; top: 10px; } #call input[type=»text»] { height: 35px; background: #fff; width: 97%; padding: 0 0 0 3%; font-size: 16px; color: #000; font-family: ‘FiraSans’; margin: 0 0 13px; border: 1px solid #dddddd; } #call input[type=»submit»] { width: 330px; cursor: pointer; height: 45px; color: #fff; border-top: 3px solid #89e5f7; box-shadow: 0 2px 2px rgba(0,0,0,0.82); text-align: center; font-size: 24px; text-transform: uppercase; background: #02bbdd; background: -moz-linear-gradient(top, #02bbdd 0%, #018bae 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #02bbdd), color-stop(100%, #018bae)); background: -webkit-linear-gradient(top, #02bbdd 0%, #018bae 100%); background: -o-linear-gradient(top, #02bbdd 0%, #018bae 100%); background: -ms-linear-gradient(top, #02bbdd 0%, #018bae 100%); background: linear-gradient(to bottom, #02bbdd 0%, #018bae 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#02bbdd’, endColorstr=’#018bae’,GradientType=0 ); border: none; } #call input[type=»submit»]:hover { /*border-color: #ffac30;*/ background: #ffac30; background: -moz-linear-gradient(top, #ffac30 0%, #f0ae30 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffac30), color-stop(100%, #f0ae30)); background: -webkit-linear-gradient(top, #ffac30 0%, #f0ae30 100%); background: -o-linear-gradient(top, #ffac30 0%, #f0ae30 100%); background: -ms-linear-gradient(top, #ffac30 0%, #f0ae30 100%); background: linear-gradient(to bottom, #ffac30 0%, #f0ae30 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ffac30′, endColorstr=’#f0ae30′,GradientType=0 ); } .b5-left input[type=»text»].error, #call input[type=»text»].error { border: 1px solid #f00; } .b5-captcha{ margin-bottom: 10px; } #call {display:none;} .zakaz-zvonka{ width: 200px; height: 30px; background: #FE1200; text-align: center; font: 17px/30px georgia,arial,helvetica,serif; margin: 15px 0 0 3px; } .zakaz-zvonka:hover{ width: 200px; background: #F39200; text-align: center; font: 17px/30px georgia,arial,helvetica,serif; } .zakaz-zvonka a{ text-decoration: none; color: white; height: 100%; display: block; } /* Обратный звонок — конец*/

Последний штрих — вставляем саму кнопку на сайт.

<div class=»zakaz-zvonka»><a class=»vrvzakaz modalbox» href=»#call»>Обратный звонок</a></div>

Наслаждаемся корректной работой.

Как работает обратный звонок, в двух словах?

Посетитель сайта вводит свой номер телефона в окне обратного звонка, затем JivoSite дозванивается одновременно до всех сотрудников, у которых включен прием звонков. Тот, кто первый поднимет трубку, соединяется с клиентом. Обычно, это занимает не более 20 секунд. После того, как оператора соединили с клиентом, они могут общаться в чате.

Как установить на мой сайт?

Если вы уже используете JivoSite на вашем сайте – просто включите обратные звонки в панели управления. Если на вашем сайте не установлен JivoSite, зарегистрируйтесь и установите код согласно инструкции.

Как настраиваются правила появления формы звонка?

В JivoSite гибкие настройки Обратного звонка. Укажите, при каких условиях звонки должны сработать, например, количество просмотренных страниц и время на сайте. Таким образом, вы можете настроить разные условия появление окна звонка и увеличить его эффективность.

Как менеджер узнает, что идет звонок с сайта?

После поднятия трубки, перед соединением с клиентом, сотрудник услышит голосовое уведомление о том, что он принял звонок с сайта. Когда вы получите звонок, приложение JivoSite автоматически откроется на компьютере, и вы увидите детальную информацию о том, кто звонит. Например, откуда посетитель пришел на сайт, из какого он города и какие страницы сейчас просматривает.

Сколько менеджеров могут одновременно принимать звонки?

Вы можете отметить произвольное количество сотрудников для приема входящих звонков, однако одновременный дозвон будет производиться не более, чем по 9 номерам. Если для какого-то сайта вы назначите более 9 сотрудников для приема звонков, то при каждом звонке из них будет выбрано 9 номеров случайным образом, и на них будет идти дозвон.

В каких регионах работает услуга?

Обратные звонки работают по всему миру!

Как тарифицируются обратные звонки?

Звонки тарифицируются поминутно. Количество звонков не считается. Чтобы начать пользоваться звонками, необходимо пополнить баланс на 500 рублей, если вы физическое лицо, и на 3000 рублей, если юридическое. Переадресация на городские и мобильные телефоны оплачивается отдельно.

Звонки оплачиваются отдельно от чата?

Да, обратный звонок оплачивается отдельно от лицензии на профессиональную версию чата. Вы можете пополнить баланс звонков и приобрести профессиональную лицензию чата на странице тарифов.

Что делать с телефонными хулиганами?

Вы можете заблокировать хулиганов по номеру телефона и по IP-адресу. Для этого, откройте «хулиганский» звонок в журнале и нажмите кнопку «Блокировать».

Где посмотреть журнал звонков?

Раздел «Журнал звонков» в панели управления. Вы можете отфильтровать звонки в общем списке, выбрав «Показывать звонки» в строке фильтра.

Как совместить активные приглашения в чат и предложения обратного звонка?

Чат лучше подходит для сопровождения клиента по сайту и ненавязчивого оказания помощи в выборе. Телефонный разговор же лучше подходит для активного завершения сделки. Мы рекомендуем настроить чаты и звонки так, чтобы на этапе изучения вашего сайта отображалось приглашение в чат, а предложение обратного звонка появлялось при приближении к покупке (например, перемещение товара в корзину или переход к просмотру корзины), либо при появлении признаков ухода с сайта (например, если указатель мыши пересекает верхнюю границу экрана после просмотра нескольких страниц).

Сервис LeadBack, созданный в 2014 году, предоставляет владельцам онлайн-магазинов, платных сервисов метод увеличения конверсии и продаж за счет системы обратных звонков посетителям сайта с учетом их интересов – просмотр определенных разделов и страниц ресурса, клики по ссылкам, переходы.

LeadBack – возможности и инструменты

Владельцам интернет-ресурсов предлагается интегрировать в сайты виджет обратных звонков со следующими настройками:

• Добавление мобильных и городских номеров телефонов менеджеров для общения с посетителями сайта;
• Установка графика работы отдела продаж – дни недели и время работы;
• Фиксация звонков в нерабочее время;
• Включение плавающей кнопки «Телефон» на сайте;
• Опция – один звонок одному клиенту;
• Установка времени до звонка в виджете (обратный отсчет);
• Email для получения отчетов по звонкам за прошедший день.

Сервис LeadBack поддерживает отправку смс и интегрирование с CRM-системами: amoCRM, Битрикс24, Мегаплан.

Результаты работы с LeadBack

Владельцы продающих площадок получат инструмент повышения конверсии и увеличения продаж.

Виджет LeadBack отследит действия посетителя на сайте, определит его интересы – просмотр определенных товарных категорий, возврат на конкретные страницы ресурса, переход по ссылкам и предложит пользователю получить обратный звонок от менеджера.

Система  организует дозвон  в течение 27 сек. до потенциального клиента и менеджер, предложив специальные варианты покупки: скидки, бонусы, продаст товар. Кроме этого, на номер пользователя отправляются уведомления с рекламными предложениями по новым товарам, проводимым акциям, что мотивирует его на новые покупки.

Как подключить виджет LeadBack

Сервисом предоставляется тестовый пакет с 20 минутами связи. Для дальнейшего использования виджета необходимо оплатить тарифный план.

Настроить виджет: ввести урл сайта и номера менеджеров, настроить график работы и указать почту для отчетов.

В дополнительных настройках включить или отключить опции: ловить звонки и плавающая кнопка, прием звонков из СНГ и время на счетчике виджета и.т.д.

Далее нажать «Виджеты» – «Настройки» – «Код виджета». Полученный код установить на ресурс.

Для связи сервиса с CRM выбрать нужную систему по клику на кнопке «Настройки» на странице «Виджеты» и следовать инструкциям.

Использование виджета обратных звонков LeadBack владельцами онлайн-магазинов, продающих одностраничников, платных сервисов, повысит коэффициент конверсии ресурсов и увеличит продажи.

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

Закрыть меню