Телеграм кликабельный номер телефона

С каждым годом интеграция с социальными сетями и мессенджерами происходит все глубже. Многие компании и организации в борьбе за клиента, стараются сделать обратную связь как можно проще и удобнее. Одна из таких возможностей – сделать кликабельные номера телефонов на сайте.

Введение

Если вы установите кликабельные номера телефонов на своем сайте, то при нажатии они будут сразу переводить в мессенджера Viber, WhatsApp или Telegram, что позволит быстро установить коммуникацию с вами.

Это всё будет работать при условии, что у пользователя стоит одно из этих приложений на мобильном устройстве или на компьютере.

Кликабельная ссылка Viber

Для мобильных и ПК устройств:

<a href="viber://chat?number=%2B79630745396">Написать в Viber</a>

«%2B» — это «+» в HTML кодировке.

Кликабельная ссылка WhatsApp

Для мобильных и ПК устройств:

<a href="whatsapp://send?phone=+79630745396">Написать в WhatsApp</a>

Кликабельная ссылка Telegram

С Telegram-ом это делается немного по-другому. Если для Viber и WhatsApp мы использовали номер телефона для вызова чата, то в Telegram используется логин (имя) пользователя.

Для мобильных устройств:

<a href="tg://resolve?domain=LOGIN">Написать в Telegram</a>

Ссылка для ПК (чат откроется в браузере):

<a href="https://telegram.me/LOGIN">Написать в Telegram </a>

Кликабельная ссылка для звонка

Для мобильных и ПК устройств:

<a href="tel:+79630745396">Позвонить</a>

Заключение

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

Всем удачи!

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

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

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

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

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

HTML-код сайта

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

<span class="ya-phone">8-123-456-78-90</span>

или так:

<div class="header-center__contacts">
  +7 (900) <span class="header-center__number-big">101-56-78</span>
</div>

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

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

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

<span class="ya-phone">
  <a href=”tel:+71234567890”>8-123-456-78-90</a>
</span>

<div class="header-center__contacts">
  <a href=”tel:+79001015678”>
    +7 (900) <span class="header-center__number-big">101-56-78</span>
  </a>
</div>

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

Зная, как устроен 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

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

<a href=”https://wa.me/71234567890”>8-123-456-78-90</a>

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

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

Но обычно кликабельным делается не номер телефона, а специальная иконка 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

<a href="tg://resolve?domain=botseoforge">@seoforge</a>

Либо так:

<a href="https://telegram.im/seoforge">@seoforge</a>

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

<a href="tg://resolve?domain=webengineer">@webengineer</a>

Либо так:

<a href="https://telegram.im/webengineer">@webengineer</a>

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

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

<a href="mailto:yourmail@mysite.com">yourmail@mysite.com</a>

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

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

<a href="Skype:inetwmr?chat">Skype-чат с пользователем Inetwmr</a>

Как сделать ссылку на Viber на сайте

1. Открыть чат с номером

Замените “4957777777”

на номер пользователя Viber. Вместо плюса используется “%2B”:

viber://chat?number=%2B4957777777

1

<a href="viber://chat?number=%2B4957777777">Ссылка на чат Viber</a>

Как работает: Ссылка на чат Viber

2. Добавить контакт (работает только c телефонов):

viber://add?number=4957777777

1

<a href="viber://add?number=4957777777">Добавить контакт в Viber</a>

Как работает: Добавить контакт в Viber

3. Поделиться текстом (до 200 символов), открывается список контактов:

Замените текст “Привет!” на свой. Можно отправить текст сразу нескольким абонентам из адресной книги.

viber://forward?text=Привет!

1

<a href="viber://forward?text=Привет!">Поделиться текстом в Viber</a>

Как работает: Поделиться текстом в Viber

4. Открыть вкладку «Чаты»:

viber://chats

1

<a href="viber://chats">Открыть Чаты в Viber</a>

Как работает: Открыть Чаты в Viber

5. В мобильном приложении открыть вкладку вызовов

viber://calls

1

<a href="viber://calls">Открыть Вызовы в Viber</a>

Как работает: Открыть Вызовы в Viber

В мессенджере Telegram каждый аккаунт, канал и публикация имеют уникальный адрес. Чтобы начать общение с другом или коллегой, нужно знать, как сделать ссылку на личный Телеграмм аккаунт. Покажем, где ее найти в настройках мессенджера. Также в обзоре привели шаблоны ссылок для вставки на сайт и в шапку Инстаграм.

Виды ссылок в Телеграмм

В отличие от других мессенджеров Телеграмм делит ссылки на два вида:

· Логин, имя пользователя вида @ваш­_логин

Используют для поиска внутри Телеграмм. Никнейм поможет начать с вами общение в чате. По логину находят каналы и боты.

· URL-адрес. Выглядит так: https://t.me/ваш_ник

Подходит для использования вне мессенджера: вставить в шапку профиля социальной сети, в описание видео, разместить на сайте или мультиссылке.

Как узнать ссылку на свой Телеграмм аккаунт

