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

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

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

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

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

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

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

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

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

Теперь магия 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 скрывать кнопку. Все же делаем ее для мобильных пользователей.

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

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