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

Круглая кнопка (обратного звонка) CSS с анимацией

Коммерция, коммерция и еще раз коммерция! Именно это направление сегодня активно набирает обороты в сайтостроении. И для сайтов такой тематики (впрочем, как и для всех остальных) важную роль играет юзабилити. Чтобы на сайте все было удобно, доступно и понятно любому пользователю. Одним из элементов этой концепции является кнопка «Заказ обратного звонка».

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

Для примера создадим две кнопки с разной анимацией. В качестве иконок используем всем известный шрифт Font Awesome.

Кнопка заказа звонка

Кнопка обратной связи

Как видите, все очень просто. Удачной реализации, уважаемый читатель!

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

Автор, он же Андрей, он же Admin, он же WordSmall

Лентяй-любитель, окончил высшую школу безделья с многочисленными знаками отличия. Создатель этого небольшого «чудо-блога» о еще более «чудном» контенте.

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

День добрый. Какой скрипт? Что значит «мертвые»? Каким образом указываете ссылку?

Андрей, не удивляйтесь моей терминологии, я гуманитарий, я не спец в компьютерах. Я пытаюсь добавить Ваши кнопки в шаблон Bootstrep и прикрепить к ним форму обратной связи и прямой звонок на телефон. Я добавила Ваши кнопки на сайт. Они очень красивые, но как их активировать и что-то прикрепить к ним, я не знаю. Объясните, пожалуйста, для таких, как я (которые в танке и в каске).

Прямой звонок. ссылку на номер? Вот так:

А модальное окно. просто добавьте тот класс или id к кнопке, который должен вызывать модальное окно.

Здравствуйте, WordSmall! Спасибо, поставил на свой сайт кнопку заказа обратного звонка по инструкции выше. Но у меня проблемка: в примере Вашем вверху страницы на голубом фоне кружочек с трубочкой в центре, создав же на сайте HTML и CSS, я получил кружочек с диковинным прямоугольничком в центре. Прошу пояснить, как мне получить желанную телефонную трубку? Спасибо Вам!

День добрый. В статье сказано “В качестве иконок используем всем известный шрифт Font Awesome. ” и в комментариях говорилось.

Здравствуйте ещё раз! Да, всё оказалось проще, чем я думал. Использовав , поменял внешний вид кнопки на возжеланную телефонную трубку. Осталась вторая проблема и буду весьма признателен, если намекнёте на её решение. Но спасибо в любом случае, разумеется.

Итак, в чём сложность: ваяя свой сайт в Gridbox’е, хочу сделать так, чтоб по клику на любезно предоставленную Вами кнопку открывалась форма. Для этого использую Overlay section, сложность в том, что привязать существующую форму вроде как могу лишь либо к картинке, либо к иконке — судя по опциям Overlay section. А вот как форму привязать к Вашей кнопке-то? Не соображу. Не посоветуете ли чего, добрый человек?

Повышаем юзабилити: звонок в компанию по клику с сайта

В статье:

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

Как обычно оформляют телефон

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

• Цифрами в формате простого текста или даже картинки.
  Пользователю нужно переписывать или копировать и вставлять номер в журнал вызовов.
• Цифрами со ссылкой, которая ведет на звонок в мобильной версии.
  Клиенту со смартфона нужно сделать два клика — на номер и на кнопку вызова.
• Цифрами со ссылкой, которая ведет на форму обратного звонка в десктопной версии.
  Клиент может заказать на свой номер звонок из компании.

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

Если посмотреть карту сайта, то на области телефона скорее всего будут клики. На сайте PR-CY не предусмотрен телефон, поэтому приведем пример из выдачи Яндекса:

Есть клики в области телефона

Кликов может быть немного, но каждый клик – это попытка пользователя вызвать звонок или как-то повзаимодействовать с телефоном. Пользователь не получит, чего хотел, если телефон на сайте неактивен.

Посмотреть, как часто на вашем сайте кликают на телефон, можно на специальной карте.

Как посмотреть карту кликов сайта

Яндекс.Метрика

Самый простой способ — войти в Яндекс.Метрику в раздел Карта кликов, там вы увидите страницу сайта с отметками кликов пользователей.

Есть несколько режимов просмотра:

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

Тепловая карта кликов в Яндекс.Метрике

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

Crazy Egg