Чтобы узнать, где находится ссылка и как ее скопировать, следуйте инструкции:

Сделать кликабельную ссылку аккаунта в Телеграм

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

Формирование кликабельного номера происходит не так как в Viber и WhatsApp, где используется номер телефона. В Телеграмм нужен логин.

Шаблон ссылки для перехода в чат из Инстаграм при нажатии:

t.me/название_профиля

Зачем нужна ссылка на чат в Телеграме в шапке Инстаграм

Блогеры и предприниматели, ведущие продажи через Инстаграм, в шапку профиля в поле «Сайт», могут вписать только один адрес.

Если Телеграмм ­— основной мессенджер, используемый в работе, вставляйте короткую кликабельную ссылку в шапку Инстаграм. Так подписчики быстро перейдут к общению, и вы не пропустите сообщение в Директе.

Но есть более распространенный мессенджер Whats App. Viber все еще популярен. Потенциальный клиент может не пользоваться Телеграмом. Чтобы сделать общение подписчиков удобным, дайте им выбрать любимый канал связи.

HTML-ссылка для сайтов и лендингов

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

Шаблон HTML:

<a href=»https://telegram.me/LOGIN»>Написать в Telegram </a>

Вместо «Написать в Телеграм» можно вписать любую фразу: «Начать чат», «Получить консультацию», «Запишитесь на курс», «Заказать дизайн».

Если одной ссылки не достаточно

Не ограничивайте свои возможности. Правильно оформленная ссылка В шапку Инстаграм можно добавить мультиссылку. Например, Hipolink. Нажав на нее, пользователь попадет на ваш мини-сайт, где будет собрана вся информация о вас, продукте, услуге, ссылки:

Такой лендинг на конструкторе Хиполинк неопытный пользователь сделает за 10 минут. Для облегчения создания сайта предложены шаблоны и темы дизайна.

Our team tries to create the Telegram Bot and it is essential for us to make phone number in the long messages clickable. Sometimes we have to send our users messages with a lot of information and few phone numbers, so it is hard to get the phone, because telegram allows to copy only the whole message.
If we send the short message without any markdown the telegram mobile app will highlight it:

await bot.send_message(chat_id, "Example text with a phone +79991234567")

If we use Markdown Telegram also make a number be clickable:

await bot.send_message(
    chat_id,
    "Example text with a phone [+79991234567](tel:+79991234567)", 
    parse_mode='Markdown'
)

Although if the message is a quite long Telegram just ignore the numbers and don’t parse:

await bot.send_message(
    chat_id, 
    "Example text with a phone [+79991234567](tel:+79991234567)nwithin a long-long messagenwithin a long-long messagenwithin a long-long messagenwithin a long-long messagenwithin a long-long messagenwithin a long-long messagenwithin a long-long messagenwithin a long-long messagenwithin a long-long messagenwithin a long-long message", 
    parse_mode='Markdown'
)

Is there a way to make Telegram to show phone numbers as a link? Thank you

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

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

Во всех остальных случаях все ссылки, кроме ссылки на Viber, могут быть представлены в классическом виде:

<a href="ссылка">описание_ссылки</a>

В качестве описания можно использовать текст или изображения. В моем случае я использовал соответствующие иконки. Все иконки кликабельные и Вы сразу можете посмотреть, как это всё работает.

Итак, давайте по порядку!

При клике по ссылке у поcетителя открывается почтовый клиент с указанием в нем Вас, как получателя письма.

При клике по ссылке сразу идет вызов на Ваш номер. На стационарном компьютере пользователю будет предложено выполнить звонок посредством привязанного телефона.

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

Пользователь компьютера при клике может выполнить звонок посредством встроенного приложения Skype, а на мобильном вызов идет сразу на указанный Вами логин.

При этом оператор ?call отвечает именно за звонок, если его не указывать или заменить на ?chat, то посетитель попадет в Ваш профиль и сможет написать Вам сообщение.

Также, указывая вместо ?call оператор ?voicemail, Вы дадите возможность оставить Вам голосовое сообщение.

Особенность создания этой ссылки в том, что номер телефона указывается БЕЗ знака плюс.

Клик по данной ссылке открывает соответствующее web-приложение или мобильную версию Whatsapp. В любом случае пользователь при переходе по ссылке попадает на страницу Вашего аккаунта, и может сразу позвонить или написать Вам.

Автоматический вызов по таким ссылкам запрещен политикой самого мессенджера.

В данном случае user_login  – это Ваш никнейм в виде @nikname, который Вы создаете сами.

Важно!

1. Обязательно проверяйте ссылки после их создания.
2. Иногда, если при проверке ссылки, она не срабатывает, то достаточно указать для нее протокол, чтобы ссылка начала работать так, как нужно.

Например, не wa.me/<номер> или t.me/user_login, а соответственно:
https://wa.me/<номер> и https://t.me/user_login.

Номер телефона в данной ссылке также, как и в Whatsapp, указывается БЕЗ знака плюс.

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

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

С уважением, Сергей Почечуев