Мессенджеры на сайт
Сейчас популярны мессенджеры. Пользователи активно в них общаются, шлют друг другу смешные стикеры, кидают войсы и созваниваются, не тратя деньги на мобильную связь.
А для компаний, популярность мессенджеров изменила сам формат общения с клиентами. Многие пользователи уже не хотят звонить и общаться голосом, им удобнее написать в любимый мессенджер и получить консультацию в чате с менеджером.
Как установить мессенджеры на сайтДля того чтобы пользователь по клику на иконку мессенджера (Ватсапа, Вайбера или Телеграмма) сразу переходил в чат с менеджером, нужно установить на сайт специальные ссылки. И разместить иконки.
ССЫЛКА НА WHATSAPP НА САЙТЕ:<a title="Whatsapp" href="whatsapp://send?phone=79270000000"><img src="images/whatsapp_icon.jpg" alt="Написать в Whatsapp" /></a> |
<a title="Telegram" href="https://telegram.me/логинкомпании" target="_blank"><img src="images/telegram_icon.jpg” alt="Написать в Telegram" /></a> |
Заменяем номера телефонов в примерах выше и загружаем на сайт иконки.
Для Телеграмма вместо номера указываем логин (без знака @ в начале).
<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> |
.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');
}
}); |
Кнопки мессенджеров на сайт сделаны самостоятельно. Нет нужды платить сервисам за аналогичные платные виджеты при таком же функционале.
— Бесплатные Сайты и CRM.