Карта показывает клики или скроллинг. Главное преимущество – инструмент Confetti, который позволяет фильтровать клики по посетителям, пришедшим из разных источников. К примеру, можно отдельно посмотреть куда кликают люди, перешедшие на сайт из соцсетей.

Инструмент Confetti

Сервис платный с бесплатным периодом в 30 дней.

Mouseflow

Сервис показывает скроллинг и клики, выводит статистику по страницам. Карта похожа на тепловую карту из Яндекс.Метрики.

Карта кликов в Mouseflow

Карты кликов можно смотреть бесплатно.

Hotjar

Сервис показывает клики, нажатия и скроллинг, результаты показываются в форме тепловой карты.

Карта кликов в сервисе

Сервис обрабатывает до 2000 просмотров сайта пользователями и сохраняет их три месяца. Можно пользоваться бесплатно 15 дней.

Inspectlet

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

Карта движения мыши

В бесплатной версии можно отслеживать до 1000 просмотров в месяц, они месяц будут храниться в сервисе.

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

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

Что сделать с номером телефона

Для мобильной версии

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

Вместо “Call me” используйте любую другую фразу.

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

Кликабельный номер телефона на смартфоне

По клику на номер на смартфоне открываются вызовы

Для десктопа

В десктопной версии не получится звонить по клику, поэтому на номер телефона можно поставить форму «Заказать звонок». Тогда по щелчку на номер выйдет форма, предлагающая клиенту оставить свои контакты, чтобы менеджер сам с ним связался.

Пример окна по клику на номер телефона

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

Форма «Заказать звонок» может находиться на сайте и в формате виджета. Обычно он находится на экране справа внизу.

Виджет «Заказать звонок» на странице

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

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

Как поставить форму «Заказать звонок»

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

1. Использовать сторонний сервис

Существует много callback-сервисов, самые популярные — Callback Killer, Callback Hunter, Zadarma, UpToCall или RedConnect. Они работают по такой схеме: номер отправляется на сервер, звонок поступает менеджеру, которому сообщается информация о звонке, одновременно с этим программа набирает номер клиента и переводит его на менеджера.

В сервисах можно настроить внешний вид кнопок и полей ввода под свой сайт.

Окно настройки всплывающей формы

Сервисы требуют абонентскую оплату и отдельно оплату звонков по тарифам.

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

2. Установить плагины от CMS

В каталогах плагинов для CMS можно найти нужные решения для заказа звонков.

Если ваш сайт на WordPress, в магазине плагинов есть LiveCall, CallPage, Callmaker и другие для установки виджета и формы «Заказать звонок». Плагин Excitel позволяет клиенту звонить в компанию напрямую из браузера.

Для сайта на 1С-Битрикс можно найти нужные плагины в маркетплейсе. Для обратных звонков подойдут Call Me, Заказ обратного звонка, Telephone и другие

Для Joomla! также можно найти готовый плагин, к примеру, Ajax Contact, Simplecallback.

В магазине модулей для Opencart есть модули обратного звонка: Callback Full, Менеджер звонков и другие.

3. Написать плагин самостоятельно

Вы можете самостоятельно написать скрипт обратного звонка или воспользоваться тем, что предлагают скачать бесплатно. К примеру, мы нашли SmartLid — это jQuery-плагин, выглядит как значок, который открывает заказ звонка или письменное обращение.

Свернутый значок

Выбор звонка или сообщения

Для установки нужно скачать исходник и распаковать его в корень сайта, после этого подключить и инициализировать скрипт. Лучше сделать это перед закрывающим тегом body:

После этого форма с виджетом должна работать.

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

Напишите в комментарии, если вам был бы интересен обзорный материал о разных callback-сервисах.

Кнопка обратного звонка для сайта: отличия

В мире новых технологий люди получают колоссальное количество информации ежеминутно. С этим потоком необходимо работать быстро, иначе все просто окажется неактуальным. В бизнесе дела обстоят еще сложнее, ведь чтобы не потерять клиента и обогнать конкурентов, компания должна предоставлять потребителю инструменты для быстрой, качественной связи с компанией. Именно для этого есть кнопка обратного звонка.Среди интернет-маркетологов набирает популярность такая услуга, как «перезвоним через 30 секунд» или виджет обратного звонка для сайта. Это скрипт, который заточен под то, чтобы компания сама перезвонила клиенту сразу или через указанное клиентом время. Такой подход к коммуникации с потребителем повышает лояльность посетителей сайта. Приложение — помощник бывает разным: от простой формы обратного звонка (имя, номер телефона) до «умной» автоматизированной системы.

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

