Часто сайт посещают с телефонов, и удобно, если на сайте есть ссылка на кликабельный телефон, e-mail и т.д. — которая сразу открывает нужное приложение на телефоне или набирает номер. Здесь мы рассмотрим основные приемы создания таких ссылок на примере редактора mottor.
В этой статье рассмотрим самые популярные:
- Ссылка на телефон →
- Ссылка на e-mail →
- Ссылки на социальные сети →
- Ссылки для перехода в мессенджеры →
- Кнопка «Поделиться» →
Ссылка на телефон
Ссылка на телефон имеет простой формат url (когда прописывается не полная http:// ссылка, а сокращенное обозначение, понимаемое браузерами как вызов нужного приложения).
В случае с телефоном это протокол tel:.
tel:+7xxxxxxxxxx
Рассмотрим на примере добавление ссылки на телефон 88005555555 (номер может быть любым другим, какой вам нужен) в текст на сайте.
Выделите текст в редакторе мышкой и нажмите на панели редактирования кнопку добавления ссылки:
Как сделать кликабельную ссылку в сторис в ВК
В открывшемся окне введите в поле ссылки url вашего телефона:
tel:88005555555
Так как номер начинается с 8, знак «+» перед номером телефона не ставится
После чего нажмите OK в окне и выйдите из редактирования текстового блока, чтобы сохранились изменения.
Теперь при клике на ссылку на сайте браузер будет вызывать подходящее приложение для совершения вызова — в мобильных браузерах это начнет набор телефонного номера для звонка.
Также можно вставлять такие ссылки в Кнопке и Картинке, просто вставляя ссылку в поле ввода ссылки:
Вставка ссылки на телефон в настройках кнопки
Вставка ссылки на телефон в настройках картинки
Ссылка на email
Абсолютно аналогично настраивается ссылка на email адрес, только вместо uri протокола tel используется протокол mailto:
Для добавления в текст — точно также выделяем текст мышкой и жмем кнопку добавления ссылки:
Вводим ссылку с email из нашего примера:
Заходим в настройки блока, указываем ссылку и жмем «ОК» и сохраняем изменения. И так же можем добавить ссылки в картинки или кнопки.
Установка ссылок на социальные сети
Разместите на сайте кнопки и иконки социальных сетей, чтобы дать возможность посетителям быстро делиться интересными страницами в своих социальных сетях. А также для удобного поиска и направления посетителя на вашу страницу в той или иной соц. сети.
Вы можете посмотреть наше короткое видео по настройке или прочитать инструкцию ниже
В mottor есть несколько способов установки ссылок:
1. в блоке «Кнопка»
2. в блоке «Картинка»
3. в «Текстовом блоке»
Обратите внимание. Перед установкой ссылки нужно выделить текст, к которому вы хотите привязать ссылку.
Примеры ссылок на соц. сети:
• Вконтакте https://vk.com/account
• Facebook https://www.facebook.com/account
• Instagram https://www.instagram.com/account
Как сделать кликабельную ссылку в сторис в вк. Как добавить ссылку в историю вконтакте.
• Одноклассники https://ok.ru/account
• Twitter https://twitter.com/account
Ссылки для перехода в мессенджер (WhatsApp, Viber, Telegram)
Если вам нужно, чтобы клиент при нажатии на кнопку сразу попадал в свой мессенджер и начал общение с вами, то нужно будет указать специальную ссылку в каждом блоке, откуда происходит переход. Для каждого мессенджера будет своя ссылка, поэтому рассмотрим каждый по очереди.
Вы можете посмотреть наше короткое видео по настройке или прочитать инструкцию ниже
Ссылка на WhatsApp
https://api.whatsapp.com/send?phone=79999999999
Вместо номера 79999999999 вам нужно будет указать номер телефона вашего аккаунта в этом мессенджере.
Ссылка на WhatsApp с заранее набранным сообщением
В этой ссылке мы видим, что есть номер телефона 79999999999, его вы меняете на свой телефон в таком же формате, без точек, тире, пробелов и т.п. Просто указываете набор цифр.
+ в ссылке есть «зашитое» сообщение «Добрый день! Я хочу купить квартиру в Москве.»
Единственное отличие от нормального текста в ссылке в том, что вместо пробелов используется — %20. И тогда получается:
Добрый%20день!%20Я%20хочу%20купить%20квартиру%20в%20Москве
В примере ссылки вы меняете только то, что выделено жирным шрифтом, т.е. номер телефона и текст сообщения:
https://api.whatsapp.com/send?phone=79999999999+» перед телефоном НЕ указывается.
Ссылка на Telegram
Для перехода на диалог с пользователем:
https://telegram.me/username
Ссылка на Telegram
Для перехода в telegram канал
https://t.me/название_группы
В случае, если по ссылке https://telegram.me не открывается Telegram, можно попробовать изменить ссылку на https://tele.click/
Например, https://tele.click/lpmotorsupportbot
Ссылка на Skype
skype:username
username — логин вашего аккаунта в Skype
Создание кнопки «Поделиться» от Яндекса
Создание и размещение на сайте виджета, который позволит репостить ссылку на ваш сайт в выбранных соц. сетях. Размещение кнопки будем показывать на примере редактора mottor.
Вы можете посмотреть наше короткое видео по настройке или прочитать инструкцию ниже
1. Код таких кнопок можно получить в Конструкторе блока «Поделиться» от Яндекса . Выбираете подходящие соц.сети и копируете сгенерированный код справа от соц.сетей:
2. Затем код данного виджета остаётся только разместить в html-блоке на вашем сайте. Чтобы это сделать нажимаем на «+» в левом верхнем углу редактора:
3. Выбираем html-блок и ставим его в том месте на сайте, где должна размещаться кнопка «Поделиться». Размещаем внутри него скопированный код и готово!
Итоги
Итак, в этой статье мы научились настраивать ссылки на соц.сети и увидели, как просто это делается в редакторе mottor.
Надеемся, вы примените эти знания при создании своего собственного сайта. Если что-то будет непонятно — в конструкторе сайтов mottor есть бесплатная техподдержка для всех пользователей. Вам поможет живой специалист:
Источник: lpmotor.ru
Как сделать кликабельные ссылки на электронную почту, телефон, Skype, WhatsApp, Telegram и Viber
В данной статье речь пойдет не просто о кликабельных ссылках, а о ссылках, как способе быстрой связи с Вами. Это не ссылки на Ваши личные профили, это ссылки при клике на которые пользователь может сразу связаться с Вами.
Эти ссылки можно с успехом применять, например, на странице обратной связи своего сайта, но очень полезными они будут на лендингах, поскольку позволят посетителю сразу связаться с Вами и задать необходимый вопрос.
Общие положения
Ниже Вы найдете самые популярные ссылки на указанные мессенджеры. Для некоторых из них существуют другие варианты, но я делюсь с Вами теми, которые использую сам, хотя бы по той причине, что они легко запоминаются.
Ниже Вы найдете самые популярные ссылки на указанные мессенджеры. Для некоторых из них существуют другие варианты, но я делюсь с Вами теми, которые использую сам, хотя бы по той причине, что они легко запоминаются.
Напротив каждой иконки расположена сама ссылка. Это специальное написание, не требующее указания протокола при условии, что Вы вставляете ссылку в окно ссылок редактора.
Во всех остальных случаях все ссылки, кроме ссылки на Viber, могут быть представлены в классическом виде:
В качестве описания можно использовать текст или изображения. В моем случае я использовал соответствующие иконки. Все иконки кликабельные и Вы сразу можете посмотреть, как это всё работает.
Итак, давайте по порядку!
Ссылка на почту (E-mail)
mailto:user_email
При клике по ссылке у поcетителя открывается почтовый клиент с указанием в нем Вас, как получателя письма.
Кликабельная ссылка на телефон
tel:+70123456789
При клике по ссылке сразу идет вызов на Ваш номер. На стационарном компьютере пользователю будет предложено выполнить звонок посредством привязанного телефона.
Никаких скобок или пробелов при написании самой ссылки не должно быть, а номер должен начинаться с плюса.
Кликабельная ссылка на Skype
skype:user_login?call
Пользователь компьютера при клике может выполнить звонок посредством встроенного приложения Skype, а на мобильном вызов идет сразу на указанный Вами логин.
При этом оператор ?call отвечает именно за звонок, если его не указывать или заменить на ?chat , то посетитель попадет в Ваш профиль и сможет написать Вам сообщение.
Также, указывая вместо ?call оператор ?voicemail , Вы дадите возможность оставить Вам голосовое сообщение.
Кликабельная ссылка на Whatsapp
wa.me/
Особенность создания этой ссылки в том, что номер телефона указывается БЕЗ знака плюс.
Клик по данной ссылке открывает соответствующее web-приложение или мобильную версию Whatsapp. В любом случае пользователь при переходе по ссылке попадает на страницу Вашего аккаунта, и может сразу позвонить или написать Вам.
Автоматический вызов по таким ссылкам запрещен политикой самого мессенджера.
Кликабельная ссылка на Telegram
t.me/user_login
Важно!
1. Обязательно проверяйте ссылки после их создания.
2. Иногда, если при проверке ссылки, она не срабатывает, то достаточно указать для нее протокол, чтобы ссылка начала работать так, как нужно.
Например, не wa.me/ или t.me/user_login, а соответственно: https://wa.me/ и https://t.me/user_login.
Кликабельная ссылка на Viber
viber://add?number=
Номер телефона в данной ссылке также, как и в Whatsapp, указывается БЕЗ знака плюс.
Данная ссылка работает только в мобильном телефоне. Для десктопа она должна быть другой. Но я ее не привожу, поскольку очень мало пользователей устанавливают на компьютеры соотвествующие версии Viber.
Надеюсь, что данные ссылки Вам пригодятся в практической работе, поэтому желаю Вам увеличить конверсию с их помощью. Если остались какие-либо вопросы, то задавайте их в комментариях.
С уважением, Сергей Почечуев
Источник: prostodelaytak.ru