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