как сделать номер кликабельным
Делаем номер телефона на сайте кликабельным
Кликабельный номер – неотъемлемая опция современного сайта. Без нее вы можете потерять массу клиентов. Если на сайте номер телефона не кликабельный, а вставлен обычным текстом, то часть клиентов это оттолкнет, т.к. звонить попросту неудобно. Только представьте: надо выделить номер, скопировать его, свернуть браузер, открыть меню для ввода номера, вставить и только после этого звонить. Аж 6 действий! Ваши клиенты вряд ли захотят терять время на подобные манипуляции. Тем более, если через сайт конкурентов можно без проблем позвонить в одно нажатие.
Рассмотрим подробнее, как сделать телефонный номер кликабельным.
Способ первый. Коды сайта
Этот способ подходит, если можно править HTML-код. В нем обычный телефонный номер прописан так:
Если ему присвоен класс, то так:
Если к тексту применены стили, к примеру, цвета, шрифты, форматирование, код будет записан так:
В первом случае html-код будет прописан так:
Во втором варианте так:
В третьем легко превратить номер телефона в гипертекст, сохранив все стили:
После всех изменений сохраните html-код. Теперь на сайте есть кликабельный номер!
Способ второй. Конструктор сайтов или CMS
В любом движке или конструкторе есть особые инструменты, которые делают номер кликабельным. Подробно об этом можно почитать в разделе FAQ.
Но есть один универсальный способ, который подходит для каждого конструктора.
Везде можно создать гиперссылку при форматировании текста. Цифры — это же тоже текст. Соответственно, их можно написать в редакторе, выделить и преобразовать в гиперссылку как обычный текст. А потом в блоке «Адрес» ввести телефонный номер:
Гиперссылка автоматически будет активной.
Способ третий. Коллтрекинг
Если на сайте стоит коллтрекинг, при этом телефонный номер регулярно меняется, сделать его кликабельным можно.
Даже некликабельные цифры номера будут изменены. Если на номер телефона можно позвонить в одно нажатие, этот скрипт применит класс и подменит номер, который указан в атрибуте «href=tel:XXX.
Кликабельный номер телефона — большой плюс для мобильной версии сайта. С ним вы станете значительно ближе к клиентам.
Если хотите сделать все проще и ничего не настраивать, установите на сайт сервис обратного звонка Callibri. Тогда вам смогут звонить даже те пользователи, которые посетили сайт на компьютере.
Новинка! INTEC рекомендует:
Хотите быть в курсе всех наших обновлений? Тогда подпишитесь на нас в соцсетях!
Делаем номер телефона — ссылкой (кликабельный)
Опубликовано Roman K в 13.05.2019 13.05.2019
Что бы сделать номер телефона ссылкой, по нажатию на которую будет происходить вызов (с мобильного устройства) и переход в приложение «звонилки» с десктопа, достаточно вставить в HTML код, следующую конструкцию:
Пример как это выглядит ссылка на телефон на сайте:
Теперь разберемся в написаном
Конструкция … говорит браузеру, о том что содержимое которое находится внутри тега «a» (…) представляет из себя ссылку, которая ведет на адрес, в нашем случае адресом ссылки является телефон «tel:+79090010901». Все, что находится внутри тега «a» будет кликабельным и отображаться на странице сайта. Мы можем написать любое содержимое, при клике на которое состоится переход на функцию вызова.
Обратите внимание чтобы сделать номер телефона ссылкой, наполняя текст в визуальном редакторе, как на картинке ниже,
необходимо проделать следующее:
Выделяем необходимы необходимый текст, при нажатии на который будет происходить звонок инажимаем на кнопку «вставить/изменить ссылку»
вводим в поле, конструкцию «tel:88000090807» (без кавычек)
Таким же образом возможно сделать и другие ссылки:
Наше содержимое – ссылка на e-mail адрес;
Наше содержимое – послать смс сообщение;
Инструкция по ссылкам на Телеграм и WhatsApp будет в отдельных постах, так как у нее есть дополнительные возможности.
link::Как сделать ссылку с сайта в телеграм (материал уже готовится)
link::Как сделать ссылку с сайта в whatsapp (материал уже готовится)
Как сделать номер телефона на сайте кликабельным
Количество посетителей, просматривающих сайты с мобильных устройств, неуклонно растет, в связи с этим становится актуальным такой элемент, как кликабельный номер телефона, позволяющий посетителю, просто нажав на номер, указанный в тексте сайта, сразу перейти к осуществлению звонка.
Тем не менее, мобильные устройства не всегда преображают указанные на страницах номера в кликабельные ссылки. В данной инструкции мы расскажем, как сделать номер телефона на сайте кликабельным при просмотре с любых устройств (не только с мобильных).
Способ 1
Перейдите к редактированию нужного вам текста и выделите номер телефона.
Теперь нажмите на кнопку вставки ссылки.
В открывшемся окне выберите тип ссылки «Phone» и сохраните изменения.
Способ 2
Далее нажмите на выделенную на скриншоте ниже кнопку HTML на рабочей панели редактора.
Откроется редактор кода страницы. Тут Вам будет необходимо отредактировать уже указанный номер телефона (если в этом тексте уже присутствует номер) или же указать в нужном месте текста номер в следующем формате:
Затем сохраните изменения, нажав «Сохранить и закрыть».
На сайте номер телефона в тексте станет кликабельным и будет выглядеть примерно следующим образом:
Как сделать кликабельный номер телефона на сайте: 3 варианта + примеры
Сайт сделан на чистом коде, на конструкторе или есть коллтрекинг? Рассмотрим отдельно каждую ситуацию, как сделать кликабельный номер телефона, чтобы посетитель сайта с мобильного телефона мог одним кликом набрать номер и дозвониться в компанию.
Первый вариант, простой
Если сайт создан на конструкторе, например: Тильда, LPGenerator LPmotor и любой другой, где не нужно редактировать html код, все оформляется как в простом редакторе документа MS Word. Чтобы номер телефона стал кликабельным, нужно пройти три простых шага.
Шаг 1
Зайти в редактор страницы, найти блок с номером телефона. (на примере конструктора Tilda)
Шаг 2
Нажмите на цифры, откроется редактор текста. Выделите все символы номера телефона.
Шаг 3
Добавить к нему ссылку с тегом для набора номера телефона.
А какую ссылку добавить-то? Сейчас расскажу… Ссылка с тегом выглядит следующим образом:
где первая часть tel: это специальный тег для набора номера, а ХХХХ, это цифры, номера телефона. Адрес правильной ссылки будет выглядеть примерно так:
Добавьте эту ссылку на все страницы и блоки, где есть номер телефона.
Сохраните и проверьте с мобильного, при клике на номер, должен автоматически набирать цифровой код номера который Вы указали.
Второй вариант, сложный
Сайт сделан на обычном html коде, или каком-то движке типа WordPress, где контент сайта нужно редактировать в коде страницы. Это сложный способ для обычного пользователя, поэтому для этой задачи вам понадобится программист.
Найти в коде сайта где расположен номер телефона и добавить к нему тег гиперссылки с атрибутом href, в нем указать ссылку на номер телефона, в таком же формате tel:XXXX (как в примере с конструктором сайта)
В результате у вас должен получиться такой html код:
На опубликованной странице он будет выглядеть вот так: +7(123)456-78-90 попробуйте на него кликнуть и позвонить. Номер не существующий.
Третий вариант, с коллтрекингом
Что делать, если на сайте используются динамический коллтрекинг. Как будет работать подмена номера на сайте. Что произойдет если человек кликнет по номеру и коллтрекинг не отследит источник звонка, альберт тот номер который я указал в ссылке?
Коллтрекинг — Сервис сквозной аналитики, позволят отследить источник звонка
Меня волновал этот вопрос, я решил разобраться в этом путем экспериментов. Тестирования проводились в системе ROIstat и Callibri.
По результатам выяснил что, системы коллтрекинга подменяют не только текстовый контент но и саму ссылку с номером. Если вы используйте коллтрекинг, то смело указывайте основной номер компании. Система сама подменит ссылку в номере и звонок поступит на нужный номер и отразит в статистике данные об источнике звонка.
В других системах коллтрекинга и сквозной тесты не проводил, поэтому не могу дать точной гарантии что у других тоже будет работать.
Важно + рекомендации
Подведу итог, на сколько важно использовать кликабельный номер телефона. По статистике на 2021 год, 73% трафика с мобильных устройств. Обусловлено тем, что образ нашей жизни ускоряется, идет огромная борьба за время. Все меньше людей ищут решение своих задач с ПК, все происходит в движение с мобильных устройств.
Задача маркетинга не только привлекать новых, но и снижать трение, чтобы потенциальные клиенты легко заходили в воронку продаж. Представьте как тяжело 73% посетителей вашего сайта набирать номер телефона. Нужно запомнить ряд цифр, свернуть браузер, набрать номер телефона, вернуться на сайт, запомнить следующий набор цифр и так далее.
По теме: если нужен домен для сайта, рекомендую сервис: REG ru, регистрируйся! А по промокоду: F761-A14A-B178-9947 получи дополнительную скидку 5%
Если клиент горячий, то ему эта стена не помеха. Но часто бывает что нас кто то отвлек, позвонил прилетело сообщение мессенджер. В этот момент он отвлекается и забывает что планировал позвонить вам, так теряться часть горячих лидов. В случае кликабельного номера, потенциальный покупатель сможет дозвониться в один клик, пока кто-то не успел его отвлечь от цели.
Если на вашем сайте еще нет кликабельного телефона то уже сегодня займетесь этим вопросом, прямо сейчас поставьте задачу, сделайте напоминалку, не откладываете в долгий ящик. Иначе гиперзабывчивость поглотит Вас и эта информация навсегда останется в Вашей голове как «Я знаю» но знать не значит делать.
Нашли ошибку в тексте? Выделите фрагмент и нажмите ctrl+enter
Как сделать кликабельный номер телефона на сайте + примеры оформления
Если на мобильной версии вашего сайта номер телефона указан в виде обычного текста — вы теряете клиентов.
В статье объясним, как отсутствие кликабельного номера влияет на конверсию, зачем вообще нужен кликабельный номер и как его установить на сайт.
Рекомендуем: Click.ru – маркетплейс рекламных платформ:
Зачем нужен кликабельный номер на сайте
Объясняем, почему из-за текстового номера часть клиентов отваливается.
Пользователь заходит с устройства на мобильную версию сайта и видит контакт для связи. В нашем случае — номер телефона. Чтобы позвонить ему нужно скопировать номер, свернуть браузер с сайтом, перейти в режим набора, вставить, нажать на кнопку вызова. Или переписать на листочек, а потом набрать номер в свободное время (но человек может передумать к тому времени). Или нужно запоминать номер, а потом вводить его вручную. Если забыли цифру — нужно возвращаться на сайт, опять запоминать, потом опять сворачивать браузер и так по кругу. В среднем получается около 5 действий и больше. Представьте, если человеку нужно совершить несколько таких звонков.
С кликабельным номером пользователю нужно всего 3 действия — нажать на номер, выбрать способ звонка (через телефон или мессенджер), затем нажать кнопку вызова. Чем меньше действий, тем выше вероятность, что пользователь все-таки совершит звонок, а не отвалится на середине процесса.
Как установить кликабельный номер телефона на сайт — инструкция
Как сделать так, чтобы вам могли позвонить в один клик:
Способ #1. Через html-код
Если есть доступ к коду, то через изменения в нем можно сделать номер телефона кликабельным.
Текстовый номер телефона (то есть некликабельный) может выглядеть по-разному:
Чтобы сделать номер кликабельным в код нужно добавить следующие элементы:
То есть, для первого варианта (просто текстовый номер) конечный код будет выглядеть так:
Первый номер телефона — это ссылка, второй — как номер отображается на сайте. Вместо номера телефона на сайте может отображаться призыв сделать звонок, тогда код выглядит так:
Если в коде был прописан класс (пример #2), то конечный кликабельный код с добавлением элементов выглядит следующим образом:
Третий номер (с применением шрифта, цвета, выравнивания), соответственно, выглядит так:
P.S. Лучше, чтобы к номеру телефона были применены стили через CSS, потому что если просто сделать кликабельный текст (самый простой первый вариант), то он будет выделен синим цветом и с подчеркиванием, как обычная гиперссылка. Визуально выглядит непривлекательно.
Способ #2. Если сайт сделан на CMS или конструкторе
Если у вас сайт на конструкторе, то телефон делается кликабельным через применение гиперссылки к номеру телефона.
Возьмем к примеру, конструктор Тильда. Телефон обычно указывают в хедере, футере, меню сайта или на отдельной странице с контактами. Но мы покажем на примере обычного текстового блока — остальное делается по аналогии.
Вот у нас на странице блок с текстом, где указан номер телефона. Нужно выделить номер — появляется меню редактирования текста. В нем кликаем на инструмент добавления ссылок.
В поле «Укажите ссылку» прописываем tel:+71111111111. Номер телефона должен быть указан без пробела, кавычек и точек.
Также можно настроить цвет и стиль ссылки — это плюс, так как не нужно морочиться с CSS стилями. Кстати, цвет и стиль ссылок можно задать заранее в настройках сайта и тогда не надо будет каждый раз настраивать их вручную.
Жмем «Применить» и получаем кликабельный номер телефона.
Если сайт на Wix, телефон настраивается похожим образом, с одним отличием. Когда выделяем текст и жмем на инструмент ссылки, появляется дополнительное меню, где можно выбрать, куда ведет ссылка.
В этом меню выбираем пункт «Номер телефона». Телефон указываем в формате +7(111)111-11-11.
Если сайт на WordPress, кроме изменения кода или добавления гиперссылки к тексту, можно использовать сторонние плагины. Например, бесплатный плагин Call Now Button. Он добавляет заметную цветную кнопку с иконкой телефона и призывом позвонить. Все, что нужно — установить плагин в Вордпресс, указать в настройках номер телефона, цвет кнопки и ее местоположение на сайте.
Способ #3. Через сервис коллтрекинга
Современные сервисы коллтрекинга используют функцию подмены номеров. И чаще всего номерам присваиваются атрибуты (классы). Например, у коллтрекинга Callibri это и >
В этом коллтрекинге, если настроена автоподмена номера, ссылка будет иметь вид:
Важно: у сервисов коллтрекинга нужно уточнять код в инструкциях сервиса или у техподдержки. Потому что у них прописываются свои классы, могут меняться настройки. У каждого сервиса коллтрекинга будут свои ссылки.
Как сделать кликабельный номер WhatsApp, Viber, Skype и Телеграм
Кликабельный телефон для мессенджеров делается через html-код, как мы описывали в способе #1 данной статьи. Отличается только сама гиперссылка.
Для WhatsApp:
Номер телефона в самой ссылке (в кавычках) указываем без скобок, пробелов и дефисов.
Для Viber:
Для Skype:
skype_user — это логин в скайпе. Параметр call позволяет сразу начать вызов, если его не добавлять в ссылку, то просто откроется профиль.
Если хотите, чтобы при клике по номеру скайпа автоматически открывался диалог, то вместо параметра call добавляем chat, получается:
Для Телеграм:
Можно добавить в текст короткую гиперссылку вида:
Ссылку можно найти в настройках аккаунта Телеграм. При клике на ссылку откроется диалог с пользователям, там же можно позвонить.
Примеры оформления кликабельных номеров
Телефон на сайте сервиса коллтрекинга Callibri. Тут его еще и подчеркнули для наглядности.
Кликабельный номер на сайте Тинькофф Банка. Визуально номер телефона никак не выделен, но при клике по нему можно совершить звонок.
Книжный магазин «Читай-город» — номер указан на сайте отдельным пунктом меню, вообще визуально не отличается от остальных пунктов.
Заключение
Кликабельный номер телефона позволяет посетителям сайта позвонить в один клик. Без лишних движений. Эта экономит время и дает положительный опыт взаимодействия с сайтом. В итоге кликабельный номер способен повысить конверсию сайта. Мелочь, а работает.