Форма заказа обратного звонка (англ. “callback” – обратный звонок) – это инструмент онлайн-маркетинга для связи посетителя сайта с компанией. Не достаточно просто установить его на сайт и забыть.

Когда клиент нажимает кнопку, он ждет звонка. Важно, чтобы коллбэк происходил сразу. В противном случае, кнопка бессмысленна, даже если она бесплатна. Редкий посетитель поддастся соблазну оставить номер, когда ему пообещают позвонить через неделю. Это похоже на «доставка пиццы будет в следующий вторник». Даже через 15-20 минут звонить уже не имеет смысла.

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

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

Виджет обратного звонка для сайта

• Повысьте конверсию сайта на 30%.
• Экономьте на тарифах: от 5 рублей в минуту.
• Настраивайте под ваш сайт. Адаптируйте под все устройства. Тестируйте разные виджеты.
• Используйте гибкие настройки показа.
• Стройте отчеты по звонкам: от показа виджета до ключевого слова.

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

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

Как сделать бесплатную форму обратного звонка на сайт

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

Платный помощник

Главное отличие – это расширенный функционал (об этом ниже) и установка. При выборе приложения-помощника важно обратить внимание на:

• стоимость установки и обслуживания;
• время и простоту интеграции с колл-центром;
• время и простоту интеграции формы call back в сайт;
• наличие дополнительных платежей (это может быть плата за номер, запись разговоров, хранилище звонков, абонентская плата, поминутная тарификация и виджет – проговорите это заранее и пропишите в договоре);
• качество технической поддержки продукта.

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

Поисковые системы сразу выдают более сорока компаний по запросу «установка формы обратного звонка» на первых пяти страницах. Важно, чтобы вы понимали, какие именно функции вам нужны и не переплачивали за лишние. Сравнивайте, общайтесь с представителями компаний, спрашивайте напрямую, зачем именно вашей компании нужен предлагаемый функционал. Обращайте внимание на финальные цены, а не на лобовое предложение на сайте. Так как зачастую к нему в обязательном порядке приходится докупать набор функций, и итоговая цена возрастает в 3-4 раза.

Что важно в коллбеках?

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

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

В форме обратного звонка должен присутствовать выбор страны/города/отдела и т.д. (например, страна – Россия, город – Москва, отдел – техническая поддержка). Это важно, если у вас несколько подразделений или несколько филиалов в разных городах с общим сайтом, с которого могут звонить клиенты. Потому что если один виджет используется для нескольких филиалов, оператор из Екатеринбурга вряд ли сможет дать корректную информацию об услугах в Москве (тут кстати и часовые пояса играют роль). Это разочарует клиента.

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

• уведомления о звонке (email, SMS и т.д.)

Стоит подключить уведомления о неудачных вызовах. Клиент может позвонить и по каким-то причинам отменить вызов. Потом забыть. В случае установки уведомлений вы сможете реагировать на несостоявшиеся вызовы сами.

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

• отдельная настройка виджета для мобильной версии.

Оформление и набор элементов на десктопе и мобильном экране – разные. Кривые элементы на мобильном раздражают всех и всегда. Поэтому нужна отдельная настройка для корректного использования обеих версий.

• отключение десктопа от мобильной версии.

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

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

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

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

Важно! Кнопка обратного звонка должна органично сочетаться с дизайном сайта и не раздражать клиента. Существует огромное количество вариантов визуального оформления кнопок обратного звонка. Самая простая – статическая форма. Также колбэк может быть всплывающей, пульсирующей и т.д. Все зависит от фантазии и бюджета. Главное, не забывать об удобстве пользователя.

Виджет обратного звонка для сайта

• Повысьте конверсию сайта на 30%.
• Экономьте на тарифах: от 5 рублей в минуту.
• Настраивайте под ваш сайт. Адаптируйте под все устройства. Тестируйте разные виджеты.
• Используйте гибкие настройки показа.
• Стройте отчеты по звонкам: от показа виджета до ключевого слова.

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

Источники:

https://wordsmall.ru/html-i-css/kruglaya-knopka-obratnogo-zvonka-css-s-animaciej.html
https://pr-cy.ru/news/p/7050-povyshaem-yuzabiliti-zvonok-v-kompaniyu-po-kliku-s-sayta
https://blog.calltouch.ru/knopka-obratnogo-zvonka-dlya-sajta/