Как сделать кликабельный номер телефона на сайте: подробная инструкция

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

Зачем нужен кликабельный номер на сайте

Кликабельный номер телефона дает владельцам бизнес-сайта несколько преимуществ:

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

Узнайте, сколько операторов колл-центра точно справятся со всеми входящими звонками клиентов.

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

Увеличивает конверсию сайта. Чем меньше действий требуется совершить посетителю сайта для связи с компанией, тем вероятнее, что он не отложит звонок «на потом» и не забудет о своем намерении. А значит, бизнес получит больше обращений от заинтересованных клиентов с сайта, если добавит кликабельный номер.

Чтобы повысить конверсию и решить вопрос пользователя в любое время суток, также используйте чат-боты.

Как сделать кликабельный номер телефона на сайте

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

Через HTML-код

Если у вас есть доступ к HTML-коду сайта, то можно внести изменения в него. Для начала создайте заранее в текстовом редакторе такой код:

В кавычках (“”) укажите номер телефона через «+», без пробелов и других знаков. Между угловыми скобками (><) — слова или цифры, которые отобразятся на сайте.

Так, ссылку из примера выше код преобразит в кликабельную фразу:

Разместите ссылку в нужную часть HTML-кода сайта. Если работаете через браузер, нажмите F12, чтобы увидеть код страницы. Найдите фрагмент, который будете менять, и нажмите на него правой кнопкой мыши. Выберете пункт «Edit as HTML». Добавьте в открытый редактор заранее написанную ссылку.

Последним шагом сохраните изменения и проверьте, заработал ли переход.

Через конструктор

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

Например, в конструкторе Tilda гиперссылку на номер можно добавить в несколько шагов:

1. Укажите номер телефона в нужном разделе сайта:

Телефон можно разместить в любом блоке конструктора от обложки до подвала

2. Откройте окно меню «Ссылка» в верхнем левом углу. В графе «Укажите ссылку» введите текст «tel:» и нужный номер телефона. Нажмите кнопку «Применить»:

В этом же окне задайте цвет и стиль, в котором отобразится ссылка

3. Чтобы изменения вступили в силу, нажмите кнопку «Опубликовать» в правом верхнем углу:

Теперь номер стал кликабельным

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

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

Как сделать кликабельный номер WhatsApp и Telegram

Одним кликом можно направить пользователя не только в приложение набора номера, но и в популярный мессенджер. Покажем, как перевести посетителя сайта в WhatsApp и Telegram.

WhatsApp

Для HTML-сайтов используют следующий код:

Подставляйте номер телефона и слова, к которым этот номер привязывается. А далее добавляйте ссылку в тот фрагмент HTML-кода страницы, который отвечает за отображение номера телефона.

Открыть HTML-код можно в браузере через клавишу F12, а редактировать фрагмент — через пункт всплывающего меню «Edit as HTML». Последним действием сохраняйте код и проверяйте результат.

Для созданных в конструкторе электронных страниц переход в мессенджер добавляют гиперссылкой. Ее привязывают как к номеру телефона, так и к иконке приложения. Рассмотрим порядок на примере конструктора Tilda:

1. Выделите текст, к которому относится гиперссылка, и откройте окно меню «Ссылка» в левом верхнем углу. Введите в свободном поле текст «https://wa.me/» и нужный номер телефона:

Номер указывайте без пробелов и дополнительных знаков

2. Гиперссылка появится, когда нажмете кнопку «Применить». Чтобы изменения на сайте вступили в силу, опубликуйте их по кнопке в правом верхнем углу:

Цвет и стиль гиперссылки тоже можно редактировать

Telegram

Переход с сайта в этот мессенджер настраивают почти так же, как и в WhatsApp. Для HTML-сайтов используют следующий код:

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

Со страницы, созданной в конструкторе сайтов, добавить переход в чат Telegram поможет гиперссылка. Ее создают по следующему алгоритму:

1. Выделите нужный текст или значок в конструкторе и откройте окно меню «Ссылка» в левом верхнем углу. Наберите следующий текст: «https://t.me/» и имя пользователя или номер телефона.

Для Telegram номер телефона начинается с «+7», вводится без пробелов и других знаков

2. Нажмите кнопку «Применить» в диалоговом окне, а затем «Опубликовать» в правом верхнем углу конструктора.

Теперь при клике на фразу пользователь перейдет в Telegram