Как сделать обратный звонок на телефоне

Обновлено: 07.07.2024

Функция обратного звонка, когда сервер сам вам перезванивает, очень полезна во многих ситуациях.

Если не уверены в качестве интернет-канала (например в дороге) либо просто звоните редко и не хотите устанавливать программу. Поможет CallBack ссылка.
Чтобы не набирать каждый номер на IP-телефоне. Удобно просто копировать номера в CallBack ссылку на компьютере либо смартфоне. Если в офисе установлено несколько телефонов, можно предложить CallBack ссылки всем сотрудникам.
Для разработчиков, запрос CallBack через API позволит легко добавить в вашу систему функцию звонка на заданный номер.
Вы не хотите упустить посетителей вашего сайта и перезвонить им, превратив в клиентов. Для этого удобен либо CallBack виджет либо виджет "Позвоните мне".

Как это работает

Принцип действия предельно прост: наш сервер одновременно соединяется с вашим телефоном, а затем с телефоном, на который нужно позвонить. Телефонный номер передается в запросе CallBack, его набирать больше не нужно. Оба соединения происходят через телефонную сеть либо SIP, потому не требуется Интернет-канал либо программа.

Рассмотрим подробно все 4 примера использования CallBack

Самый простой и удобный способ для звонков, не требует установки программы и качественного интернет подключения. Отлично подойдет как “запасной вариант”, для дороги, для редкого использования.

Устанавливается крайне просто:

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

Если у вас уже установлена IP-телефония в офисе, для работы используется VoIP-шлюз либо несколько IP-телефонов, то может быть не удобным каждый раз набирать номера телефонов вручную. Тут также поможет CallBack ссылка. Достаточно сохранить отдельные ссылки каждому сотруднику и они смогут просто копировать номер телефона.

Создаются ссылки также просто:

В личном кабинете Zadarma в меню Услуги/Обратный звонок
В пункте 2 “ Заказ обратного звонка с мобильного ” вместо “номер телефона” выберите АТС и внутренний номер сотрудника, нажмите “сохранить”
Появится новая вкладка с внутренним номером АТС. Откройте ее, скопируйте ссылку и передайте сотруднику.

Ссылки можно создавать не просто для сотрудников, а даже для целых отделов (вместо номера АТС выберите "Сценарии").

Следуем дальше, офис большой и в нем есть система для работы с клиентами, либо свой Call центр. Либо более того, вы и есть разработчик для системы работы с клиентами (например CRM). В любом из этих случаев в систему нужно добавить возможность звонка одним кликом, по номеру из базы (а для call центра полезен предиктивный набор).

Подробное описание всего интерфейса вы можете найти на странице API .

Для звонка через CallBack нас интересует только метод /v1/request/callback/

from – ваш номер телефона или SIP, или внутренний номер АТС, или номер сценария АТС (в формате 0-1, где 0 - номер голосового меню, 1 - номер сценария), на который вызывается callback;
to – номер телефона или SIP, которому звонят;
sip (опционально) – номер SIP-пользователя или внутренний номер АТС (например 100), через который произойдет звонок. Будет использован CallerID этого номера, в статистике будет отображаться данный номер SIP/АТС, если для указанного номера включена запись звонков либо префиксы набора, они также будут задействованы;
predicted (опционально) – если указан этот флаг, то запрос является предикативным (система изначально звонит на номер "to" и только если ему дозванивается, соединяет с вашим SIP либо телефонным номером). В этом случае как from лучше указывать сценарий АТС чтобы с вашей стороны один из сотрудников call центра обязательно взял трубку и установить краткое приветствие в мелодию вместо гудков чтобы клиент не услышал гудка.

Благодаря методу CallBack и других функциям API, проект Zadarma уже интегрирован со многими популярными CRM системами (подробнее про бесплатную интеграцию).

Многие сайты предлагают оставить телефон чтобы автоматически связаться с клиентом. Проект Zadarma предлагает 2 разных способа для этого.

CallBack виджет для сайта автоматически отслеживает активность пользователей по настраиваемым параметрам (скрол, переход на страницы и т.д.) и, если клиент задержался на странице и не может определиться, отображает окно с предложением перезвонить. CallBack виджет от Zadarma полностью бесплатен, детальней о нем можете прочесть в разделе виджетов .

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

Около 10% посетителей сайта Callibri среди множества других способов связаться с компанией выбирают обратный звонок. Несмотря на то, что в последнее время многие предпочитают коммуникации не связанные с голосовым общением, телефонные переговоры остаются одним из самых эффективных инструментов продаж. 20% людей воспринимают информацию преимущественно через слух. И среди ваших клиентов такие люди обязательно есть.

Принцип работы и функции обратного звонка

не придется искать контакты продавца
не нужно тратить деньги на звонок
не нужно тратить время на дозвон и ждать, когда соединят с менеджером

Кому нужен callback

Реакция посетителей сайта на кнопку

Всплывающие окна раздражают большинство посетителей сайта. И они не стесняются это озвучивать.

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

Что представляет собой функция обратного звонка?

При этом все callback-виджеты выполняют одну и ту же задачу – помогают выйти на связь с потенциальным клиентом и конвертировать его в продажу.

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

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

