Мессенджеры на сайт

Простая интеграция сайта с Whatsapp, Viber и Telegram

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

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

Как установить мессенджеры на сайт

Для того чтобы пользователь по клику на иконку мессенджера (Ватсапа, Вайбера или Телеграмма) сразу переходил в чат с менеджером, нужно установить на сайт специальные ссылки. И разместить иконки.

ССЫЛКА НА WHATSAPP НА САЙТЕ:

<a title="Whatsapp" href="whatsapp://send?phone=79270000000"><img src="images/whatsapp_icon.jpg" alt="Написать в Whatsapp" /></a>

ССЫЛКА НА TELEGRAM НА САЙТЕ:

<a title="Telegram" href="https://telegram.me/логинкомпании" target="_blank"><img src="images/telegram_icon.jpg” alt="Написать в Telegram" /></a>

Заменяем номера телефонов в примерах выше и загружаем на сайт иконки.
Для Телеграмма вместо номера указываем логин (без знака @ в начале).

ССЫЛКА НА VIBER НА САЙТЕ:

<a title="Viber" href="viber://chat?number=79270000000"><img src="images/viber_icon.jpg" alt="Написать в Viber" /></a>

Эти ссылки нужно установить в html-код сайта. Обычно в шапку или под ней. Рядом с номером телефона.

И заменить выделенные красным номера на мобильный телефон менеджера. На его телефоне, разумеется, должны быть установлены все три приложения.

Для Телеграмма, вместо номера, нужно указать логин. Задать его можно в настройках приложения.
Заходим в Setting, и в пункте username указываем логин.

В коде его нужно прописывать без знака «@».

Где найти значки

Приложены к гайду или по ссылке

https://www.iconfinder.com/search/?q=w...price=free
http://www.iconsearch.ru/search/?q=whatsapp

С виджетом и по красоте

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

Ссылка на сайт для звонка

<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://t.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');
}
});

Вот и все!
Кнопки мессенджеров на сайт сделаны самостоятельно. Нет нужды платить сервисам за аналогичные платные виджеты при таком же функционале.