Кнопки мессенджеров на сайт бесплатно самостоятельно

Кнопки мессенджеров на сайт

В этой статье рассмотрим как сделать на сайт самостоятельно абсолютно бесплатно кнопки мессенджеров 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.

Всем легкого кодинга!)

Поделиться

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

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