Как сделать кликабельными номер телефона, Whatsapp, Telegram и E-mail

Делаем кликабельным номер телефона, Whatsapp, Telegram и E-mail

Скорость и простота коммуникации — то, к чему современные потребители уже привыкли. В эру высокоскоростного мобильного интернета люди хотят решать свои задачи через смартфон, делая минимум лишних движений. Клик сюда, клик туда и готово!

Поэтому важно сделать так, чтобы взаимодействие с сайтом было максимально простым. Например, чтобы позвонить в компанию достаточно было кликнуть по телефону в шапке.

Разберемся, как проработать такую маленькую, но очень важную деталь сайта, как кликабельные кнопки связи (телефон, почта, мессенджеры).

Номер телефона

Чтобы при клике на номер телефона начинался звонок нужно сделать следующие шаги.

HTML-код сайта

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

Чтобы сделать обычный текст кликабельным нужно сделать из него гиперссылку и указать действие, которое будет совершено по клику (в нашем случае набор номера).

Для создания любых ссылок используется тег . Между тегами располагается текст ссылки или картинка (например, иконка трубки). Атрибут href=“” указывает адрес ссылки или действие. Для набора номера используется параметр: tel:+7XXXXXXXXXX, где +7XXXXXXXXXX — нужный номер телефона.

Если доработать предыдущие примеры, то получится следующий код:

Теперь при нажатии на номер телефона будет совершаться набор указанного в ссылке номера. Именно тот, который указан в ссылке, а не в тексте, поэтому будьте внимательны! Проверяйте получившийся код в работе.

Зная, как устроен HTML-код вы легко сможете реализовать на любом движке или конструкторе.

В WordPress

Метод создания кликабельной ссылки на движке WordPress аналогичен пункту «HTML-код сайта» данной статьи. Главная задача в том, чтобы найти нужный фрагмент кода в админ-панели.

Шапка сайта

  1. Если телефон находится в шапке сайта, то заходим в административной панели: «Внешний вид» -> «Редактор».
  2. Справа, в Файлах темы находим «header.php», нажимаем на него.
  3. В коде находим телефон. Для быстрого поиска кликнете левой кнопкой мыши на поле с кодом и нажмите комбинацию на клавиатуре: “Ctrl” + “F”. Затем введите несколько цифр телефона и нажмите “Enter”. Нужный фрагменты станут выделены желтым цветом.

  1. Теперь остается обернуть простой текст в гиперссылку. Как это сделать смотрите в предыдущем пункте статьи.В данному случае получается по итогу так:

  1. Нажимаем “Обновить файл” и изменения сохраняются. Проверяем работоспособность на сайте. Готово!

Записи/страница

  1. Если телефон находится в записи, то переходим в редактор записи/страницы.

  1. Переходим в редактор кода, нажав на вкладку “Текст”:

  1. Выделяем номер и нажимаем кнопку “link”. В поле “URL” добавляем гиперссылку для номера:

  1. Получается так:

  1. Нажимаем “Обновить” и страница сохраняется. Готово!

В Tilda

Zero-блок

  • Переходим к редактированию блока, нажав на кнопку “Редактировать блок” в конструкторе нужной страницы:

  • Выделяем телефон и нажимаем кнопку “Setting”:

  • В поле Link в настройках вводим ссылку: “tel:+ номер телефона с +7”

  • Сохраняем изменения в блоке и публикуем страницу.

Стандартный блок

  • Нажимаем “Контент”:

  • Находим нужный блок, выделяем телефон и нажимаем иконку “Ссылка”:

  • Выбираем пункт: “Вставить ссылку”:

  • В поле “URL” вводим “tel:+ номер телефона с +7” и нажимаем кнопку “Вставить”:

  • Сохраняем изменения в блоке и публикуем страницу.

Активная ссылка на WhatsApp

Принцип точно такой же, как и с телефоном (смотрите предыдущий пункт данной статьи), отличие только в самой ссылке. Она будет выглядеть следующим образом:

Для размещения кликабельного текста на сайте подойдут все инструкции, как для телефонного номера.

Кликабельная иконка для сайта

