В этой статье рассмотрим как сделать на сайт самостоятельно абсолютно бесплатно кнопки мессенджеров whatsapp, viber, telegram, вконтакте.
Прежде всего необходимо создать ссылки на мессенджеры с сайта так чтобы они срабатывали при клике на сайте переводя в нужный мессенджер сразу в переписку или звонок.
Ссылка на сайт для звонка
<a title="Позвонить" href="tel:+120345678910">Позвонить</a>
Ссылка на сайт для Whatsapp (Вацап или воцап как его только не называют))))
<a title="Whatsapp" href="whatsapp://send?phone=79270000000">Whatsapp</a>
Ссылка на сайт для Viber / Вайбер
<a title="Viber" href="viber://chat?number=79270000000">Viber</a>
Ссылка на сайт для VK/ Вконтакте
<a title="Вконтакте" href="https://vk.com/im?media=&sel=id_аккаунта">Вконтакте</a>
Ссылка на сайт для Telegram/ Телеграм
<a title="Telegram" href="https://telegram.me/логинкомпании">Telegram</a>
Теперь обернем все ссылки в divы добавим им классы. В каждую ссылку мессенджера для сайта добавим вместо текста иконки мессенджеров. И сделаем основную кнопку чата.
При нажатии на эту кнопку список со ссылками будет раскрываться. Тут не обойдется без jQuery. Но т.к. эта библиотека подключена уже на 99,9% сайтов, то грех не использовать ее вместо придумывания своего «велосипеда»)
Получаем вот такую конструкцию html
<div class="messenger"> <div title="Чат с менеджером" class="messenger-btn"><img src="https://volgo-prime.ru/img/icons/chat.svg" alt="Чат с менеджером" /></div> <div id="messenger-links" class="messenger-links"> <a title="Позвонить" href="tel:+120345678910"><img src="https://volgo-prime.ru/img/icons/phone-icon.svg" alt="Позвонить" /></a> <a title="Whatsapp" href="whatsapp://send?phone=79270000000"><img src="https://volgo-prime.ru/img/icons/whatsapp-icon.svg" alt="Whatsapp" /></a> <a title="Viber" href="viber://chat?number=79270000000"><img src="https://volgo-prime.ru/img/icons/viber-icon.svg" alt="Viber" /></a> <a title="Вконтакте" href="https://vk.com"><img src="https://volgo-prime.ru/img/icons/vk-icon.svg" alt="Вконтакте" /></a> </div> </div>
Добавляем стили CSS:
.messenger {
display: block;
position: fixed;
right: 50%;
bottom: 50%;
width: 260px;
height: 60px;
/* overflow: hidden; */
}
.messenger-btn {
padding: 14px;
display: block;
width: 60px;
height: 60px;
border-radius: 60px;
background-color: #9fbce0;
position: absolute;
right: 0;
top: 0;
cursor: pointer;
z-index: 2;
}
.messenger-btn img {
width: 32px;
height: 32px;
}
.messenger-links {
position: absolute;
left: 50px;
top: 10px;
width: 200px;
transform: scale(0);
transform-origin: 100% 50%;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
z-index: 0;
}
.messenger-links.show {
left: 0;
transform: scale(1);
}
.messenger-links a {
width: 40px;
margin-left: 4px;
}
.messenger-links img {
max-width: 40px;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.messenger-links a:hover img {
transform: scale(1.1);
text-decoration: none;
}
И получаем вот такую красоту. (В примере отсутствует телеграм, т.к. заказчику он был не нужен при разработке. Но принцип добавления ссылки такой-же)
Теперь осталось только добавить скрипт позволяющий при клике на иконку чата разворачивать блок ссылок и сворачивать при клике на ту же иконку либо при клике на любом свободном месте.
JS код:
/* При клике показываем или скрываем кнопки мессенджеров */
var menuBtn = $('.messenger-btn'),
menu = $('.messenger-links');
menuBtn.on('click', function() {
if ( menu.hasClass('show') ) {
menu.removeClass('show');
} else {
menu.addClass('show');
}
});
/* Скрыть div при клике в любом месте сайта кроме самого div */
$(document).mouseup(function (e){
var div = $('.messenger');
if (!div.is(e.target)
&& div.has(e.target).length === 0) {
$('.messenger-links').removeClass('show');
}
});
Вот и все!
Кнопки мессенджеров на сайт сделаны самостоятельно. Нет нужды платить сервисам за аналогичные платные виджеты при таком же функционале.
Рабочий пример можно посмотреть в моем CodePen.
Всем легкого кодинга!)