код виджета обратного звонка
Создаем бесплатный callback-виджет с SMS и Telegram-оповещением
В этой статье мы пошагово создадим виджет обратного звонка с красивой минималистичной анимацией и отправкой уведомлений на почту, на свой номер телефона и в мессенджер Telegram через бота. Виджет подойдет абсолютно для любого сайта на HTML или на любой CMS.
Демонстрацию можно посмотреть по ссылке.
Зачем нужен callback-виджет?
Есть масса сервисов, которые предоставляют различные настраиваемые виджеты обратного звонка — с возможностью подключить АТС, интегрировать с CRM (amoCRM, Битрикс24), с оповещением в Telegram, по СМС и так далее. За такой богатый функционал нужно платить ежемесячно, покупать минуты или выбирать тариф по карману. Стоимость подобных виджетов стартует примерно от 200 рублей в месяц.
Используя виджет, о котором мы поговорим в этой статье, вы получите навечно бесплатное, независимое и настраиваемое под любые нужды решение — с возможностью отправки заявки на почту, в Telegram и по СМС. Также с помощью вебхуков можно подключить отправку данных в CRM (если есть такая возможность на стороне самой CRM).
Минус такого виджета – отсутствие возможности онлайн-звонка. Но, думаю, это не большой минус, а скорее плюс, так как часто менеджеры не успевают ответить на звонок, и компания получает негатив от потенциального клиента. А в случае с виджетом мы принимаем заявку, выводим сообщение о том, что перезвоним в течение определенного времени, и у клиента не возникает негатива. Поэтому минус виджета может быть и плюсом.
Итак, приступим к созданию виджета.
Разметка HTML + CSS
Так как виджет «сквозной» и устанавливается на все страницы, нам необходимо понимать, с какой страницы был заказан обратный звонок, чтобы оперативно помочь клиенту. Для этого нам понадобится скрытое поле в форме, которое будет передавать эту страницу, значение поле должно быть таким:
Второе скрытое поле будет передавать тему заявки — в данном случае это «Обратный звонок».
Теперь добавим небольшой скрипт открытия формы по клику на кнопку. Для этого нам понадобится подключить библиотеку jQuery и написать небольшой скрипт отправки. Если у вас уже подключена библиотека, то этого делать не стоит.
Далее оформим все с помощью CSS. Вы можете добавить этот код в свой файл стилей или создать новый.
Форма «Заказать звонок для сайта»
Форма заказа обратного звонка для сайта — это удобный инструмент интернет-маркетинга, позволяющий увеличивать конверсию и принимать больше целевых звонков, не упуская ни одного клиента.
Вы размещаете скрипт виджета CallKeeper на сайте вашей компании и начинаете получать звонки. Форма заказа обратного звонка представляет собой виджет, который предлагает посетителю сайта заказать звонок именно в тот момент, когда он больше всего готов к этому. Нажав на кнопку, клиент отправляет свои данные, звонок автоматически поступает вашему менеджеру или оператору колл-центра. Менеджеру проговаривается имя посетителя, информация о интересующем товаре или услуге, сайте, откуда поступил звонок. После подтверждения CallKeeper автоматически звонит клиенту.
Собирать заявки можно круглосуточно. Если звонок заказан в нерабочее время, приложение предложит перезвонить позже. Звонок будет запущен автоматически в рабочее время компании/ колл-центра или в удобное время, выбранное клиентом во время заказа обратного звонка.
К обратному звонку Callkeeper можно подключить все встроенные формы обратной связи на вашем сайте:
Заказ обратного звонка: технические особенности
Форма «закажи обратный звонок» работает следующим образом:
Можно настраивать отчеты в зависимости от задач, настроить отправку отчета на e-mail руководителя или выгружать данные удобным способом.
Дизайн виджета настраивается в соответствии с Вашим брендбуком, гибкие настройки помогают оптимизировать кампании, повышая эффективность.
Кому будет полезна форма заказа звонков?
Такая функция будет полезна любой компании в сфере авто, недвижимости, медицинских услуг, электронной коммерции, оказывающей услуги онлайн или занимающейся продажей товаров в интернет-магазине. Сервис позволяет собирать лиды в режиме 24/7, даже когда вас нет в офисе.
Звонок будет запущен автоматически в рабочее время компании или в удобное время, выбранное клиентом.
Если клиент не смог ответить на обратный звонок, абонент не доступен или занят, Вы можете настроить автоматические повторные звонки клиенту, уведомления о звонках менеджерам на e-mail. Таким образом, контакт с потенциальным клиентом состоится в любом случае и не потеряется.
База знаний
Одним из поводов для написания данного материала послужило несколько причин. Во-первых мы заметили что многие клиенты не меняют стандартный текст в виджете, а во-вторых те кто менял текст, меняли его в большинстве случаев не правильно.
Зачем менять стандартный текст?
Стандартный текст работает, но с меньшей эффективностью, чем текст, учитывающий детали предметной области вашего бизнеса.
Менять текст нужно, и мы рекомендуем экспериментировать с текстами. Пробуйте разные варианты, например 2 недели 1 текст в виджете, 2 недели другой.
В виджете LeadBack можно менять текст внутри виджета, на кнопке и текст окна заказа звонка в нерабочее время. При этом код виджета обратного звонка не нужно будет менять на сайте или переустанавливать.
Интерфейс редактирования текста в виджете позволяет использовать свой html и стили для выделения призыва «call-to-action».
Как написать хороший текст и повысить конверсию виджета
Прежде всего посмотрите на структуру текст в виджете. Её можно разделить на 3 составляющие:
Заголовок или призыв к действию
Заголовок важный элемент, он не должен быть слишком длинным (7-9 слов максимум). Заголовок должен читаться легко. Если заголовок нужно перечитывать чтобы понять суть, он не будет работать. Пишите заголовок тезисно.
Заголовок должен содержать призыв к действию, скидку или бонус. Если вы сделаете весомое предложение для посетителя, от которого сложно отказаться, конверсия в звонок увеличится в несколько раз!
Текст виджета
В текста главное описать что нужно сделать клиенту для получения указанного в заголовке действия. Текст обязательно должен содержать время перезвона, это укажет клиенту на быстроту выполнения действия. Как и в заголовке, текст пишите кратко (10-12 слов).
Результат и высокая конверсия сайта
Оцените сами, какой текст привлекательнее и где будет более высокая конверсия в звонки:
Стандартный текст виджета.
Текст в виджете после изменений.
Изменение конверсии в звонок можно отследить используя интеграцию виджета LeadBack с Яндекс.Метрикой или Google Analytics.
Результат роста конверсии после изменения текста в виджете обратного звонка.
Как настроить обратный звонок и увеличить продажи
Помогаем увеличить конверсию за счет подогревания лидов
Из этого материала вы узнаете:
В этой статье речь пойдет о том, как настроить обратный звонок. Наверняка вам встречались посадочные страницы (проще говоря, лендинги), на которых эта функция реализована при помощи большой кнопки. При нажатии на нее выскакивает контактная форма, после заполнения которой вам приходит звонок от оператора.
Такой сервис помогает увеличить конверсию за счет подогревания лидов. Причем чем быстрее реакция на вызов сервиса обратного звонка (порядка 30 секунд), тем выше конверсия. Если вы еще не настроили эту функцию на своем сайте, самое время сделать это вместе с нашей статьей.
Что собой представляет обратный звонок и как он работает
Функцию обратного звонка выполняет особый виджет в виде небольшой кнопки на сайте, размещаемой справа или слева. Нажав на этот элемент, посетитель увидит перед собой интерактивную форму, где можно указать свой номер телефона и удобное время для звонка оператора. Кнопка оформляется и настраивается по-разному в зависимости от дизайна сайта, а также от используемого сервиса.
Введенные данные сохраняются в памяти. Затем, в указанное время, сервис звонит по номеру, который ввел пользователь. Вместе с этим происходит соединение с одним из операторов службы поддержки, который отвечает на все интересующие клиента вопросы. Таким образом, пользователь может получить требуемую информацию в наиболее удобное время.
Дозвон до клиента и соединение с оператором — это базовые функции всех подобных сервисов.
Вместе с тем виджеты обратного звонка обладают множеством дополнительных опций, среди которых:
Опциональные функции помогают повысить качество используемых сервисов и эффективность бизнеса в целом.
Преимущества использования обратного звонка
Функция «Обратный звонок» позволяет превратить обычного посетителя сайта, заинтересованного в продукте, в потенциального покупателя. Сервис привлекает именно «теплых» клиентов, которые охотнее «холодных» соглашаются сотрудничать. Использование виджета имеет также ряд других достоинств:
Как установить обратный звонок на сайт
Соответствующая кнопка как правило размещается на сайте справа сверху. Как владелец ресурса, вы можете расположить виджет где угодно, однако помните, что пользователи по привычке ищут его именно в правом верхнем углу. Впрочем, это касается прежде всего сайтов, посвященных услугам и бизнес-тематикам.
Чаще всего модальные окна программисты реализуют средствами JavaScript. Тем не менее, для облегчения посадочной страницы скрипт можно не использовать, ограничившись лишь возможностями CSS.
Установка виджета «Обратный звонок» выполняется двумя способами:
1. Вставка готового скрипта в HTML-код сайта
Данные скрипты вы можете скачать абсолютно бесплатно с множества ресурсов, которые в свою очередь легко ищутся через поисковый сервис. Вставив текст кода виджета в имеющийся HTML-код, перезагрузите страницу. Окно с интерактивной формой появится на сайте. Поскольку виджет бесплатный, набор функций его существенно ограничен.
В настройках установленного сервиса необходимо указать адрес электронной почты, куда будут высылаться уведомления.
2. Приобретение готового виджета
Оплатив сервис, вы можете выбирать подходящий внешний вид кнопки, а также настроить под себя другие параметры. Для виджета на сайте также определяется место. Скрипт написан таким образом, чтобы кнопка на странице появлялась не сразу после загрузки, а спустя некоторое время. Благодаря этому появление формы не будет раздражать посетителей, а в нужный момент лишь напомнит о возможности консультации со специалистом.
На эффективность работы такого алгоритма влияет время, в течение которого интерактивная форма отображается на сайте. Для заказа обратного звонка необходимо в соответствующие поля ввести контактные данные, а затем сгенерированный сервисом код, который должен поступить на телефон пользователя сразу после запроса. В результате будет доступна кнопка виджета.
Как настроить обратный звонок на сайте
Предлагаемые сервисы могут различаться между собой набором функций, однако базовый принцип у всех один и тот же. Порядок действий при запуске виджета будет следующим.
1. Установка готового скрипта
Определив внешний вид кнопки в соответствующих настройках, вы сразу же сможете увидеть ее на своем сайте.
2. Активация функции обратного звонка
Активировать функцию можно лишь при подключении виджета, если в нем содержится соответствующий код. Пользователь может обратиться к сервису, кликнув по вкладке приложения. В результате он увидит перед собой предлагаемые способы связи, включая обратный звонок. Сама по себе эта кнопка не появляется, чтобы не раздражать пользователей.
Вы можете максимально увеличить удобство пользования этим инструментом, настроив его таким образом, чтобы предложение заказать обратный звонок появлялось в виде небольшого флажка на сайте. Доступна возможность вызова формы при нажатии на определенное слово — такая настройка также имеется. Появляющаяся форма не будет перекрывать основной контент на сайте.
3. Настройка порядка дозвона
Настроить схему дозвона можно в одном из двух вариантов:
Помимо указанных операций можно явно указать временной интервал, когда доступна услуга обратного звонка, а также время, когда эта услуга недоступна. В последнем случае пользователи будут понимать, что сервис сейчас не работает, и заказывать звонок не станут. Общаться с пользователями оператор может и непосредственно через сайт, используя гарнитуру.
Визуализация виджета обратного звонка
Виджет, встроенный в сайт, является его неотъемлемой частью, а потому должен быть выполнен в соответствии с имеющимся дизайном, текстовым наполнением и дополнительным функционалом ресурса. Для этого предусмотрен обширный ряд настроек.
Интерактивную форму можно оформить под фирменный дизайн компании, используя логотип бренда, утвержденные цвета и другие элементы. Расположение виджета и его размер также задаются отдельно.
Текстовые сообщения должны быть креативными и лаконичными, чтобы пользователи захотели заказать звонок.
3. Функциональные доработки
В нерабочее время вид интерактивной формы можно изменить, чтобы она визуально отличалась. При наличии действующих маркетинговых акций вы можете оповещать пользователей о них через встроенный таймер с функцией обратного отсчета.
Кроме того, благодаря дополнительному функционалу вы будете знать:
Как настроить обратный звонок, избежав типичных ошибок
Данный сервис призван выводить потенциального клиента на коммуникацию, в идеале доводя его до продажи. Этому могут препятствовать несколько причин:
• Сайт недостаточно информативен
Если посетитель не может найти интересующую его информацию, он обращается за помощью через функцию обратного звонка. В таком случае сервис не выполняет своей главной задачи, а служит лишь средством информационной поддержки.
• Плохая навигация на сайте
Опять же, когда пользователь путается в навигации и не может что-то найти, он будет звонить менеджеру за помощью. Если же сайт правильно спроектирован, он воспользуется кнопкой лишь с целью купить товар или услугу.
• Отсутствие раздела «Часто задаваемые вопросы»
Страница сайта с наиболее типичными ответами в большинстве случаев избавляет пользователя от необходимости звонить вам, чтобы просто спросить, тем самым отвлекая операторов простыми вопросами. Выдавайте всю исчерпывающую информацию на своем ресурсе — только тогда кнопка «Обратный звонок» начнет эффективно продавать.
• Отсутствие онлайн-консультанта на сайте
Подобные сервисы коммуникации освобождают менеджеров от безрезультатных звонков. Наличие на сайте чата, где пользователи могут задавать все интересующие вопросы, повышает лояльность к компании. Именно такой формат общения в большинстве случаев предпочитают посетители интернет-ресурсов.
Наконец, бывают ситуации, когда пользователи не понимают, для чего на сайте присутствует функция обратного звонка. В таких случаях потенциальному клиенту при заказе им этой услуги нужно подробно объяснять, что у вас, например, есть выгодное предложение, или вы можете оказать помощь в выборе подходящей модели изделия.
Как оценить эффективность обратного звонка на сайте
Каждый инструмент обладает определенной эффективностью, которую можно выявить, подсчитать и проанализировать. Исключением не является и виджет «Обратный звонок». В данном случае предлагается возможность отследить, откуда пришли посетители на ваш сайт, и какая доля из них стала действительной клиентурой. Эти и другие статистические данные позволят оценить, насколько эффективно работает сервис и как он влияет на прибыль компании.
Функция «Обратный звонок», являясь одним из способов связи с аудиторией, дает возможность выяснить важную информацию о каждом посетителе сайта. А именно:
Оценить, насколько эффективно работает приложение, можно по следующим параметрам:
Малое количество заказанных звонков, например, за месяц позволит понять, что данный инструмент не особо эффективен.
Важно не только количество звонков, но и результат, который они дают. Поэтому из общего числа нужно выделить те, которые закончились продажей. Этот оценочный показатель эффективности является одним из важнейших.
Оценивая совершенные звонки, можно выявить эффективность подключенных рекламных инструментов — какие из них приводят целевых посетителей, а по каким идут лишь спамеры.
• распределение по регионам;
Наличие привязки пользователей к их местоположению дает возможность увидеть, где и какие именно продукты предпочитают приобретать клиенты.
Важное значение имеет запись разговора. Например, по ней можно изучить вопросы, задаваемые посетителями. Вероятно, они будут указывать на необходимость определенной доработки или оптимизации сайта. Также запись позволяет выявить потребности аудитории. Наконец, по записанному разговору можно проанализировать работу компании, учесть какие-то ошибки операторов (например, менеджер по продажам конкретного продукта консультирует клиента по совершенно другому товару и т. п.).
Все статистические данные отображаются в одном окне. Это очень удобно для анализа эффективности нескольких каналов трафика. Можно наглядно наблюдать, какое количество обратных звонков конвертируется в действующих клиентов, и делать соответствующие выводы. Если результаты вас не устраивают, вы всегда можете скорректировать инструмент таким образом, чтобы он способствовал повышению конверсии.
Перед тем, как настроить «Обратный звонок», вы должны учитывать, что расходы за пользование сервисом целиком ложатся на вас как на владельца сайта. Тем не менее, затраты быстро окупаются благодаря значительному повышению конверсии, а значит и увеличению прибыли при условии правильно настроенного виджета. Отображаемая статистика же будет являться незаменимым инструментом, позволяющим проводить анализ и оптимизировать рекламный бюджет.
Как настроить звонок в компанию по клику с сайта
В статье:
Юзабилити — это удобство использования сайта. Если пользователю будет непонятен интерфейс, он может уйти с ресурса, даже если был готов заказать товар у вас. Нужно упрощать действия для клиента, чтобы он решил свою задачу в максимально короткий срок за минимальное количество кликов. В этой статье расскажем, как добавить одну деталь на сайт и сделать звонки в компанию удобнее.
Как телефон на сайте связан с топом
По результатам исследования факторов ранжирования 2020 авторства Лаборатории поисковой аналитики «Ашманов и партнеры», бесплатный для пользователей телефон 8-800 есть у 65% сайтов в топ-30 Яндекса. В Google он есть у 61% из топ-30. Цифры касаются e-commerce отрасли.
Исследователи отметили, что наличие обратного звонка сейчас не важно, хоть раньше и нравилось поисковым системам. Альтернативные способы связи безразличны Google, но могут влиять на попадание в топ в Яндексе.
Телефон на сайте e-commerce нужен, причем лучше, если номеров несколько — для разных филиалов. Еще указывают дополнительные номера отделов, к примеру, способ связаться с PR-отделом для прессы.
Как обычно оформляют телефон
На сайтах компаний, где подразумеваются входящие звонки от клиентов, телефон обычно находится в шапке сайта и представлен в таком виде:
Первый вариант еще встречается на некоторых сайтах, но он неудачный. Если на вашем сайте номер телефона не активен, статья может быть вам полезна.
Если посмотреть карту сайта, то на области телефона скорее всего будут клики. На сайте PR-CY не предусмотрен телефон, поэтому приведем пример из выдачи Яндекса:
Есть клики в области телефона
Кликов может быть немного, но каждый клик — это попытка пользователя вызвать звонок или как-то взаимодействовать с телефоном. Пользователь не получит, чего хотел, если телефон на сайте неактивен.
Посмотреть, как часто на вашем сайте кликают на телефон, можно на специальной карте.
Как посмотреть карту кликов сайта
Клики пользователей покажут разные сервисы:
Яндекс.Метрика
Самый простой способ — войти в Яндекс.Метрику в раздел Карта кликов, там вы увидите страницу сайта с отметками кликов пользователей.
Есть несколько режимов просмотра:
Полезный инструмент для определения юзабилити, который в том числе показывает, какой некликабельный элемент вашего сайта пользователи принимают за ссылку.
Crazy Egg
Карта показывает клики или скроллинг. Главное преимущество — инструмент Confetti, который позволяет фильтровать клики по посетителям, пришедшим из разных источников. К примеру, можно отдельно посмотреть куда кликают люди, перешедшие на сайт из соцсетей.
Инструмент Confetti
Сервис платный с бесплатным периодом в 30 дней.
Mouseflow
Сервис показывает скроллинг и клики, выводит статистику по страницам. Карта похожа на тепловую карту из Яндекс.Метрики.
Карта кликов в Mouseflow
Карты кликов можно смотреть бесплатно.
Hotjar
Сервис показывает клики, нажатия и скроллинг, результаты показываются в форме тепловой карты.
Карта кликов в сервисе
Сервис обрабатывает до 2000 просмотров сайта пользователями и сохраняет их три месяца. Можно пользоваться бесплатно 15 дней.
Inspectlet
Сервис отслеживает клики, скроллинг и движения мыши, что коррелирует с движениями глаз пользователя при просмотре сайта.
Карта движения мыши
В бесплатной версии можно отслеживать до 1000 просмотров в месяц, они месяц будут храниться в сервисе.
Есть и другие сервисы для отслеживания кликов, можно подобрать себе самый удобный в использовании и приемлемый по цене.
Если карта показывает, что на сайте много кликов на область телефона, значит пользователи думают, что номер кликабельный, и чего-то ждут от нажатия. Лучше не обманывать их ожиданий и запрограммировать реакцию на клик.
Что сделать с номером телефона
Для мобильной версии
В мобильной версии на номер телефона можно поставить ссылку, которая сразу экспортирует номер в журнал вызовов, пользователю останется только нажать вызов на смартфоне.
Вместо «Call me» используйте любую другую фразу.
В таком случае пользователю не нужно будет копировать номер вручную и вставлять в журнал вызовов или переписывать его для звонка, количество его действий сократится до двух кликов.
Кликабельный номер телефона на смартфоне
По клику на номер на смартфоне открываются вызовы
Для десктопа
Из десктопной версии позвонить не получится, у пользователей браузера Google Chrome есть функция отправки номера на свой смартфон. По клику на номер открывается окно с предложением позвонить на него со связанного смартфона на Android.
Браузер предлагает позвонить с телефона
Пользователь может вызвать ту же функцию звонка из меню, вызываемой правой кнопкой мыши. Как включить функцию, описано на сайте.
Позвонить со смартфона в меню
Для других пользователей тоже есть решение. На номер телефона можно поставить форму «Заказать звонок». Тогда по щелчку на номер выйдет форма, предлагающая клиенту оставить свои контакты, чтобы менеджер сам с ним связался.
Пример окна по клику на номер телефона
Такая форма будет полезна тем клиентам, которые не хотят звонить сами, а ждут входящего звонка из компании.
Форма «Заказать звонок» может находиться на сайте и в формате виджета. Обычно он находится на экране справа внизу.
Виджет «Заказать звонок» на странице
Насчет виджета есть два противоположных мнения: одни говорят, что такой виджет повышает конверсию, а другие считают, что раздражает пользователей. Сделать вывод о целесообразности виджета с трубкой можно после теста на сайте.
В мобильной версии его лучше отключить, потому что всплывающее окно с полями ввода может закрывать часть экрана и мешать просмотру сайта.
Как поставить форму «Заказать звонок»
Есть несколько способов, они различаются по цене, функциональности и дизайну.
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-сервисах.