Как увеличить количество звонков клиентов с сайта при помощи CSS

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

В данном примере использовался платный сервис. Но я решил сделать эту кнопку сам при помощи HTML/CSS. Ниже покажу как это все легко делается и вы сами сразу сможете внедрить на свои сайты, лендлинги для повышения целевых звонков.

Сразу обрадую владельцев сайтов на WordPress: вот готовый плагин от меня CallPhone'r с расширенным функционалом по настройкам.

call

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

Подобные вещи применимы на коммерческих проектах и ИМ. К слову, я могу для вас создать любой сайт на WordPress, а компания точка.ru предлагает узнать стоимость создания сайта интернет магазина у нее.

Перед закрывающим </body> (в подвале сайта) вставьте следующее:

<a href="tel:+78121234567" class="call"><img src="/images/call.png" alt="" /></a>

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

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

call

Теперь магия CSS.

@media screen and (min-width: 721px) {a.call {display: none;}}
@media screen and (max-width: 720px){
a.call {
bottom: 10px;
display: block;
left: 45%;
position: fixed;
z-index: 10000;
}
a.call img {
width:50px;
height:50px;
-webkit-animation: heartbeat 1s infinite;
-moz-animation: heartbeat 1s infinite;
-o-animation: heartbeat 1s infinite;
animation: heartbeat 1s infinite;
background: #47A447;
border: 3px solid #fff;
border-radius: 45px;
opacity: 0.9;
box-shadow: 0 0 2px 2px #e4e4e4;
}
 
@-webkit-keyframes heartbeat {
92% {-webkit-transform: scale(1, 1);}
94% {-webkit-transform: scale(1.2, 1.2);}
96% {-webkit-transform: scale(1, 1);}
98% {-webkit-transform: scale(1.1, 1.1);}
100% {-webkit-transform: scale(1, 1);}
}
@-moz-keyframes heartbeat {
92% {-moz-transform: scale(1, 1);}
94% {-moz-transform: scale(1.2, 1.2);}
96% {-moz-transform: scale(1, 1);}
98% {-moz-transform: scale(1.1, 1.1);}
100% {-moz-transform: scale(1, 1);}
}
@-o-keyframes heartbeat {
92% {-o-transform: scale(1, 1);}
94% {-o-transform: scale(1.2, 1.2);}
96% {-o-transform: scale(1, 1);}
98% {-o-transform: scale(1.1, 1.1);}
100% {-o-transform: scale(1, 1);}
}
@keyframes heartbeat {
92% {transform: scale(1, 1);}
94% {transform: scale(1.2, 1.2);}
96% {transform: scale(1, 1);}
98% {transform: scale(1.1, 1.1);}
100% {transform: scale(1, 1);}
}
}

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

Дальше уже стили оформления внешнего вида, расположения на экране (снизу и "прилеплена"), полупрозрачность.

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

Привет. Меня зовут Виталик и я автор этого блога.

Отблагодарить Z888279575784 R109400923968 или ЯД 41001651742138

Оказываю услуги по созданию и настройке сайтов на WordPress (верстка, натяжка, мелкие правки и корректировка). Обращайся и не стесняйся.

Мои Контакты. Я в Twitter @mojWP. Смотри на Youtube. Читай RSS блога.

Опубликовано 5 комментариев
  1. Артем Черкасов (83 комм.):
    http://zarabotka.guru/

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

  2. Александр (1 комм.):
    http://ydguide.com

    Спасибо Вам за полезную статью, "магия CSS" работает!

  3. Иван (1 комм.):
    http://profdesigner.com

    Спасибо, отличный функционал требующий не так много усилий!

  4. Антон (4 комм.):
    http://weareweb.ru

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

  5. Дмитрий (1 комм.):

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

Не держи в себе. Выскажись.

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

© 2011-2016 | mojwp.ru | Копирование материала разрешено только с письменного согласия
WordPress: 11.15MB | MySQL:38 | 0,332sec
Мощный SEO-плагин для WordPress.
Рекомендую для всех типов сайтов!

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

Читайте мой обзор и советы по плагину Clearfy

Спасибо, не показывайте мне эту штуку больше!