С технической точки зрения работа профессионального callback-виджета четко привязана к инструментам SIP-телефонии на стороне бизнеса.

Связь между клиентом и бизнесом устанавливается в 4 шага:

Клиент находит на сайте форму обратного звонка и указывает в ней свои данные, чтобы ему перезвонили сотрудники ресурса (техподдержка, консультанты и т.п.).

Сервис обратного звонка начинает прозванивать операторов до тех пор, пока кто-то из них не освободится и не возьмет трубку.

После того как один из менеджеров взял трубку, callback-сервис начинает звонить клиенту, оставившему заявку на сайте.

Клиент поднимает трубку, а система обратного звонка автоматически соединяет его со специалистом компании.

Нужен ли вам обратный звонок на сайте?

Далеко не каждому бизнесу нужна форма обратного звонка на сайте. Она хорошо работает в сфере недвижимости, туризма, продажи автомобилей, образования или в медицинской сфере. Это те области, где аудитория (обычно взрослая) часто нуждается в дополнительной и достаточно подробной консультации с живым человеком и не в формате текста.

Мелкий бизнес с понятной моделью распространения продукта в callback-системах особо не нуждается, потому что в 90% случаев клиент сам знает, что ему нужно и как это купить.

Но это не строгие правила. При желании можно подобную форму хоть к своему портфолио прицепить. Кто ж вам запретит?

Преимущества обратного звонка

Основное преимущество callback-сервисов для бизнеса я уже назвал – повышение конверсии. Но это еще не все:

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

Больше шансов, что, заприметив форму обратного звонка, клиент захочет задать интересующие его вопросы.

Callback-системы собирают аналитические данные и позволяют отслеживать, откуда именно приходят посетители ресурса, заказывающие обратные звонки.

Обратный звонок со стороны бизнеса благоприятно влияет на его репутацию в глазах клиента.

Отдельно стоит отметить плюсы callback-виджетов для пользователей:

Обратный звонок позволяет оперативно получить необходимую информацию от живого человека.

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

Как поисковые системы реагируют на сервисы обратного звонка?

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

Как правильно оформить окно обратного вызова?

Далеко не все посетители вашего сайта будут в восторге от формы обратного звонка, особенно если оно занимает полэкрана, уродливо оформлено и не закрывается вручную.

Но и слишком незаметной кнопка быть не должна. Какой смысл в наличии на сайте callback-виджета, если пользователь не сможет его найти?

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

Примеры форм обратного звонка

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

На скриншоте выше указан виджет компании LeadBack. Он довольно аккуратный, анимированный, выглядит симпатично, при этом не занимает слишком много пространства. Идеальный вариант, который не будет раздражать посетителей сайта.

А это плохой пример. Это даже не виджет как таковой, а полноценное окно. Основная его проблема заключается в том, что такое окно всплывает неожиданно и перегораживает весь контент. Захочется ли клиенту после такого общаться с кем-то из представителей сайта? Вряд ли. Вы только что помешали ему изучать ваш ресурс, и, скорее всего, ваше предложение заказать обратный звонок его сейчас раздражает.

Как сделать callback-форму на своем сайте?

Если у вас достаточно навыков в разработке, то можно попытаться сделать виджет обратного звонка самостоятельно. Сверстать небольшое окошко с формой обратной связи на сайте (HTML и CSS-верстки будет достаточно), выставить таймаут на его появление, настроить отправку номера пользователя в отдел техподдержки через мессенджер или любым другим удобным способом.

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

Как выбрать сервис обратного звонка?

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

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

Далее рассмотрим наиболее популярные callback-виджеты.

Pozvonim

Этот сервис хорош тем, что предоставляет свои услуги на выгодных условиях. Одна сессия обходится бизнесу в 4 рубля за минуты общения. В среднем выходит по 12 рублей на клиента.

Callback-форма от Pozvonim очень легко настраивается, внедрение на сайт займет не больше 10 минут. И это при отсутствии каких-либо навыков по установке и настройке формы обратного звонка.

Помимо возможности связаться по телефону, в Pozvonim поддерживаются и другие каналы связи, в том числе популярные мессенджеры и социальные сети (Вконтакте, Telegram, Instagram). А еще виджет легко интегрируется со сторонним ПО.

Envybox

Один из наиболее популярных и качественных представителей своего класса. У Envybox тоже отличные тарифы. Компания решила зарабатывать деньги на тех, кто оплатит различные Pro-функции приложения, а сами звонки оплачиваются по себестоимости.

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

При желании Envybox можно интегрировать в уже действующую SIP-телефонию компании.

RedConnect

Относительно недорогой и при этом довольно функциональный callback-сервис.

Первое, на что стоит обратить внимание, – удобный визуальный редактор виджета. У него несколько форм (можно выбрать любую и настроить на свой вкус), есть подгонка цвета, размера отступов и т.п.

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

2Calls

Еще один представитель минимализма – виджет с компактным дизайном, который довольно ловко вписывается практически в любой экстерьер веб-страниц. Отлично подойдет тем, кто хочет использовать на своем сайте красивый callback-виджет со всеми необходимыми функциями.

