Содержание
- 1 Зачем делать активную ссылку на мессенджер?
- 2 В чем сложность?
- 3 Как поставить ссылку на свои профиль в Telegram?
- 4 Как поставить ссылку на свой профиль в WhatsApp?
- 5 Как поставить ссылку на свой профиль в Viber?
- 6 Пример работы
- 7 Шаблоны ссылок для размещения на сайте
- 8 Как сделать прямую ссылку на номер телефона
- 9 Ссылка на адрес эл. почты (Email)
- 10 Как сделать ссылку на Telegram
- 11 Как сделать ссылку на Viber на сайте
- 12 Как правильно сделать ссылку на WhatsApp
- 13 Как сделать ссылку на Skype
- 14 Ссылка на VK
- 15 Ссылка на мессенджер Facebook
- 16 Шаг 1
- 17 Шаг 2
- 18 Шаг 3
- 19 Шаг 4
- 20 Шаг 5
Привет, друзья. Сегодня поговорим о том, как сделать активную ссылку на Telegram, Whatsapp и Viber, то есть на свои профили или группы в этих замечательных (и не очень) мессенджерах.
Речь идет о ссылках, подобных телефонным или для почты, когда, кликая по ним открывается ваше приложение для работы с почтой или набранный номер.
Подобную операцию можно провернуть и с мессенджерами. Многие активно используют их (ссылки на мессенджеры), в построении автоворонок и, говорят, что такие мобильные лендинги имеют невероятную конверсию.
Зачем делать активную ссылку на мессенджер?
Мессенджеры пользуются огромной популярностью. Многие заводят каналы и паблики, так как информацию можно доносить прямо в телефон целевой аудитории, да еще и push-уведомлением, а значит пользователь обязательно увидит ваше сообщение.
Кроме того, оставляя такую ссылку на своем сайте, мы позволяем написать нам, ведь для многих звонок — это стресс, писать сообщение намного проще. Но это еще не все, ведь некоторым невыгодно звонить из региона в регион, или из страны в страну, а мессенджеры сделают звонок бесплатным.
В чем сложность?
Проблемы начинаются в тот момент, когда нужно поддерживать и мобильную версию и десктопную, то есть в 99% случаев. Дело в том, что приложение для телефонов и приложение для компьютера работают с разными ссылками и получается, что если указать ссылку для смартфона, то приложение для ПК сработает некорректно или совсем не сработает. Это касается мессенджера Viber, при этом WhatsApp и Telegram не испытывают подобных проблем.
Кроме того, не все знают как именно должна выглядеть ссылка, чтобы она открывала приложения. Чтобы вам не приходилась искать на разных сайтах, я сделал эту статью с инструкцией как правильно ставить активную ссылку на сайте, чтобы при клике на нее открывался мессенджер и сразу отправлял пользователя в чат с вами.
Давайте разбираться как должен выглядеть атрибут «href» у ссылок на тот или иной мессенджер.
Как поставить ссылку на свои профиль в Telegram?
Как я уже говорил с этим замечательным мессенджером нет никаких проблем в плане проставления ссылки. Главное правильно прописать значение в атрибуте href. Для этого достаточно воспользоваться шаблоном:
Написать в Телеграм
Как поставить ссылку на свой профиль в WhatsApp?
С проставление ссылки на свой профиль в мессенджере WhatsApp, тоже никаких проблем нет. Кроме того, есть возможность даже добавить текст по умолчанию, который уже будет набран и пользователю останется его только отправить.
Ссылка должна выглядеть следующим образом:
Написать в WhatsApp
Где:
- “380950000000” – ваш номер телефона,
- “?text=” – параметр содержащий текст по умолчанию,
- “%20” – символ пробела в сообщении.
Тут, как видите, тоже все достаточно просто.
Как поставить ссылку на свой профиль в Viber?
Чтобы поставить правильную ссылку на Viber, придется воспользоваться PHP для определения устройства. Если у вас страница сохранена в расширении html, то придется пересохранить в .php. Это никак не повлияет на работоспособность страницы.
Итак, выше я писал, что десктопное и мобильное приложение Viber открывается по разным ссылкам, что создает определенные сложности при добавлении такой ссылки на сайт. Для мобильных устройств используется такой подход формирования ссылки:
Написать в Viber
Для ПК – такой:
Написать в Viber
Для того, чтобы определить устройство при помощи PHP, в самом простейшем случае можно воспользоваться простейшей функцией, которая определяет USER_AGENT устройства, а затем, в зависимости от того, опередила ли функция устройство как мобильное или нет, показывать ту или иную ссылку.
function check_mobile_device() { $mobile_agent_array = array('ipad', 'iphone', 'android', 'pocket', 'palm', 'windows ce', 'windowsce', 'cellphone', 'opera mobi', 'ipod', 'small', 'sharp', 'sonyericsson', 'symbian', 'opera mini', 'nokia', 'htc_', 'samsung', 'motorola', 'smartphone', 'blackberry', 'playstation portable', 'tablet browser'); $agent = strtolower($_SERVER['HTTP_USER_AGENT']); foreach ($mobile_agent_array as $value) { if (strpos($agent, $value) !== false) return true; }; return false; };
Расположить функцию, можно, например в самом начале страницы, перед ‘doctype’ или вынести в отдельный файл и там же подключить его.
После этого, в месте где будет выводиться ссылка на Viber используйте такую проверку:
<? if(check_mobile_device()) : Viber <? else : Viber <? endif;
Теперь, если человек зашел с ПК, то ему покажется ссылка для десктопного приложения, а если с мобильного устройства, то ссылка для смартфона или планшета.
Конечно же есть и более надежные способы для определения устройства. Если вам по какой-то причине не хватило устройств в функции, которую привел я, то можете воспользоваться PHP-классом Mobile-Detect, который специально создан для этих целей (определять устройство).
Пользоваться им достаточно просто:
- Подключаем файл с Классом.
- Создаем новый экземпляр класса.
- Делаем проверку.
Звучит страшнее, чем есть на самом деле.
require_once 'functions/Mobile_Detect.php'; $detect = new Mobile_Detect; if ( $detect->isMobile() ) { // Здесь пишем код или разметку для мобильного } else { // Здесь код или разметку для Десктопа }
Надеюсь, теперь у вас не возникнут проблемы с добавлением ссылок на сайт, которые ведут на ваши профили в мессенждерах. Если возникнут вопросы, задавайте в комментариях.
Пример работы
В данной статье мы разместим HTML шаблоны для ссылок на мессенджеры, социальные сети, телефон и E-mail для размещения на сайте.
Шаблоны ссылок для размещения на сайте
Как сделать прямую ссылку на номер телефона
Html-код ссылки на номер телефона для копирования:
tel:+74955555555
1 |
+7(495) 555-55-55 |
+7(495) 555-55-55
Пример работы: +7 (495) 555-55-55
При нажатии на ссылку с мобильных устройств будет предложено набрать указанный номер, на десктопе – выбрать приложение для звонка.
Ссылка на адрес эл. почты (Email)
Чтобы сделать кликабельный e-mail используйте данный Html-код:
mailto:[email protected]
1 |
[email protected]”>Пример ссылки на емайл |
[email protected]”>Пример ссылки на емайл
Как работает: Пример ссылки на емайл
При нажатии на ссылку будет открыта почтовая программа, заданная по умолчанию, в поле «Получатель» будет подставлен адрес электронной почты, указанный в HTML-ссылке.
Как сделать ссылку на Telegram
Открыть чат с пользователем. Работает только по никнейму (имени пользователя). Замените имя пользователя в шаблоне “jack_malbon” на свое:
Вариант 1:
https://telegram.me/jack_malbon
1 |
Написать автору |
Написать автору
Как работает: Написать автору
tg://resolve?domain=jack_malbon
1 |
Написать автору |
Написать автору
Как работает: Написать автору
Таким же образом можно сделать ссылку на канал или группу.
Где взять имя пользователя Telegram
</h3>Android
iPhoneКак сделать ссылку на Viber на сайте
1. Открыть чат с номером
Замените “4957777777”
на номер пользователя Viber. Вместо плюса используется “%2B”:
viber://chat?number=%2B4957777777
1 |
Ссылка на чат Viber |
Ссылка на чат Viber
Как работает: Ссылка на чат Viber
2. Добавить контакт (работает только c телефонов):
viber://add?number=4957777777
1 |
Добавить контакт в Viber |
Добавить контакт в Viber
Как работает: Добавить контакт в Viber
3. Поделиться текстом (до 200 символов), открывается список контактов:
Замените текст “Привет!” на свой. Можно отправить текст сразу нескольким абонентам из адресной книги.
viber://forward?text=Привет!
1 |
Поделиться текстом в Viber |
Поделиться текстом в Viber
Как работает: Поделиться текстом в Viber
4. Открыть вкладку «Чаты»:
viber://chats
1 |
Открыть Чаты в Viber |
Открыть Чаты в Viber
Как работает: Открыть Чаты в Viber
5. В мобильном приложении открыть вкладку вызовов
viber://calls
1 |
Открыть Вызовы в Viber |
Открыть Вызовы в Viber
Как работает: Открыть Вызовы в Viber
Как правильно сделать ссылку на WhatsApp
1. Открыть чат с номером
Замените “4957777777” на номер пользователя WhatsApp.
https://wa.me/4957777777
1 |
Чат с пользователем WhatsApp |
Чат с пользователем WhatsApp
Как работает: Чат с пользователем WhatsApp
2. Открыть чат с номером и отправить сообщение:
Замените “4957777777” на номер пользователя WhatsApp.
https://wa.me/4957777777?text=Привет!
1 |
Чат+сообщение WhatsApp |
Чат+сообщение WhatsApp
Как работает: Чат+сообщение WhatsApp
3. Поделиться текстом
В приложении откроется список контактов для отправки:
whatsapp://send?text=Привет!
1 |
Поделиться текстом WhatsApp |
Поделиться текстом WhatsApp
Как работает: Поделиться текстом WhatsApp
Как сделать ссылку на Skype
1. Просмотреть профиль
Замените “LOGIN” на имя пользователя Skype.
skype:LOGIN?userinfo
1 |
Skype |
Skype
Как работает: Просмотреть профиль Skype
2. Добавить в список контактов
Замените “LOGIN” на имя пользователя Skype.
skype:LOGIN?add
1 |
Добавить в список контактов Skype |
Добавить в список контактов Skype
Как работает: Добавить в список контактов Skype
3. Позвонить
Замените “LOGIN” на имя пользователя Skype.
skype:LOGIN?call
1 |
Позвонить пользователю Skype |
Позвонить пользователю Skype
Как работает: Позвонить пользователю Skype
4. Отправить сообщение
Замените “LOGIN” на имя пользователя Skype.
skype:LOGIN?chat
1 |
Отправить сообщение в Skype |
Отправить сообщение в Skype
Как работает: Отправить сообщение в Skype
5. Отправить голосовое сообщение
Замените “LOGIN” на имя пользователя Skype.
skype:LOGIN?voicemail
1 |
Отправить голосовое сообщение в Skype |
Отправить голосовое сообщение в Skype
Как работает: Отправить голосовое сообщение в Skype
Ссылка на VK
Прямая ссылка на диалог с пользователем вконтакте:
vk.me/agvento
1 |
Написать в VK |
Написать в VK
Как работает: Написать в VK
Ссылка на мессенджер Facebook
Прямая ссылка на диалог с пользователем вконтакте:
https://www.messenger.com/t/jack.malbon.3
1 |
Facebook Messenger |
Facebook Messenger
Как работает: Facebook Messenger
+7(495) 555-55-55
Пример ссылки на емайл
Написать автору
Написать автору
Ссылка на чат Viber
Добавить контакт в Viber
Поделиться текстом в Viber
Открыть Чаты в Viber
Открыть Вызовы в Viber
Чат с пользователем WhatsApp
Чат+сообщение WhatsApp
Поделиться текстом WhatsApp
Skype
Добавить в список контактов Skype
Позвонить пользователю Skype
Отправить сообщение в Skype
Отправить голосовое сообщение в Skype
Написать в VK
Facebook Messenger
Главная / Редактирование сайта / Частые вопросы / Как разместить на сайте кнопки WhatsApp и Viber
При необходимости Вы можете разместить на своем сайте кнопку WhatsApp или Viber с возможностью осуществления звонка.
Разместить такую кнопку Вы можете:
- В дополнительных блоках страницы, предполагающих работу с текстовым редактором.
- На простых текстовых страницах или иных страницах, предусматривающих работу с текстовым редактором (например, “Контакты”).
Рассмотрим, как вставить такую кнопку в текст.
Шаг 1
Для начала перейдите к текстовому редактору в нужном Вам разделе системы управления (в нашем случае это редактирование текстовой страницы).
Шаг 2
Далее найдите нужную иконку и вставьте ее в текстовый редактор (при необходимости предварительно загрузив в “Иллюстрации”).
Шаг 3
Теперь нажмите на вставленную картинку (так, чтобы она выделилась в рабочей области текстового редактора), а затем нажмите на кнопку вставки ссылки.
Шаг 4
Откроется окно вставки, где Вам будет необходимо указать в качестве ссылки:
- Для Viber – viber://chat?number=71234567890 (протокол “Другой”)
- Для WhatsApp – whatsapp://send/?phone=71234567890 (протокол “Другой”)
Соответственно, вместо “7123456789” Вам необходимо указать Ваш номер телефона.
После вставки нажмите “Ок”.
Шаг 5
При необходимости дополните текст и сохраните изменения.
На сайте внешний вид кнопки будет зависеть от того, какую иконку Вы разместили и какой размер для нее задали.
Для начала покажу простейший способ как сделать кликабельную ссылку для обычного телефонного номера. для посетителей. которые посещают ваш сайт с телефона, будет актуальным номер с ссылкой. При нажатии на него, сразу же номер будет на экране для звонка и его не нужно будет выделять. копировать или вообще вводить вручную. Таким образом, вы упрощаете для клиента способ связаться с вами. Готовая ссылка будет иметь следующий вид:
+12(034)567-89-10
Как видите, номер выведется как – +12(034)567-89-10. Можете заключать его в что угодно, добавлять стили, теги, задавать ему любой вид. В путь ссылки мы прописываем в формате – tel:+120345678910. После tel: нужно указать номер без пробелов и лишних символов, просто номер, в том формате, в котором обычно набираете его на телефоне. Это очень важно, в противном случаи номер для набора будет неправильным.
Далее по этому же принципу делаем ссылки для Viber, Whatsapp, Telegram. Для каждой они будут схожими, но немного отличаться. скажу сразу, что выводить на экран, решать вам, я просто выведу название мессенджеров.
WhatsApp //Для приложения Viber на ПК Viber //Для приложения Viber на мобильных ViberTelegram
Как видите по коду, в конце ссылки для Viber и Whatsapp указан номер телефона. Для Telegram же указан никнейм. Вам остается попросту менять их на нужные и ссылка будет работать.
Можете использовать и проверить на своем сайте, указывая свой номер. Как и писал выше, данная мелочевка, поможет упростить вашим клиентам жизнь и позволит проще связываться с вами.
Бонусом добавлю еще ссылку для скайпа. Первая позволит открыть окно с диалогом для общения по Skype.
nikname
Просто замените nikname на нужный профиль Skype. Например – skype:superman?chat. Так же можно сделать ссылку на звонок по Skype.
Skype
Как видите, разница только в ссылке. У одной – ?chat, а у второй – ?call. Как и с чатом, просто меняете nikname на нужное имя.
На этом все, спасибо за внимание. ?
Косметологическое оборудование для салонов красоты и косметологов
Используемые источники:
- https://smartlanding.biz/ssylka-na-whatsapp-telegram-viber.html
- https://agvento.by/web-development/shablony-ssylok-messendzhery/
- https://help.megagroup.ru/knopki-whatsapp-viber
- http://gnatkovsky.com.ua/kak-sdelat-ssylki-na-viber-whatsapp-telegram.html