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

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

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

Современные мобильные браузеры могут автоматически делать номер телефона на сайте кликабельным, но это работает не всегда (из-за разных написаний номера телефона).

Наверное, многие из вас сталкивались с такой ситуацией, когда, заказывая какой-либо товар в интернет-магазине, приходилось уточнять некоторые вопросы по телефону. И для этого приходилось записывать номер телефона магазина на листочек / телефон друга, потом снова набирать в свой телефон, и только после этих манипуляций удавалось позвонить. А если телефон поддержки вдруг оказывался недоступен, приходилось всё это проделывать заново.

Именно для того, чтобы решить эту проблему, был разработан способ, который отвечает на вопрос «Как правильно указывать номер телефона на сайте». Давайте разберемся, как разместить телефон на сайте и сделать его кликабельным.

Сделать номер телефона кликабельным можно с помощью обыкновенной ссылки, но со специальным адресом:

То есть в атрибуте href должно быть указано: tel: и номер телефона в формате, который вам нужен.

Выглядеть это будет так:

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

Кроме кликабельного номера телефона, есть возможность добавить кликабельную ссылку на ваш Skype:

Или можно добавить ссылку для звонка со Skype на телефон:

Источник

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

Абсолютно каждый элемент на продающем сайте имеет значение. Простой пример: номер телефона компании на главной странице прописан без ссылки. Потенциальный клиент кликает по цифрам, но ничего не происходит. В итоге человек выделяет номер, копирует его, выходит из браузера, заходит в меню с контактами, вставляет цифры и лишь потом совершает звонок. Но будет ли так делать каждый клиент? Вероятнее всего, нет. Из-за этого владелец сайта рискует потерять часть готовых к покупке пользователей. Чтобы не допустить такого, рекомендуем делать номер телефона на сайте кликабельным. Для этого следует учесть несколько важных моментов.

Звонок в один клик: проверяем ваш сайт

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

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

Использовать активный номер на сайте важно по нескольким причинам:

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

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

Существует несколько простых способов, как сделать номер телефона кликабельным, не потеряв при этом оформление и стили:

Способ 1. Код сайта

Такой вариант подойдет вам, если у вас есть доступ к HTML-коду сайта. Номер на сайте, прописанный обычным текстом, в коде выглядит вот так:

Либо вот так, если у него есть класс:

Если же в тексте используются стили, например, шрифты, цвета или форматирование, то эта часть кода выглядит следующим образом:

Получается, для примера № 1 код получится таким:

Для второго примера код выглядит так:

Наконец, третий пример также без лишних усилий можно преобразовать в гипертекст. При этом сохранятся первоначальные его стили:

Сохраните код, и телефонный номер станет кликабельным.

Способ 2. Конструктор сайтов или CMS

В функционале любого конструктора или CMS-системы есть несколько особых инструментов, которые позволяют сделать номер кликабельным. Полную информацию вы найдете в разделе FAQ на соответствующей площадке (Tilda, Wix, LP и т.д.). Однако есть один способ, подходящий для любого конструктора.

Механизм «Гиперссылка» при форматировании текста доступен, как правило, везде. Цифры — это текст. Следовательно, вы можете ввести их в редактор. Чтобы номер был кликабельным, обозначьте текст номера, оформите его как гиперссылку, после чего в блоке «Адрес» пропишите следующее:

Гиперссылка включится автоматически.

Способ 3. Коллтрекинг

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

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

В ситуации, когда цифры на сайте не кликабельные, подменяться будет и простой номер в форме текста. Если же на ваш номер можно совершить звонок в один клик, то скрипт, используя класс, заменит и номер, прописанный в атрибуте «href=tel:XXX. Когда пользователь нажимает по подменному номеру, совершается звонок.

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

Источник

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

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

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

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

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

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

HTML-код сайта

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

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

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

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

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

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

В WordPress

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

Шапка сайта

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

В Tilda

Zero-блок

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

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

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

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

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

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

Ссылка на Telegram

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

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

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

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

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

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

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

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

Источник

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

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

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

Способ 1

Перейдите к редактированию нужного вам текста и выделите номер телефона.

Теперь нажмите на кнопку вставки ссылки.

В открывшемся окне выберите тип ссылки «Phone» и сохраните изменения.

Способ 2

Далее нажмите на выделенную на скриншоте ниже кнопку HTML на рабочей панели редактора.

Откроется редактор кода страницы. Тут Вам будет необходимо отредактировать уже указанный номер телефона (если в этом тексте уже присутствует номер) или же указать в нужном месте текста номер в следующем формате:

Затем сохраните изменения, нажав «Сохранить и закрыть».

На сайте номер телефона в тексте станет кликабельным и будет выглядеть примерно следующим образом:

Источник

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

12 марта 2018 Опубликовано в разделах: Внеклассное чтение. 6642

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

Многие мобильные браузеры поддерживают автоматическое определение комбинаций телефонов, что позволяет при клике переходить непосредственно к звонку, но в связи с тем, что написание номеров бывает разным, далеко не все адаптируется софтом. Также и последние темы WordPress для корпоративных порталов уже содержат блоки с автоматическим определением и приданием цифровым комбинациям статуса кликабельного номера телефона. Но что делать тем, у кого рукописный сайт, другая CMS или шаблон Вордпресс, не поддерживающий адаптацию? Давайте разберемся.

Первый способ, как сделать ссылку на телефон на сайте

Открываем текстовый редактор и изменяем написание номера следующим образом: +7(123)-456-78-9

Или: Свяжитесь с нами (текст может быть каким угодно).

То есть в атрибуте “href” должен быть указан параметр “tel” и номер телефона в нужном формате, либо побуждающая к действию фраза. Данная строка кода может размещаться в хедере, футере, виджетах, отдельных блоках страницы. Атрибут “tel” дает понять браузеру, что содержимое контейнера является ничем иным, как телефонным номером. Также, при необходимости можно использовать следующие параметры:

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

Выглядеть это будет следующим образом: Свяжитесь с нами. Это позволит сделать активным телефон на сайте независимо от браузера и устройства юзера.

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

Данный метод подразумевает работу на информационной странице какого-либо движка. Мы возьмем в качестве примера Joomla.

В текстовом редакторе CMS выделяем текст с номером или любым другим текстом, под которым будет скрываться линк, далее жмем на кнопку “Вставить ссылку” (link.desc), находящуюся на панели инструментов. Прописываем в соответствующих полях нужные нам данные. В поле URL пишем тег “tel:” и сам номер, начинающийся со знака “+”. Сохраняем. Вуаля.

Способ третий

Также имеется возможность настройки по времени отображения иконки. Это позволит не получать звонки от клиентов в нерабочее время.

Выводы

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

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

– Только качественный трафик из Яндекса и Google
– Понятная отчетность о работе и о планах работ
– Полная прозрачность работ

Источник