Но обычно кликабельным делается не номер телефона, а специальная иконка WhatsApp. Для этого:

  1. Находим иконку, которую будем использовать. Для этого подойдет, например, сервис Flaticon.com.

  1. Выбираем подходящее по стилистике изображение. Кликаем на него, выбираем формат SVG.
  2. Дальше будет показан алгоритм действия, если сайт на Тильде. Если сайт на другой CMS, то нужно будет загрузить файл на хостинг и добавить небольшой HTML и CSS-коды на сайт, чтобы разместить иконку, например, в шапке. Для этого понадобятся минимальные знания верстки, либо помощь верстальщика.
  3. На Тильде переходим в редактирование Zero блока.
  4. Выбираем пункт добавить изображение и загружаем иконку.

  1. Масштабируем ее и размещаем в нужном месте блока.
  2. Добавляем в поле Link ссылку https://wa.me/номертелефона

  1. Сохраняем изменения в блоке и публикуем страниц сайта. Готово! Кнопка Whatsapp теперь кликабельная и сразу перенаправляет пользователя на диалог в мессенджере.

Ссылка на Telegram

С Телеграм тот же алгоритм действий, что и Whatsapp (смотрите предыдущий пункт данной статьи), но основное отличие в том, что в РФ, например стандартные ссылки в формате https://t.me/seoforge не работают. Поэтому необходимо использовать редирект через такие сервисы, как tele.gg, telegram.im и другие. Сервисы полностью бесплатны и существует большой список таких сервисов без сторонней рекламы, используйте именно их.

Ссылка будет выглядеть следующим образом.

На канал @seoforge в Телеграм: telegram.im/seoforge

На пользователя @webengineer в Телеграм:

Кликабельная почта E-mail

При клике на e-mail открывался почтовый клиент:

Кликабельный Skype

При клике на кнопку открывался чат в Skype с указанным пользователем пользователем:

Как поставить ссылку на свои профили в мессенджерах

Привет, друзья. Сегодня поговорим о том, как сделать активную ссылку на Telegram, Whatsapp и Viber, то есть на свои профили или группы в этих замечательных (и не очень) мессенджерах.

Речь идет о ссылках, подобных телефонным или для почты, когда, кликая по ним открывается ваше приложение для работы с почтой или набранный номер.

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

Зачем делать активную ссылку на мессенджер?

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

Кроме того, оставляя такую ссылку на своем сайте, мы позволяем написать нам, ведь для многих звонок — это стресс, писать сообщение намного проще. Но это еще не все, ведь некоторым невыгодно звонить из региона в регион, или из страны в страну, а мессенджеры сделают звонок бесплатным.

В чем сложность?

Проблемы начинаются в тот момент, когда нужно поддерживать и мобильную версию и десктопную, то есть в 99% случаев. Дело в том, что приложение для телефонов и приложение для компьютера работают с разными ссылками и получается, что если указать ссылку для смартфона, то приложение для ПК сработает некорректно или совсем не сработает. Это касается мессенджера Viber, при этом WhatsApp и Telegram не испытывают подобных проблем.

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

Давайте разбираться как должен выглядеть атрибут «href» у ссылок на тот или иной мессенджер.

Как поставить ссылку на свои профиль в Telegram?

Как я уже говорил с этим замечательным мессенджером нет никаких проблем в плане проставления ссылки. Главное правильно прописать значение в атрибуте href. Для этого достаточно воспользоваться шаблоном:

«NikName» – это имя пользователя, которые вы задавали в Телеграме. То, которое с символом @. В моем случае это @Dimadv

Как поставить ссылку на свой профиль в WhatsApp?

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

Ссылка должна выглядеть следующим образом:

  • «380950000000» – ваш номер телефона,
  • «?text=» – параметр содержащий текст по умолчанию,
  • «%20» – символ пробела в сообщении.

Тут, как видите, тоже все достаточно просто.

Как поставить ссылку на свой профиль в Viber?

Чтобы поставить правильную ссылку на Viber, придется воспользоваться PHP для определения устройства. Если у вас страница сохранена в расширении html, то придется пересохранить в .php. Это никак не повлияет на работоспособность страницы.

Итак, выше я писал, что десктопное и мобильное приложение Viber открывается по разным ссылкам, что создает определенные сложности при добавлении такой ссылки на сайт. Для мобильных устройств используется такой подход формирования ссылки:

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

Расположить функцию, можно, например в самом начале страницы, перед ‘doctype’ или вынести в отдельный файл и там же подключить его.

После этого, в месте где будет выводиться ссылка на Viber используйте такую проверку:

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

Конечно же есть и более надежные способы для определения устройства. Если вам по какой-то причине не хватило устройств в функции, которую привел я, то можете воспользоваться PHP-классом Mobile-Detect, который специально создан для этих целей (определять устройство).

Пользоваться им достаточно просто:

  • Подключаем файл с Классом.
  • Создаем новый экземпляр класса.
  • Делаем проверку.

Звучит страшнее, чем есть на самом деле.

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

http://seoforge.ru/website/klikabelny-nomer-telefona-wa-tg-mail

Как поставить ссылку на свои профили в мессенджерах

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *