Всплывающий телефон на сайте

Содержание

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

Всплывающий телефон на сайте

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

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

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

Кликабельный номер на сайте — это набор цифр, при нажатии по которому сразу выполняется вызов. Такая опция нужна специально для пользователей мобайла. Сделать звонок можно и с десктопа, если на ПК имеется ПО для разговоров.

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

Использовать активный номер на сайте важно по нескольким причинам:

  • Поведение пользователя в мобайле сильно отличается от поведения человека, который сидит за ПК. На небольшом экране не так удобно выделять, копировать и вставлять символы. Лишние пару секунд и несколько движений уже напрягают человека, привыкшего к быстроте и удобству. Высока вероятность того, что он отправится искать сайт другой компании, где совершить звонок будет легче. К тому же кликабельные номера уже давно стали обыденностью: неактивные цифры удивят пользователя.
  • Человек, открывший сайт в мобайле, не хочет подолгу выбирать и изучать товар. Есть вероятность того, что он не будет писать вам в чат или соцсеть, а сразу совершит звонок. Неактивный же номер станет препятствием на пути к покупке.
  • Почти половина людей, имеющих отрицательный опыт взаимодействия с мобильной версией страницы на сайт компании, не хотят больше ничего приобретать там. Неудавшаяся возможность совершить звонок — пользовательский опыт, который точно запомнится.
  • Согласно статистике, в России более половины пользователей пользуются интернетом с планшетов и смартфонов. И данные эти только растут. Это указывает на то, что для пользователей мобайла нужно создавать самые комфортные условия.

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

Существует несколько простых способов, как сделать номер телефона кликабельным, не потеряв при этом оформление и стили:

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

+7(999)111-22-33.

Либо вот так, если у него есть класс:

+7(999)111-22-33.

Наконец, третий пример также без лишних усилий можно преобразовать в гипертекст. При этом сохранятся первоначальные его стили:
+7(999)888-77-66.

Сохраните код, и телефонный номер станет кликабельным.

В функционале любого конструктора или CMS-системы есть несколько особых инструментов, которые позволяют сделать номер кликабельным. Полную информацию вы найдете в разделе FAQ на соответствующей площадке (Tilda, Wix, LP и т.д.). Однако есть один способ, подходящий для любого конструктора.

Механизм «Гиперссылка» при форматировании текста доступен, как правило, везде. Цифры — это текст. Следовательно, вы можете ввести их в редактор. Чтобы номер был кликабельным, обозначьте текст номера, оформите его как гиперссылку, после чего в блоке «Адрес» пропишите следующее:

tel:+79998887766.

Гиперссылка включится автоматически.

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

Для начала стоит учесть, что за сокрытие номера под другим видом отвечает class=”callibri_phone”. При наличии у вас хорошо работающего проекта, на сайте есть скрипт, и к каждому номеру в коде привязан указанный атрибут. Подмена при этом выполняется автоматически. Скрипт коллтрекинг-системы самостоятельно выполняет поиск необходимых элементов с телефонными номерами и сам их заменяет.

В ситуации, когда цифры на сайте не кликабельные, подменяться будет и простой номер в форме текста. Если же на ваш номер можно совершить звонок в один клик, то скрипт, используя класс, заменит и номер, прописанный в атрибуте “href=tel:XXX. Когда пользователь нажимает по подменному номеру, совершается звонок.

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

Источник: https://www.directline.pro/blog/kak-sdelat-nomer-telefona-na-sayte-klikabelnym/

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

Всплывающий телефон на сайте

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

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

Посмотреть Демо

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

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

HTML-код

CSS-код

/*кнопка звонка*/ .callback-bt {        background:#38a3fd;        border:2px solid #38a3fd;        border-radius:50%;        box-shadow:0 8px 10px rgba(56,163,253,0.3);        cursor:pointer;        height:68px;        text-align:center;        width:68px;        position: fixed;        right: 8%;        bottom: 18%;        z-index:999;        transition:.3s;        -webkit-animation:hoverWave linear 1s infinite;        animation:hoverWave linear 1s infinite;} .callback-bt .text-call{        height:68px;        width:68px;                border-radius:50%;        position:relative;        overflow:hidden;} .callback-bt .text-call span { text-align: center; color:#38a3fd; opacity: 0; font-size: 0;        position:absolute;        right: 4px;        top: 22px; line-height: 14px;        font-weight: 600; text-transform: uppercase; transition: opacity .3s linear; font-family: 'montserrat', Arial, Helvetica, sans-serif;} .callback-bt .text-call:hover span { opacity: 1;        font-size: 11px;}.callback-bt:hover i { display:none;} .callback-bt:hover {        z-index:1;        background:#fff;        color:transparent;        transition:.3s;}.callback-bt:hover i {        color:#38a3fd;        font-size:40px;        transition:.3s;}.callback-bt i {        color:#fff;        font-size:34px;        transition:.3s;        line-height: 66px;transition: .5s ease-in-out;} .callback-bt i { animation: 1200ms ease 0s normal none 1 running shake;        animation-iteration-count: infinite;        -webkit-animation: 1200ms ease 0s normal none 1 running shake;        -webkit-animation-iteration-count: infinite;} @-webkit-keyframes hoverWave {        0% {        box-shadow:0 8px 10px rgba(56,163,253,0.3),0 0 0 0 rgba(56,163,253,0.2),0 0 0 0 rgba(56,163,253,0.2)}40% {        box-shadow:0 8px 10px rgba(56,163,253,0.3),0 0 0 15px rgba(56,163,253,0.2),0 0 0 0 rgba(56,163,253,0.2)}80% {        box-shadow:0 8px 10px rgba(56,163,253,0.3),0 0 0 30px rgba(56,163,253,0),0 0 0 26.7px rgba(56,163,253,0.067)}100% {        box-shadow:0 8px 10px rgba(56,163,253,0.3),0 0 0 30px rgba(56,163,253,0),0 0 0 40px rgba(56,163,253,0.0)}}@keyframes hoverWave {        0% {        box-shadow:0 8px 10px rgba(56,163,253,0.3),0 0 0 0 rgba(56,163,253,0.2),0 0 0 0 rgba(56,163,253,0.2)}40% {        box-shadow:0 8px 10px rgba(56,163,253,0.3),0 0 0 15px rgba(56,163,253,0.2),0 0 0 0 rgba(56,163,253,0.2)}80% {        box-shadow:0 8px 10px rgba(56,163,253,0.3),0 0 0 30px rgba(56,163,253,0),0 0 0 26.7px rgba(56,163,253,0.067)}100% {        box-shadow:0 8px 10px rgba(56,163,253,0.3),0 0 0 30px rgba(56,163,253,0),0 0 0 40px rgba(56,163,253,0.0)}} /* animations icon */ @keyframes shake {0% { transform: rotateZ(0deg);        -ms-transform: rotateZ(0deg);        -webkit-transform: rotateZ(0deg);}10% { transform: rotateZ(-30deg);        -ms-transform: rotateZ(-30deg);        -webkit-transform: rotateZ(-30deg);}20% { transform: rotateZ(15deg);        -ms-transform: rotateZ(15deg);        -webkit-transform: rotateZ(15deg);}30% { transform: rotateZ(-10deg);        -ms-transform: rotateZ(-10deg);        -webkit-transform: rotateZ(-10deg);}40% { transform: rotateZ(7.5deg);        -ms-transform: rotateZ(7.5deg);        -webkit-transform: rotateZ(7.5deg);}50% { transform: rotateZ(-6deg);        -ms-transform: rotateZ(-6deg);        -webkit-transform: rotateZ(-6deg);}60% { transform: rotateZ(5deg);        -ms-transform: rotateZ(5deg);        -webkit-transform: rotateZ(5deg);}70% { transform: rotateZ(-4.28571deg);        -ms-transform: rotateZ(-4.28571deg);        -webkit-transform: rotateZ(-4.28571deg);}80% { transform: rotateZ(3.75deg);        -ms-transform: rotateZ(3.75deg);        -webkit-transform: rotateZ(3.75deg);}90% { transform: rotateZ(-3.33333deg);        -ms-transform: rotateZ(-3.33333deg);        -webkit-transform: rotateZ(-3.33333deg);}100% { transform: rotateZ(0deg);        -ms-transform: rotateZ(0deg);        -webkit-transform: rotateZ(0deg);}} @-webkit-keyframes shake {0% { transform: rotateZ(0deg);        -ms-transform: rotateZ(0deg);        -webkit-transform: rotateZ(0deg);}10% { transform: rotateZ(-30deg);        -ms-transform: rotateZ(-30deg);        -webkit-transform: rotateZ(-30deg);}20% { transform: rotateZ(15deg);        -ms-transform: rotateZ(15deg);        -webkit-transform: rotateZ(15deg);}30% { transform: rotateZ(-10deg);        -ms-transform: rotateZ(-10deg);        -webkit-transform: rotateZ(-10deg);}40% { transform: rotateZ(7.5deg);        -ms-transform: rotateZ(7.5deg);        -webkit-transform: rotateZ(7.5deg);}50% { transform: rotateZ(-6deg);        -ms-transform: rotateZ(-6deg);        -webkit-transform: rotateZ(-6deg);}60% { transform: rotateZ(5deg);        -ms-transform: rotateZ(5deg);        -webkit-transform: rotateZ(5deg);}70% { transform: rotateZ(-4.28571deg);        -ms-transform: rotateZ(-4.28571deg);        -webkit-transform: rotateZ(-4.28571deg);}80% { transform: rotateZ(3.75deg);        -ms-transform: rotateZ(3.75deg);        -webkit-transform: rotateZ(3.75deg);}90% { transform: rotateZ(-3.33333deg);        -ms-transform: rotateZ(-3.33333deg);        -webkit-transform: rotateZ(-3.33333deg);}100% { transform: rotateZ(0deg);        -ms-transform: rotateZ(0deg);        -webkit-transform: rotateZ(0deg);}}/* конец кнопки звонка */

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

HTML-код

CSS-код

/*кнопка обратной связи*/ .email-bt {        background:#F95C18;        border:2px solid #F95C18;        border-radius:50%;        box-shadow:0 8px 10px rgba(249,92,24,0.3);        cursor:pointer;        height:68px;        text-align:center;        width:68px;        position: fixed;        left: 8%;        bottom: 18%;        z-index:999;        transition:.3s;        -webkit-animation:email-an linear 1s infinite;        animation:email-an linear 1s infinite;} .email-bt .text-call{        height:68px;        width:68px;                border-radius:50%;        position:relative;        overflow:hidden;} .email-bt .text-call span { text-align: center; color:#F95C18; opacity: 0; font-size: 0;        position:absolute;        right: 4px;        top: 22px; line-height: 14px;        font-weight: 600; text-transform: uppercase; transition: opacity .3s linear; font-family: 'montserrat', Arial, Helvetica, sans-serif;} .email-bt .text-call:hover span { opacity: 1;        font-size: 11px;}.email-bt:hover i { display:none;} .email-bt:hover {        z-index:1;        background:#fff;        transition:.3s;}.email-bt:hover i {        color:#38a3fd;        font-size:40px;        transition:.3s;}.email-bt i {        color:#fff;        font-size:29px;        transition:.3s;        line-height: 66px;} .email-bt i {        -webkit-animation: opsimple 3s infinite;        animation: opsimple 3s infinite;} @-webkit-keyframes email-an {        0% {        box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 0 rgba(249,92,24,0.2),0 0 0 0 rgba(249,92,24,0.2)}40% {        box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 15px rgba(249,92,24,0.2),0 0 0 0 rgba(249,92,24,0.2)}80% {        box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 30px rgba(249,92,24,0),0 0 0 26.7px rgba(249,92,24,0.067)}100% {        box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 30px rgba(249,92,24,0),0 0 0 40px rgba(249,92,24,0.0)}}@keyframes email-an {        0% {        box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 0 rgba(249,92,24,0.2),0 0 0 0 rgba(249,92,24,0.2)}40% {        box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 15px rgba(249,92,24,0.2),0 0 0 0 rgba(249,92,24,0.2)}80% {        box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 30px rgba(249,92,24,0),0 0 0 26.7px rgba(249,92,24,0.067)}100% {        box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 30px rgba(249,92,24,0),0 0 0 40px rgba(249,92,24,0.0)}} @keyframes opsimple {0% { opacity: 0;}40% { opacity: 1;} 80% { opacity: 1;}100% { opacity: 0;}} @-webkit-keyframes opsimple {0% { opacity: 0;}40% { opacity: 1;}80% { opacity: 1;}100% { opacity: 0;}}/* конец кнопки звязи */

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



Источник: http://wordsmall.ru/html-i-css/kruglaya-knopka-obratnogo-zvonka-css-s-animaciej.html

Кнопка «обратного звонка» от А до Я

Всплывающий телефон на сайте
Оригинал статьи: https://blog.callibri.ru/knopka-obratnogo-zvonka-ot-a-do-ya

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

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

И среди ваших клиентов такие люди обязательно есть.

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

«Купить или не купить?», – именно с такой мыслью посетители изучают сайт интернет-магазина.

Вовремя показанная фраза: «Оставьте свой номер телефона, и мы вам перезвоним» способна подтолкнуть потенциального покупателя к активным действиям.

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

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

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

Сайт просто информирует о товарах или услугах, а в живом общении менеджер их продает. Для покупателя преимущества «обратного звонка» очевидны:

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

Кому нужен callback

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

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

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

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

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

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

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

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

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

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

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

Кнопка «обратного звонка» от А до ЯКнопка «обратного звонка» от А до Я

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

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

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

https://www.youtube.com/watch?v=uPS3l7vqbV4

Такой призыв скорее заставить покинуть сайт, чем оставить свой номер.

Как не взбесить потенциального покупателя?

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

Как правильно настроить обратный звонок

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

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

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

Кнопка «обратного звонка» от А до Я

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

3. Настроить порядок дозвона.

  • Сначала дозвон до посетителя сайта, потом до оператора. Посетитель оставляет номер на сайте, система дозванивается до него и только после того, как он возьмет трубку, начинает звонить менеджеру. По сути получается, что клиент ждет, когда возьмут трубку. Этот вариант подойдет тем, кто работает с крупными корпоративными клиентами. Как правило, у таких клиентов есть собственная мини-АТС и процесс соединения с абонентом занимает длительное время.
  • Дозвон до оператора, а потом до посетителя сайта. Чаще всего настраивают по этой схеме. Вариант подходит тем, кто работает с обычными потребителями. Человек принимает звонок, берет трубку и сразу начинает общаться с представителем компании.

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

В настройках Callibri все время рабочее, потому что мы работаем круглосуточно 7 дней в неделю.
5. Настроить online-звонок – возможность позвонить прямо через браузер, используя гарнитуру или встроенный микрофон.

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

Кнопка «обратного звонка» от А до Я

Избавляемся от «пустых» звонков

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

  • Мало информации на сайте. Когда посетитель что-то не нашел, он заказывает звонок не чтобы что-то купить. Справиться с этой проблемой помогут:
  • Хорошая навигация сайта. Если пользователю удобно искать и находить информацию на сайте, то ему не придет в голову звонить вам; если же на сайте ничего невозможно найти, то за недостающими сведениями он обратится к менеджеру.
  • Раздел FAQ значительно облегчает пользователям жизнь. Здесь можно найти ответы на все “что, как, зачем и почему”. Если цель кнопки “обратный звонок” на вашем сайте продавать, то стоит дать как можно больше исчерпывающей информации именно на сайте, чтобы посетители не отвлекали операторов дурацкими расспросами.
  • Онлайн-консультант, где можно уточнить мелкие детали. Чем больше способов коммуникации, тем чаще потенциальные клиенты будут общаться с менеджерами. По статистике большинство предпочитают общение в чате, так что если вы предоставите такую возможность, “пустых” звонков станет меньше.
  • Посетитель заказывает обратный звонок, потому что ему это предложили, но не понимает, зачем. Возможно, стоит уточнить, для чего нужен «обратный звонок»: мы расскажем об условиях акции, поможем подобрать нужную модель, рассчитаем смету проекта и т.п.

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

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

  • Обратный звонок не совсем обратный звонок. В этом случае после того, как человек оставил на сайте свой номер, менеджеру приходит письмо. То есть здесь задействована не автоматическая система, а просто уведомление, что клиент хочет, чтобы с ним связались. Менеджер может вовремя не увидеть письмо или просто не перезвонить. Как результат – потерянный клиент.
  • Обратный звонок настроен так, что сначала система звонит пользователю, а потом менеджеру. А он сейчас говорит по другой линии, пьет чай, зависает в интернете или вообще пошел погулять, в общем не может взять трубку. Результат тот же – потерянный клиент.

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

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

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

Оцениваем эффективность «обратного звонка»

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

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

Обратный звонок Callibri, так же как и любой другой способ коммуникации с клиентом, позволяет собрать полную информацию о посетителе сайта:

  • Источник перехода
  • Адрес сайта, с которого пришел посетитель
  • Рекламная кампания и конкретное объявление
  • Поисковый запрос
  • Город
  • UTM-метки
  • Посадочная страница

Оценивать эффективность обратного звонка можно по нескольким критериям:

  • Востребованность. Очевидно, что если вам заказывают 2 обратных звонка в месяц, то это не самый эффективный инструмент продаж.
  • Конверсия. Оценивать нужно не только количество звонков, но и их качество. Поэтому стоит проанализировать, сколько обратных звонков привело к продажам. Конверсия в продажу – один из главных показателей эффективности инструмента.
  • Реклама. Анализ целевых звонков позволит понять, какие рекламные площадки работают, а какие приводят пустой трафик и спамеров на сайт.
  • Региональность. Откуда чаще всего заказывают обратный звонок, клиенты из каких регионов покупают у вас и какие именно товары и услуги пользуются наибольшим спросом.
  • Запись обратного звонка – это ценный источник информации для анализа. Во-первых, нужно внимательно отнестись к вопросам, которые задают клиенты. Возможно, стоит оптимизировать сайт или добавить какую-то недостающую информацию. Во-вторых, можно понять потребности своей целевой аудитории. В-третьих, выявить ошибки и просчеты в организации работы компании. Например, менеджер по телевизорам начинает давать консультацию по холодильникам вместо того, чтобы переключить на профильного специалиста. 

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

И если результаты неудовлетворительные, то всегда можно что-то исправить и перенастроить, чтобы инструмент «обратный звонок» начал работать на повышение конверсии вашего сайта.

В Callibri все это отображается в Едином журнале лидов.

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

  • Настраивать время работы функции в соответствии с работой менеджеров.
  • Выбирать режим, при котором на звонок сначала отвечает менеджер, а уже потом клиент. Да, клиент будет дольше ждать звонка, но это лучше, чем он будет держать трубку и не дождется ответа.
  • Понимать, что ОЗ это просто еще один вид коммуникаций. Он не единственный и не основной. Некоторым категориям граждан он интересен. На него не надо возлагать надежды или концентрироваться, он просто должен быть и работать.
  • Предлагать и другие режимы коммуникаций, которые сэкономят деньги клиента: федеральные номера 8800 и 8804, а также онлайн звонок.

Источник: https://zen.yandex.ru/media/id/598d82593c50f755a6968e10/knopka-obratnogo-zvonka-ot-a-do-ia-5a059a03dcaf8e58fc646e38

Как настроить звонок в компанию по клику с сайта

Всплывающий телефон на сайте

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

Юзабилити — это удобство использования сайта.

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

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

Как телефон на сайте связан с топом

По результатам исследования факторов ранжирования 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

Вместо “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-сервисах.

Теги поста или какие разделы почитать еще:

  • E-Commerce
  • Google
  • Работа сайта
  • Юзабилити
  • Яндекс

Источник: https://pr-cy.ru/news/p/7050-povyshaem-yuzabiliti-zvonok-v-kompaniyu-po-kliku-s-sayta

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

Всплывающий телефон на сайте

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

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

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

А если человеку нужно позвонить в несколько десятков компаний? Найти свободный столик в ресторане для ужина с семьей или просто срочно найти доставку какой-нибудь еды? Он сэкономит время и найдет похожие условия на сайте конкурентов, которые не заставят его тратить время на copy/past. 

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

В первую очередь рассмотрим вариант, когда у вас есть доступ к HTML-коду сайта.

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

+7(999)888-77-66

Или так (если присвоен класс):

+7(999)888-77-66

Третий пример тоже без особых усилий становится гипертекстом. При этом сохраняются его изначальные стили:

+7(999)888-77-66

Сохраняем код — вуаля, телефон стал кликабельным! 

Если вы пользуетесь CMS/конструктором сайтов, вероятнее всего в функционале конструктора есть специальные инструменты, чтобы сделать номер телефона активным — подробнее об этом нужно узнавать в FAQ каждой платформы (например, LP, Wix, Tilda).

Но есть небольшой лайфхак на случай, если этот функционал вы так и не найдете. 

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

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

tel:+7XXXXXXXXXX

где «+7XXXXXXXXXX» — номер телефона, на который должен происходить дозвон. Уух! А вы сильны, раз дочитали до этого момента.

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

Разберем на примере коллтрекинга Callibri (хотя вообще эти правила примерно так же работают для любого сервиса подмены номера). 

За подмену номера отвечает атрибут class=”callibri_phone”. Если у вас есть активный настроенный проект, на сайте установлен скрипт и каждому номеру телефона в коде присвоен атрибут class=”callibri_phone”, подмена происходит автоматически. Скрипт Callibri сам находит нужные элементы с номерами телефонов и подменяет их.

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

Но если на ваш номер уже можно позвонить в один клик, скрипт Callibri c помощью class=”callibri_phone” подменит и номер, указанный в атрибуте “href=”tel:XXX”, на который происходит вызов.

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

Код, в котором подменяется не только текст номера на сайте, но и номер для вызова, выглядит так: 

+7(999)888-77-66

В этом случае, кроме потери оформления, подмена произойдёт только для элемента

. Таким образом, видимый телефон в коде сайта подменится. А при клике элемент будет ссылаться на основной номер телефона, без подмены. То есть вы не узнаете, откуда пришел клиент: вместо подменного номера он позвонит по вашему основному телефону. 

Поздравляем, теперь вы достойны посвящения в мастера HTML. 

Обновление номера до кликабельного — большой плюс для мобильной версии сайта. С ним вы намного ближе к своему клиенту — буквально в паре кликов.А можно все это не настраивать и просто установить на сайт обратный звонок Callibri. Так вам смогут позвонить даже пользователи, которые зашли на сайт с компьютера.
Подробнее про callback

Кстати, по этому же принципу вы можете сделать кликабельный email на своем сайте! Это важно для B2B — даже если доля мобильного трафика на сайт не очень высокая, все равно есть процент людей, которые захотят отправить вам вопрос, запросить коммерческое предложение или отправить спецификацию через мобильные устройства (смартфон или планшет). 

Чтобы email стал кликабельным, вам нужно поставить атрибут .

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

mail@server.

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

Источник: https://blog.callibri.ru/kak-sdelat-klikabelnyy-nomer-telefona-na-sayte

Поделиться:
Нет комментариев

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

    Ваш e-mail не будет опубликован. Все поля обязательны для заполнения.

    ×
    Рекомендуем посмотреть