КАК СОЗДАТЬ КНОПКУ ОБРАТНОЙ СВЯЗИ НА САЙТЕ С ПЕРЕХОДОМ В МЕССЕНДЖЕРЫ
Кнопка обратной связи на вашем сайте может иметь разный дизайн, можно поставить любую иконку, но смысл будет всегда тот же - кликнув по такой кнопке посетитель сайта сможет выбрать определенный мессенджер и перейти в него для связи с вами, например, с целью заказа продукта или уточнения информации.
В кнопку обратной связи можно добавить ссылки на любой мессенджер или социальную сеть. Примеры таких ссылок будут приведены ниже. В каждую из них необходимо будет подставить ваш номер телефона либо название аккаунта (для Телеграм и Инстаграм).

Telegram - https://t.me/название аккаунта Телеграм
WhatsApp - whatsapp://send?phone=XXXXXXXXXXX (XXX... - номер телефона в международном формате)
Viber - viber://chat?number=%2B*********** (***... - номер телефона в международном формате )
Instagram - https://ig.me/m/название аккаунта Instagram

А теперь переходим непосредственно к фрагменту кода для вставки.

Ниже будет HTML код, где необходимо будет вставить ссылки на собственные мессенджеры и соц. сети, После чего можно копировать весь код и вставлять в раздел head вашего сайта.


<div class="messenger">
  <div title="Чат с менеджером" class="messenger-btn"><img src="https://img.icons8.com/ios/50/imessage--v1.png"/></div>
  <div id="messenger-links" class="messenger-links">

    <a title="Telegram" href="https://t.me/название аккаунта Телеграм
src="https://img.icons8.com/color/144/null/telegram-app--v1.png"/></a>
    <a title="Whatsapp" href="whatsapp://send?phone=ХХХХХХХХХХ"><img src="https://img.icons8.com/color/144/null/whatsapp--v1.png"/></a>
<a title="Instagram" href="https://ig.me/m/название аккаунта Instagram"><img src="https://img.icons8.com/fluency/48/instagram-new.png"/></a>
  </div>
</div>

<style>
.messenger {
display: block;
position: fixed;
right: 2%;
bottom: 5%;
width: 180px;
height: 60px;
z-index: 1000;
/* overflow: hidden; */
}
.messenger-btn {
padding: 14px;
display: block;
width: 40px;
height: 40px;
border-radius: 60px;
border: 2px solid black;
background-color: #ffffff;
position: absolute;
right: 0;
top: 0;
cursor: pointer;
z-index: 1000;
}
.messenger-btn img {
width: 38px;
height: 38px;
z-index: 1000;
}
.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: 50px;
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;
}
</style>

<script>

var menuBtn = $('.messenger-btn'),
menu = $('.messenger-links');
menuBtn.on('click', function() {
if ( menu.hasClass('show') ) {
menu.removeClass('show');
} else {
menu.addClass('show');
}
});

$(document).mouseup(function (e){
var div = $('.messenger');
if (!div.is(e.target)
&& div.has(e.target).length === 0) {
$('.messenger-links').removeClass('show');
}
});
</script>
После вставки кода на страницу появится кнопка обратной связи с возможностью написать в мессенджеры.