Одно из важнейших преимуществ 2Calls – наличие iOS-приложения, с помощью которого администраторы могут удаленно управлять виджетом и отслеживать все, что с ним происходит.

All in One Support Button

Довольно популярный плагин обратной связи для WordPress, который можно часто встретить в сети. Да, это не совсем callback-сервис. Многие используют это дополнение исключительно для настройки общения через мессенджеры, но кнопка заказа обратного звонка в нем тоже есть. Так что вы можете комбинировать несколько источников связи в одном виджете.

All in One Support Button легко настраивается. Не приходится долго возиться со стилями и что-то перебирать. Достаточно скачать дополнение, выбрать оформление формы и разместить ее на сайте.

LPTracker

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

CallMagnet

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

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

Chaser

Один из немногих представителей своего класса, предоставляющий услуги по фиксированной цене. Услуги Chaser обойдется бизнесу в 2990 рублей в месяц (250 минут общения).

Chaser – не самый привлекательный вариант в визуальном плане. Меню администратора тоже не очень удобное, зато он легко интегрируется в популярную CRM-систему Bitrix24 и другие сервисы от сторонних разработчиков.

Из интересных функций можно отметить возможность записывать разговоры с клиентами.

UpToCall

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

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

Отличный инструмент, который действительно может влиять на количество заинтересованных клиентов, выходящих на связь и конвертирующихся в реальную продажу.

Погоди Widget

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

Вообще, Погоди Widget – это отличный плагин обратной связи для WP от российских разработчиков. Он довольно гибкий в плане настройки – можно полностью заменить интерфейс виджета, интегрировать его с CRM, настроить порядок обзвона менеджеров, добавить голосовое приветствие клиентов и т.п.

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

Вместо заключения

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

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

Так же я сделаю ещё один input с тайпом “datetime — local” для отображения выпадающего календаря с выбором даты и времени. Таким образом можно предоставить клиенту возможность выбрать удобное для него время звонка. Однако в html коде я закомментирую этот input, а если кому то он будет нужен, то может раскомментировать строку кода и пользоваться этим функционалом. В файлах php обработчика и в таблице стилей это поле будет подключёно.

Выглядеть это будет вот так.

Разбиваем работу над кнопкой вызова на этапы

Создание кнопки обратного звонка можно разделить на семь этапов.

Выбор java script плагина, отвечающего за вызов модального окна.
Подключение и редактирование html и js кода.
Оформление внешнего вида кнопки и формы обратной связи с помощью css стилей.
Подключение php кода обработчика формы.
Подключение маски для телефона.
Настройка ajax – будем отправлять данные с формы без перезагрузки страницы.
Подключение или отключение поля с календарём (датой и временем).

Выбираем плагин js

В интернете сейчас есть много решений, с помощью которых можно сделать вызов модального окна. Например, в библиотеке фреймворка bootstrap встроен плагин Modal. Чтобы его подключить нуж но скачать фреймворк bootstrap. Он будет встроен в минифицированный файл bootstrap .min.js. И ли скачать можно сам плагин, найдя его в разделе Настройки — Компоненты java script.

Так же модальное окно вызывается с помощью плагина fancybox ,

или Remodal .

С уществует ещё много скриптов, вызывающих всплывающее окно на сайте. На нескольких своих проектах я использовал плагин remodal, но недавно, когда делал сайт визитку, плагины remodal и fancybox вступили в конфликт с другими js скриптами . В частности после их установки перестал ра ботать плавный скролл на сайте.

Адаптируем html код п лагина под свой проект

Итак, копируем здесь же javascript код, создаём файл main.js и вставляем его сюда.

Чтобы в форме обратной связи показывалась кнопка крестик, для её закрытия нужно строку modal: true переделать на modal: false ,
и под ней вставить эту showCloseBtn: true

В общем должен получиться такой код

Далее подключаем файл main.js внизу страницы с помощью тега script. А в html коде берём только код ссылки и обёртку, остальное удаляем.

Получилcя такой код:

Оформляем кнопку и форму стилями css

Далее привожу пример css стилей с помощью которых я оформил внешний вид формы. Бекграундом для формы я сделал фотографию, а инпуты и кнопку в ней немного прозрачными.

Php обработчик формы

Php обработчик формы обратной связи будет называться mail.php. На него будет нацелен ajax.

Скрипт маски для телефона

В файл main.js вставьте этот код
$('input[name="phone"]').mask("+38 (099) 999-99-99");
По умолчанию здесь настроен телефонный код Украины, но если вы с России или другой страны, вы можете изменить первые цифры кода на свои. Так же, что бы маска работала нужно подключить к html файлу файл maskedinput.min.js . Я его выложу в конце статьи со всеми файлами.

Код ajax можно вставить в файл, main.js, который уже подключен. Вставляем его ниже кода плагина magnific popup.

Если вы всё правильно сделали, то должно всё работать. Кнопку, вызывающую форму обратной связи можно изменить, прописав ей свои стили. На всякий случай выложу zip файл для скачивания с кодом кнопки обратного звонка. Удачи вам!

Читайте также: