Визуальная структура
Кнопки для мессенджеров на сайт
-
Title
Кнопки для мессенджеров на сайт
Давайте сегодня поговорим о том как на сайте сделать кнопки или кдикабельные ссылки, при нажатии на которых нас будет перебрасывать в мессенджер или web версию нужного нам сайта.
А именно поговорим не только о кликабельном номере телефона и почте, но и о viber, telegram и whatsapp так как это самые популярные мессенджеры.
Главная задача в том что они должно работать как в браузере независимо от браузера или ос, так и на мобильных гаджетах.Ну что поехали...
-
H2
Почта
mailto:raslmordor@gmail.com -
H2
Телефон
tel:+78142332211или
<a href="tel:+78142332211">+7(814)-233-22-11</a> -
H2
Viber
Вот такой способ не подходит! Сразу скажу!
<a href="viber://forward?text=Номер телефона"</a>И такой тоже…
<a href="viber://chat?number=%2BНомерТелефона">Viber</a>Вайбер открывается но молчит, в новых версиях, старые версии работают по такому принципу, так как нам нужен универсальный рабочий вариант, я сразу хочу предупредить что бы так не делали!
Вот это рабочий вариант!
<a href="viber://add?number=375298538135">Viber</a>Номер указывайте полностью, с кодом. Но без знака плюс в начале.
%2Bэто и есть знак плюс.
При нажатии на ссылочку, приложение Viber открывается без ошибок на компьютере так и на телефоне. -
H2
Telegram
Авторизация в телеграмм устроена по номеру телефона, но все действия привязываются к ник нэйму.
При копировании ник нэйма из телеграмм уберите в самом начале знак «@».<a href="tg://resolve?domain=@raslmordor">Telega</a> -
H2
WhatsApp
Все элементарно просто, вставляем номер телефона, без знака «+» вначале и используем.
Этот работает не на всех версиях.<a href="whatsapp://send?phone=НомерТелефона">Whatsapp</a>Этот способ самый лучший так как использует версию веб интерфейса WhasApp
https://wa.me/375298538135На момент написания статьи, все было протестировано на трех ОС, Виндовс Макинтош и Линукс.
Все работало идеально. Но есть одно но, приложения должны быть официальные с дистрибутивов производителя.
Например Телеграмм и ВотсАпп портативные не открывали правильно данные ссылки, они просто открывались но не переходили в сообщения с нужным человеком. -
H2
Skype
Для того что бы сделать такую кнопку-ссылку для скайпа нужен ваш точный логин в скайпе, новые аккаунты скайпа идут с подписью
:live, если у вас такая имеется, она нужна тоже. Копируйте ваш полный логин в скайпе и вставляйте вместоВашЛогин.<a href="skype:ВашЛогин?chat">Skype</a>У скайпа есть мини Api — шечка, вы можете заменить слово chat на следующее.
chat— начать чатcall— позвонитьadd— добавить в контактыuserinfo— показать профиль пользователяvoicemail— оставить голосовое сообщениеsendfile— отправить файл
-
Перемещай схему двумя пальцами на трекпаде или перетаскивай свободную область. Для масштаба используй pinch, Ctrl / Command с прокруткой или кнопки.