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

Битрикс — Делаем номер телефона на сайте кликабельным

Кликабельный номер – неотъемлемая опция современного сайта. Без нее вы можете потерять массу клиентов. Если на сайте номер телефона не кликабельный, а вставлен обычным текстом, то часть клиентов это оттолкнет, т.к. звонить попросту неудобно. Только представьте: надо выделить номер, скопировать его, свернуть браузер, открыть меню для ввода номера, вставить и только после этого звонить. Аж 6 действий! Ваши клиенты вряд ли захотят терять время на подобные манипуляции. Тем более, если через сайт конкурентов можно без проблем позвонить в одно нажатие.

[spoiler]

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

Способ первый. Коды сайта

Этот способ подходит, если можно править HTML-код. В нем обычный телефонный номер прописан так:

<span> +7 (945) 123-45-67 </span>

Если ему присвоен класс, то так:

<p> +7 (945) 123-45-67 </p>.

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

<div name=»phone_number»> +7 (945) 123-45-67 </p>.
Нужно вставить гиперссылку? Примените специальный тег <a>…</a>. А атрибут href=»» уже направит пользователя на конкретную страницу. Напишите ее адрес внутри кавычек. Если хотите, чтобы номер был набран автоматически, используйте дополнительно tel:XXX. XXX – это номер телефона, пишите его без пробелов и тире.

В первом случае html-код будет прописан так:

<span><br>+7(945)123-45-67<br></span>.

Во втором варианте так:

<p>
<br />
+7(945)123-45-67
<br />
</p>

В третьем легко превратить номер телефона в гипертекст, сохранив все стили:

<div name=»phone_number»> <br> +7(945)123-45-67 <br> </p>.

После всех изменений сохраните html-код. Теперь на сайте есть кликабельный номер!

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

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

Но есть один универсальный способ, который подходит для каждого конструктора.
Везде можно создать гиперссылку при форматировании текста. Цифры — это же тоже текст. Соответственно, их можно написать в редакторе, выделить и преобразовать в гиперссылку как обычный текст. А потом в блоке «Адрес» ввести телефонный номер:

tel:+79451234567.

Гиперссылка автоматически будет активной.

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

Если на сайте стоит коллтрекинг, при этом телефонный номер регулярно меняется, сделать его кликабельным можно.

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

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

Резюме

Кликабельный номер телефона — большой плюс для мобильной версии сайта. С ним вы станете значительно ближе к клиентам.

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

Новинка! INTEC рекомендует:

Читайте другие наши статьи:

Хотите быть в курсе всех наших обновлений? Тогда подпишитесь на нас в соцсетях!

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

Почему важно использовать кликабельные номера?

Помните момент, когда вам нужно позвонить в компанию, а телефон на сайте указан обычным текстом? Достаточно неудобно, правда? Особенно, если на сайте у конкурентов можно позвонить в один клик. Что же такое кликабельний номер? 

Это телефон на сайте,  на который при нажатии сразу идет вызов. 

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

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

Для начала, нужно убедиться, что у вас есть доступ, чтобы редактировать код страницы в конструкторе сайтов.

После чего нужно открыть панель с кодом и найти строчку, где указан номер мобильного. Для этого нужно нажать Ctrl+F и в всплывающем окне для поиска начните вводить номер. Например:

Настроить кликабельность можно с помощью ссылки со специальным адресом:

<a href=»tel:+380995327811″>+38(099)-532-78-11</a>

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

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

+38(099)-532-78-11

В результате посетители сайта, зайдя на него с телефона или планшета, смогут просто кликнуть на номер и сразу же позвонить.

HTML-код

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

Для установки кликабельности мы обращаемся именно к  HTML-коду. 

Пример как выглядит строчка до кликабельности:

<div class=phone>+38 099)-532-78-11</div>

И после:

<div class=phone><a href=»tel:+380995327811″>+38 099)-532-78-11</a></div>

Сайт на WordPress

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

Большинство последних моделей смартфонов автоматически распознают номер телефона. По крайней мере, если вы написали этот номер в правильном формате, содержащем коды страны и города. Также, у WordPress есть отличный плюс, бесплатный плагин с кнопкой “Позвонить сейчас”. Это еще больше упростит жизнь вам и вашим клиентам. Плагин называется “Call Now Button”.

Заключение

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

Удобство для клиента — дополнительные конверсии для вашего бизнеса!

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

Удачи!

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

Сегодня мы расскажем и покажем, как сделать кликабельными телефоны, ссылки на Instagram, Facebook и другие соцсети в блочном конструкторе Тильда.

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

Ваши контакты на сайте – это очень важный элемент, чем больше возможностей с вами связаться, тем лучше. Потенциальный клиент, зашедший на сайт, должен иметь возможность связаться с вами удобным для него способом. Кому-то удобнее использовать для связи номер телефона, кто-то хочет воспользоваться мессенджером (Viber, WhatsApp, Telegram, Zalo, Wechat и т.д.), ну а кому-то удобнее использовать e-mail и написать в социальные сети, например, в Facebook, Instagram, VK и другие. На этапе проектирования сайте важная задача – сделать связь с менеджером максимально удобной для наших клиентов. 

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

Рис. 1. Контакты в шапке, или хедере, сайта.

Рис. 2. Контакты в подвале, или футере, сайта.

Итак, начнем с номера телефона. Чтобы сделать номер кликабельным, необходимо перейти в поле «Контент», в выпадающем меню выбрать пункт «дополнительно» и нажав на кнопку, как указано на Рис. 3 ниже, добавить ссылку: tel:+номер телефона (без пробелов), после чего нажать «применить». После этого номер телефона должен стать красного цвета, это значит, что ссылка прикрепилась, далее жмем «сохранить и закрыть».

Рис. 3. Ссылка на номер телефона.

Далее делаем кликабельными социальные сети, тут все проще. В том же меню, где мы добавляли ссылку на номер телефона, выбираем пункт «ссылки на соц. сети», где заполняем поля интересующих нас социальных сетей прямыми ссылками на ваши страницы, например в поле «FACEBOOK PAGE LINK» вставляем ссылку на вашу страницу https://www.facebook.com/ваш аккаунт. Если вы хотите добавить свой Telegram, тогда ссылку необходимо ставить следующим образом: 

• для мобильной версии: tg://resolve?domain=LOGIN, 
• для ПК (ссылка откроется в браузере): https://telegram.me/LOGIN. 

LOGIN=это ваше имя в Telegrame, которое можно посмотреть в настройках.

Почтовый ящик (e-mail) становится кликабельным ровно по тому же принципу, что и номер телефон, путем прикрепления ссылки, смотрите инструкцию ниже, на рисунке 4. После совершения этого действия вам можно будет написать в один клик, что очень удобно для клиентов. 

Рис. 4. Ссылка на e-mail.

Получайте бесплатные уроки и фишки по интернет-маркетингу

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

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

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

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

<a href=»tel:+79876543210″>+7 (987) 654-32-10</a>

Правильный формат телефона на сайте

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

1. Чтобы телефон воспринимался мобильными устройствами даже как текст обязательно используйте префикс (код страны) +7 (987) 654-32-10.
2. Код города или оператора мобильной связи можно указывать через пробел со скобками или без.
3. В хвосте указываем цифры через пробелы или дефис, но только не слитно, так как визуально такой номер трудно воспринимать.

Как отключить выделение телефона

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

Чтобы отключить выделение номера телефона на мобильных устройствах можно воспользоваться одним из способов:

1. Добавить на все страницы сайта в <head></head> следующий код:

<meta name=»format-detection» content=»telephone=no»>

2. Если такой возможности нет, то используем свои стили, оборачивая номер телефона в

<span style=”ваши_стили”></span>

Ссылки на мессенджеры

Дополнением станут ссылки на популярные мессенджеры – хорошая альтернатива сотовой связи в наше время. При переходе по ссылке открывается необходимый мессенджер на телефоне или на ПК.

Ссылка Telegram на сайте

<a href=»https://t.me/ваш_ник» target=»_blank»>Telegram</a>

Ссылка WhatsApp на сайте

<a href=»https://api.whatsapp.com/send?phone=79876543210″ target=»_blank»>WhatsApp</a>

Ссылка Viber на сайте

Работает только при условии, что пользователь открывает ссылку с установленным приложением Viber на его телефоне.

<a href=»viber://add?number=79876543210″>Viber</a>

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

На чтение 5 мин Опубликовано 25.08.2021 Обновлено 25.08.2021

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

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

Выгоды от возможности прямого звонка в ВКонтакте

Выгоды от возможности прямого звонка в ВКонтакте действительно очевидны. Сравните сами и наверняка согласитесь в этом со мной (представлены только тексты постов).

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

Видите? После прочтения для звонка нужно обязательно переписать номер телефона, чтобы позвонить. А если нечем и не на что записать? Но ведь в таком случае может быть упущено драгоценное время…

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

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

Для читателя такого поста в процессе чтения сразу видно, что номер подсвечивается цветом, как все ссылки. А при наведении курсора на него он еще и подчеркивается.

Естественно, что смысл говорить ссылке на звонок в ВКонтакте есть только в том случае, когда звонки ВКонтакте разрешены Вами.

Как разрешить звонки ВКонтакте

А разрешить звонки ВКонтакте, и также при ненадобности наоборот запретить, Вы можете в настройках своего профиля: нужно выбрать режим «Настройки», а далее выбрать вкладку «Приватность».

И уже в разделе «Приватность» проскрольте страницу до раздела «Связь со мной». Найдите в нем опцию «Кто может мне звонить» и сделайте соответствующий выбор круга лиц.

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

Однако и в этом случае есть один небольшой нюанс.

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

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

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

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

Ссылка на звонок ВКонтакте

Конструктивно ссылка на звонок ВКонтакте выглядит вот так:

https://vk.com/call?id=123456789

А теперь для сравнения посмотрите, как выглядит ссылка на профиль в ВКонтакте:

https://vk.com/id123456789

Заметили сходство?

Из этого следует простой вывод, что для написания ссылки на звонок ВКонтакте самый оптимальный вариант — это скопировать ссылку на свой профиль и потом уже добавить в нее в нужном месте слово позвонить с вопросительным знаком (call?) и соответственно поставить знак равенства (=) перед числовым значением самого id.

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

Но так просто будет в только случае, если вы не прописали какой-нибудь никнейм вместо цифрового id.

Как узнать id профиля ВКонтакте

Для копирования id своего профиля в ВКонтакте в случае, когда вы установили ранее никнейм вместо цифр, зайдите в настройки своего профиля, выберите режим «Настройки», а далее — вкладку «Общее».

Проскрольте открывшуюся страницу до раздела «Адрес страницы».

Так вылядит никнейм вместо id

Нажмите в этом разделе надпись «Изменить» и после этого скопируйте цифровое значение id из строки «Номер страницы».

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

Оформление ссылки на звонок ВКонтакте

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

https://vk.com/call?id=123456789

Поэтому ее нужно «доработать» :

@https://vk.com/call?id=123456789 (+7 961 510 10 10)

Доработка несложная. Вы просто в самом начале ссылки без пробелов ставите собачку: @

А в конце ссылки, наоборот, делаете пробел и в скобках прописываете свой контактный номер телефона, например, (+7 961 510 10 10).

При этом нет установленного формата написания телефонного номера.

Вы можете писать его хоть с 8-ки, хоть без пробелов, хоть со скобками… И даже можете вместо номера написать текстовую фразу, типа «Позвонить».

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

Весь процесс создания кликабельной ссылки на телефон в ВКонтакте с множеством примеров в мобильном и десктопном вариантах Вы можете посмотреть в этом видео:

Смотри другие видео на моем видеоканале

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

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

для чего и как сделать

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

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

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

Виртуальный номер и как его создать

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

Для бизнеса такой подход имеет несколько преимуществ:

1. Доверие со стороны пользователя. Если человек увидит кликабельный номер на сайте, да ещё и его области или города, то проект в глазах клиента уже будет выше.
2. Выгодные тарифы, это также можно отнести к преимуществам.
3. Местоположение абсолютно на важно.

Создать его в интернете можно с помощью с помощью сервисов. Одним из выгодных сервисов для подключения является Zadarma.

Для подключения после регистрации необходимо зайти в раздел «Настройки» -> «Виртуальные номера». Далее выбрать пункт «Подключить номер» и выбрать из списка телефон желаемой страны, а далее выбрать город. После нужно ввести данные о себе и нажать на кнопку «забронировать»

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

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

Сделать его активным можно через верстку самого сайта.

Изначально в коде он может иметь несколько видов реализации, например:

• <span> +number phone </span>
• <p class=»phone”> +number phone </p>
• <div id=»number» class=»phone mobile text num» style=»color: #52585F; text-align: center» name=»phone_number»> +number phone </p>

Все эти примеры выполняют одно и то же.

Для кликабельности необходимо сделать из телефона ссылку, реализуется следующим образом:

<a href=»tel:+number phone»> +number phone </a>

В атрибут href необходимо указать параметр tel и указать номер.

Теперь после нажатия на телефон пользователь сразу переходит к звонку.

Кликабельность через CMS-конструктор вашего сайта

Для этой операции в популярных конструкторах сайтов используются уже заготовленные инструменты.

Куда сложнее разобраться с CMS.

Разберем на примере WordPress, делается следующим образом:

1. Необходимо в системе WordPress зайти в раздел «Настройка темы» -> «Верхняя панель и хедер» -> «Макет».
2. Далее выбрать пункт с номером телефона.
3. В поле «Телефон» вставить html-код:
   <a href=»tel:+number phone»> +number phone </a>
4. Нажать на кнопку «Change and close».

Готово, теперь в мобильной версии клиент может сразу позвонить

Если коллтрекинг

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

Код html-страницы, который кроме текста номера будет менять ещё и сам телефон выглядит так:

<p class=»phone”>

<a class=”коллтрекинг” href=”tel:+79998887766”>+7(999)888-77-66</a>

</p>

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

Сделать такую мелочь можно посредством html-кода, либо же исправить в CMS или конструкторе. А если заказать СЕО продвижение, то за вас это сделают специалисты .

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

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

Html код для номера телефона

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

Синтаксис html ссылки на телефон:

Параметр » tel: » не прописан в стандарте HTML. Его научились интерпретировать браузеры. Кстати, некоторые из них могут открывать различные приложения. Но как показывает практика, все же самые популярные (Google Chrome, Opera, Firefox) открывают телефон.

Для задания стиля всем ссылкам с опцией » tel: » можно указать через файл со стилями CSS:

Можно к телефону добавить красивый html-значок телефона (спецсимвол). Для этого нужно прописать следующее

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

Напомним также ссылки на другие важные приложения:

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

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

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

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

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

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

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

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

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

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

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

Некоторые устройства без проблем понимают написанные телефоны, например, слышал, что в Android для этого достаточно заключить линк в span:

При клике по тексту, в теории, весь номер должен выделиться, но на практике у меня это почему-то не получилось.

Лучше использовать в ссылке tel параметр:

Фишка работает с 2011 года, хотя не все браузеры одинаково с ней дружат(жили) — как это часто бывает в верстке, есть определенные нюансы. Поэтому я решил опубликовать немного инфы по теме из интересной англоязычной статьи.

Спецификация и поддержка

По факту tel: — это не опция «А» тега, а протокол (такой же как http: или mailto:, отвечающие за линки на веб-страницы и почтовые адреса соответственно). Конкретного и детального его описания в HMTL5, вроде бы, нет, но после принятия данного стандарта в iOS, он стал использоваться повсеместно.

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

Как реагируют типовые программы:

Оформление ссылки tel: в HTML

Поскольку линк находится в теге А, то отображение ссылки номера телефона полностью зависит от его стилей. Например, если для А добавили класс phone-style, то будет:

Убираем подчеркивание с text-decoration чтобы элемент выглядел как текст.

Если хотите применить один и тот же стиль всем телефонам на сайте, то пишете:

С помощью псевдо класса before и представления символов в unicode можно добавить небольшую иконку в начале:

Советы по созданию ссылки на номер телефона

Данная фишка для мобильных устройств — громадное преимущество, т.к. является отличным Call To Action маркетинговым инструментом. Посетителю сайта не надо пытаться выделить весь текст, вводить номер по памяти и т.п., он просто кликает в нужном месте, и активная ссылка телефона сделает свое дело. Однако тут есть нюансы.

Определение мобильных устройств

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

Здесь, в зависимости от результата условия в IF, в блоке с >

SEO оптимизация

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

Теоретически, в линке можно еще указать rel=»nofollow».

Убираем автоопределение

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

Итого. Если вы размещаете контактную информацию на сайте, то по умолчанию ссылки на телефоны не открываются — вам нужно использовать специальный протокол tel: в HTML теге А. Опция не имеет четкой спецификации, и поддерживается браузерами слегка «хаотично» — учитывайте это. В заключительной части я указал 3 пожелания, которые было бы неплохо внести в ваш код: отключить линки на дестопах, отформатировать код для лучшего считывания поисковыми роботами и т.п.

Если будут вопросы, пишите их ниже. А вы добавляете в своих проектах активные ссылки на номера телефонов? Почему да / нет?

Совет 12 из 31: Удобство использования — сделайте номера телефонов и адреса электронной почты веб-сайтов интерактивными

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

Чтобы не отставать от всех 31 совета, просмотрите полный список здесь или подпишитесь на информационный бюллетень для получения еженедельной сводной электронной почты, или подпишитесь на нас в предпочитаемом социальном канале: LinkedIn, Facebook, Twitter, Instagram, Pinterest или подпишитесь на наш канал на Youtube .

Зачем делать электронные письма и номера телефонов интерактивными?

Во-первых, давайте выделим некоторые контраргументы, которые мы слышали на протяжении многих лет:

• «Клиенты могут просто набрать номер на своем телефоне, так зачем же делать его интерактивным?»
• «У меня есть контактная форма на моем веб-сайте, поэтому мне не нужно делать адрес электронной почты интерактивным»
• «Я не хочу, чтобы меня забрасывали сообщениями из-за того, что я сделал электронный адрес интерактивным»
• «Телефонные звонки не являются моим основным призывом к действию, поэтому я не делаю их интерактивными»

Мы ценим эти контраргументы и знаем, что реализовать их не всегда просто.

Однако мы думаем, что наш аргумент довольно прост.

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

Если бы вы не хотели, чтобы люди звонили или писали по электронной почте, вы бы просто не размещали подробности на сайте.

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

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

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

По данным Statcounter, доля рынка мобильной связи выросла с 26% в 1 квартале 2015 года до 48% к 1 кварталу 2020 года. Источник: https: // gs.statcounter.com/platform-market-share/desktop-mobile-tablet/united-kingdom/

Как сделать их кликабельными?

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

Стандартная ссылка HTML
На языке программирования текст становится интерактивной ссылкой, если он заключен в тег «href». Например, чтобы сделать текст «щелкните здесь» интерактивным и указать ссылку на нашу домашнюю страницу, код будет выглядеть так:

нажмите здесь

Многие платформы (WordPress, Shopify и т. Д.) Имеют кнопки для создания ссылок во встроенных текстовых редакторах, которые пишут этот код за вас. Вы просто выбираете текст «нажмите здесь», нажимаете кнопку ссылки и вставляете целевую ссылку.

Подробнее о HTML-ссылках в школах W3: https://www.w3schools.com/html/html_links.asp

Телефонная ссылка в формате HTML
Телефонная ссылка работает точно так же. Единственная разница в том, что содержание внутри цитат меняется.Чтобы текст «Позвоните нам: 123456789» стал интерактивным, код должен выглядеть так:

Позвоните нам по телефону: 123456789

HTML-ссылка на адрес электронной почты
Ссылка на адрес электронной почты снова похожа. Если бы мы хотели сделать «Пишите нам по адресу: [email protected]» интерактивным, код выглядел бы так:

Напишите нам по адресу: [email protected]

Не стесняйтесь попробовать приведенные выше примеры на своем собственном сайте, изменив назначение ссылки и интерактивный текст на свои собственные данные!

Просмотреть все 31 подсказок

Чтобы узнать обо всех 31 советах по цифровому маркетингу из этой серии, перейдите к основной записи блога.

Сделайте номер телефона интерактивным, чтобы стимулировать звонки — Go WordPress

Вы пытаетесь придумать, как сделать телефонный номер на вашем сайте интерактивным? Если нет, может быть, тебе стоит.

Почему? Что ж, рассмотрим эту статистику:

• 92 процента молодых людей (до 30 лет) и 75 процентов взрослых (старше 50) владеют смартфонами, согласно Phys.org.
• Marketing Land сообщает, что 56 процентов всего веб-трафика генерируется через мобильные телефоны.

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

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

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

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

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

• Разделы верхнего или нижнего колонтитула: Раздел верхнего или нижнего колонтитула (самый верх вашего веб-сайта) или раздел нижнего колонтитула (самый нижний) — отличные места для размещения интерактивного номера телефона, если вы хотите, чтобы этот номер можно было легко найти независимо от того, где посетитель смотрит на ваш сайт.
• Страницы: Вы можете разместить свой интерактивный номер телефона на определенных страницах своего сайта, например на странице «Контакты» или на странице «Наши услуги», которая побуждает посетителей звонить для получения дополнительной информации.
• Сообщений: Вы можете указать свой интерактивный номер телефона в конкретном сообщении в блоге, если хотите, чтобы кто-то позвонил вам сразу после прочтения определенного контента.

Сделайте номер телефона интерактивным за 4 шага

Независимо от того, где вы разместите интерактивный номер телефона, шаги по его настройке одинаковы.

1. Перейдите в режим редактора: Если вы добавляете интерактивный номер телефона на страницу или сообщение, выберите текстовый редактор, в котором вы можете редактировать HTML-код, а не обычный визуальный редактор, в котором вы не видите HTML-код.
2. Скопируйте и вставьте следующий код:

     +1 (XXX) XXX-XXXX  

3. Измените код, чтобы отразить ваш номер телефона: Замените каждый символ «X» на номер из вашего фактического номера телефона.Например, если ваш номер телефона 888-555-1111, вы должны отредактировать код следующим образом:

     +1 (888) 555-1111  

   Если вы живете за пределами США, замените «1» кодом своей страны.

4. Сохраните и опубликуйте изменения, затем проверьте: После сохранения изменений убедитесь, что номер на вашем сайте активен и работает правильно. Посетите свой веб-сайт на мобильном устройстве и щелкните номер, чтобы убедиться, что он работает.

Бонусные соображения

При создании интерактивного номера телефона следует задать себе несколько последних вопросов.

1. Вы хотите кнопку «Позвонить сейчас»? Если у вас есть веб-сайт WordPress.com и вы хотите добавить заметную кнопку «Позвонить сейчас», которую никто не мог бы пропустить, перейдите на бизнес-план, если у вас его еще нет, и установите плагин кнопки «Позвонить сейчас».
2. Вы выбрали лучший размер и расположение для интерактивного номера? На языке веб-дизайна интерактивный номер телефона на вашем веб-сайте известен как «цель для касания».«Если вы хотите ознакомиться с передовыми методами определения размера и интервала касания, Google предлагает краткий обзор, чтобы убедиться, что ваш номер легко увидеть и нажать.

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

Нравится:

Нравится Загрузка …

Связанные

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

У вас есть веб-сайт с указанным номером телефона, но когда вы нажимаете на него, ничего не происходит? У вас есть телефонный номер, на который нельзя нажимать — это простой текст без какой-либо разметки HTML.Чтобы заставить этот номер телефона звонить при нажатии, нам нужно добавить очень специфический фрагмент HTML.

HTML, используемый для вызова интерактивного номера телефона

Как редактировать номер телефона на странице WordPress или в блоге

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

# 1 Войти и перейти на страницу / сообщение

Для начала войдите на свой веб-сайт и перейдите на страницу, которую хотите отредактировать.

# 2 Убедитесь, что вы используете «текстовый» редактор

Если вы еще не используете встроенный текстовый редактор WordPress, нажмите кнопку «Текст», чтобы переключиться из визуального редактора.

# 3 Найдите номер телефона и добавьте фрагмент HTML

Теперь, когда вы находитесь в редакторе «Текст», вы можете добавить HTML. Найдите номер телефона, по которому вы хотите позвонить при нажатии на мобильном устройстве, и добавьте HTML-код (см. Выше) с вашим номером телефона вместо того, который используется в настоящее время.

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

Как редактировать верхний или нижний колонтитул WordPress

Если ваш несвязанный номер телефона найден на странице или в сообщении, мы продемонстрировали, насколько легко можно отредактировать эту страницу и сделать номер интерактивным. Однако что, если номер появляется в файле темы и / или в виджете нижнего колонтитула? Все может стать намного сложнее, если вам нужно отредактировать основной PHP-файл WordPress.Ради этой статьи, , мы не собираемся обсуждать редактирование основных файлов PHP (в конце концов, если у вас есть навыки редактирования файлов PHP, вы должны знать, как сделать звонок по номеру).

Изменить / добавить номер телефона в заголовок через пункт меню

Если у вас нет номера телефона в заголовке сайта, его довольно легко добавить. Просто перейдите в «Внешний вид»> «Меню» (при входе в серверную часть WordPress). Если у вас уже есть собственное меню, отлично! В противном случае вам может потребоваться создать новый.

# 1 Создать новое меню

Если у вас уже есть меню, которое вы хотите использовать, вы можете пропустить этот шаг.

# 2 Добавить настраиваемую ссылку в ваше меню

Если вы хотите добавить страницу или сообщение блога в свое меню, просто выберите страницу, которую вы хотите добавить, в раскрывающемся меню, а затем нажмите «Добавить в меню». К сожалению, вы не можете так легко добавить номер телефона. Вместо этого вам нужно добавить «Пользовательскую ссылку».

В поле «URL» замените «http: //» на: tel: +18883235687 (используя свой номер телефона и код города).

В поле «Текст ссылки» добавьте способ отображения номера телефона для пользователей: (888) 323-5687 (например).

Когда закончите, нажмите «Добавить в меню», а затем «Сохранить меню» (справа).

# 3 Установить меню как основное меню

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

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

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

В демонстрационных целях мы предполагаем, что ваша тема WordPress уже готова к работе с виджетами.

# 1 Добавить новый виджет нижнего колонтитула

В теме Divi у пользователей есть возможность использовать до шести столбцов в пространстве нижнего колонтитула (которые помечены в разделе «Виджеты» вашего веб-сайта (Внешний вид> Виджеты).

Прокрутите страницу «Виджеты» вниз, пока не найдете виджет «Текст», и выберите область нижнего колонтитула, которой вы хотите его назначить (№2 для нашего примера).

# 2 Добавить интерактивный номер HTML

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

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

Заключение

Хотя это основной обзор того, как редактировать и добавлять номер телефона, который можно щелкнуть на веб-сайте WordPress, мы рекомендуем вам использовать форму комментариев ниже, чтобы задать нам любые вопросы, которые могут у вас возникнуть. Обратите внимание, что мы не рассматривали CSS или использование значков, таких как Font Awesome, для стилизации вашего номера телефона; однако, если вам нужна помощь с оформлением номера телефона… просто спросите! Если вам нужны профессионалы, мы можем это сделать! Просто нажмите здесь, чтобы связаться с нашей командой сегодня.

Как сделать так, чтобы телефонный номер на моем веб-сайте был интерактивным? — TheKnowledgeBurrow.com

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

Вот как это сделать:

1. В редакторе HTML начните код с.
2. Введите номер телефона в кавычках. Не отделяйте числа тире. Если вы это сделаете, это может не сработать. Вставьте тел: перед номером.
3. Добавьте текст для телефонного номера. Введите его между> <.

Как добавить кнопку вызова на свой мобильный веб-сайт?

Как добавить кнопку «Звонок по нажатию» на веб-сайт с HTML?

1. Откройте редактор HTML.
2. Введите этот стандартный тег ссылки в любом месте, где вы хотите разместить кнопку «Звонок по рекламе»:
3. В кавычках введите номер телефона своей компании (без тире):

Как сделать мой номер iPhone интерактивным?

Другие мобильные смартфоны смогут распознать ссылку на номер телефона при использовании тега «tel».В приложениях для iPhone введите номера телефонов в формате «tel: 1-800-555-1212», чтобы сделать их интерактивными.

Как работает интерактивный звонок?

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

Следует ли мне разместить номер телефона на моем веб-сайте?

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

Как получить ссылку для звонка?

Добавление интерактивной ссылки в модуль отформатированного текста На панели инструментов отформатированного текста щелкните ссылку InInInsert link icon. Во всплывающем окне введите тел:, а затем цифры номера телефона. Например, если номер телефона 123-456-7890, введите tel: 1234567890. Ссылки для звонков по клику не могут содержать пробелов или дефисов.

Как сделать ссылку для звонка?

Выделите номер телефона или текст, который вы хотите сделать интерактивным на телефонах.Щелкните кнопку «Гиперссылка». Введите тел:, а затем свой номер телефона без тире. Примените ссылку.

Как связать номер телефона в Gmail?

Войдите в Gmail. Щелкните Параметры (значок шестеренки) в правом верхнем углу. В появившемся раскрывающемся меню выберите Параметры почты….

1. Выделите текст, который будет содержать ваш код Click to Call.
2. Щелкните значок гиперссылки.

Что такое URL-адрес телефона?

Это означает универсальный указатель ресурсов — это интернет-адрес компьютера, например, этот — quora.com. Вы не найдете его на своем телефоне, вы вводите его в веб-браузере на своем телефоне.

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

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

Как создать интерактивный номер телефона на WiX?

Щелкните Готово.Добавьте кнопку. Измените текст кнопки. Щелкните значок ссылки. Выберите номер телефона. Введите номер телефона в поле «Какой у вас номер?» поле. Щелкните Готово. В iPhone и iPad при нажатии на интерактивный номер телефона более трех раз подряд устройство блокирует возможность совершить звонок.

Как мне привязать свой номер телефона к моему сайту?

Чтобы связать номер на кнопке, щелкните значок ссылки и введите URL-код для номера телефона, как мы обнаружили ранее в этом посте.Сначала перейдите в «Внешний вид»> «Меню». Выберите меню, в котором вы хотите сохранить номер телефона. В зависимости от сайта у него может быть несколько меню.

Где найти ссылку «Звонок»?

Эти ссылки откроют приложение «Телефон» на мобильных устройствах. На настольных компьютерах пользователи Mac увидят возможность открыть ссылку в Facetime, а пользователи Windows 10 увидят возможность открыть ее в Skype. Вы также можете использовать HTML, чтобы добавить изображение или значок рядом с текстовой ссылкой для вызова по щелчку.Давайте посмотрим, как это сделать.

Лучшие методы SEO: есть ли интерактивный номер телефона…

У нашего агентства перфоманс-маркетинга есть поговорка: «Интернет — это смартфон». Реальность ведения бизнеса в Интернете заключается в том, что больше людей используют свои телефоны, чем когда-либо прежде, для доступа к контенту, поиска людей для ведения бизнеса и совершения покупок. Чтобы оставаться конкурентоспособными, дизайн и разработка вашего веб-сайта должны идти в ногу со временем.

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

Большой возврат инвестиций

Чтобы закодировать интерактивный номер телефона в заголовке веб-сайта, потребуется несколько минут, а окупаемость инвестиций окупится. В рамках проводимых нами кампаний мы обнаружили, что 75–90% потенциальных клиентов с веб-сайта исходит от мобильных пользователей.

Если ваш веб-сайт не рассчитан на пользователей смартфонов, вы упускаете большую часть потенциальных клиентов и новых клиентов.

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

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

Лучшее взаимодействие с пользователем

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

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

• Имейте один номер телефона на своем сайте.

• Выделите членов команды для ответа на телефонные звонки в рабочее время.

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

• Сделайте последующую деятельность главным приоритетом.

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

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

Улучшенный рейтинг SEO

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

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

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

В этом уроке я покажу вам, как сделать номер телефона интерактивным в WordPress.

Почему?

Потому что более 50% пользователей Интернета выходят в Интернет с мобильных телефонов.

И если ваша цель состоит в том, чтобы посетители сайта звонили вам, чтобы узнать больше о ваших продуктах и ​​услугах, что дает вам возможность совершить продажу…

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

Тем не менее, есть несколько различных способов сделать телефонные номера интерактивными. Сначала мы начнем с самых быстрых и простых методов.

В этой статье

The Blog Mechanic помогает новым пользователям WordPress, блогерам, не являющимся техническими специалистами, и занятым владельцам веб-сайтов с помощью WordPress. Посмотрите мои услуги или свяжитесь со мной.

Как сделать номер телефона интерактивным в WordPress (текстовые ссылки)

Если вы просто хотите разместить текст на странице или разместить интерактивный номер телефона, есть два способа сделать это — с помощью редактора WordPress и HTML-кода.

Метод 1. Использование редактора WordPress

Большинству людей удобнее работать с редактором WordPress, чем с кодом HTML, поэтому сначала мы начнем с редактора.

Примечание: шаги одинаковы как для редактора Gutenberg, так и для классического редактора WordPress. Единственная разница в том, что редакторы выглядят иначе.

Редактор Гутенберга выглядит так:

А классический редактор выглядит так:

Приступим. (См. Изображения выше для дальнейших указаний).

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

Вот и все. Вот как сделать телефонный номер интерактивным в WordPress с помощью редактора.

Метод 2: Использование HTML-кода:

Этот метод позволяет сделать интерактивным номер телефона в любом месте на вашем веб-сайте WordPress (например.грамм. пользовательские HTML-виджеты и файлы шаблонов), а не только на страницах и сообщениях.

На самом деле, маловероятно, что вам когда-нибудь понадобится использовать HTML-код на страницах и в публикациях для создания интерактивных номеров телефонов, потому что для этого у вас есть редактор WordPress.

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

Вы должны добавить его в текстовую вкладку при использовании классического редактора:

Или переключитесь в режим HTML при использовании редактора блоков Гутенберга:

Тем не менее, вот код, который вам нужно добавить в желаемое место на вашем сайте:

  +1 (209) 634 4732  

Или этот код, если вы хотите использовать текст с призывом к действию вместо номера телефона:

  Позвони мне  

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

И все! Вот как с помощью HTML-кода сделать номер телефона интерактивным в WordPress.

Как связать изображения и кнопки с интерактивным номером телефона в WordPress

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

И так же, как текстовые ссылки, вы можете сделать это с помощью редактора WordPress и HTML-кода.

Метод 1. Связывание изображений с помощью редактора WordPress

Этот метод предназначен для привязки изображения на странице или публикации к интерактивному номеру телефона.

Для целей этого урока я создал кнопку с изображением.

• Откройте страницу или сообщение с помощью редактора
• Загрузите изображение, на которое вы хотите связать
• Щелкните изображение, чтобы выбрать его
• Нажмите кнопку «вставить ссылку»

ТО

• Введите тел .: и затем номер телефона (без пробелов и тире)
• Нажмите кнопку «Применить»
• Опубликовать или обновить страницу или опубликовать

Вот и все.Теперь вы связали изображение с интерактивным номером телефона с помощью редактора WordPress.

Опять же, как и в первом руководстве по текстовым ссылкам, шаги одинаковы как для редактора Гутенберга, так и для классического редактора.

Метод 2: Связывание кнопок с помощью редактора WordPress

Этот метод используется для привязки стандартной кнопки к номеру телефона, а не кнопки изображения, НО он работает только с редактором Гутенберга.

Если вы используете классический редактор, вам нужно будет использовать код HTML (перейдите к следующему методу) или используйте изображение кнопки вместо (см. Метод 1 выше) .

• Откройте страницу или сообщение с помощью редактора.
• Щелкните значок «+»
• Найдите и выберите блок кнопок

Блок кнопок будет добавлен на страницу или в сообщение.

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

Теперь просто опубликуйте или обновите страницу или страницу. Вот и все. Вы успешно связали кнопку с номером телефона с помощью редактора Гутенберга.

Метод 3. Связывание изображений с помощью HTML

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

Например, в области верхнего, нижнего колонтитула и боковой панели…

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

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

Тем не менее, вот как связать изображение с номером телефона с помощью HTML-кода.

Сначала загрузите изображение в свою медиа-библиотеку в WordPress и запишите URL-адрес прикрепленного изображения. Я рекомендую вам скопировать и вставить его в документ блокнота.

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

Если изображение больше, чем вы хотите, вы можете уменьшить его, добавив дополнительный код для изменения его ширины, например:

Вот и все. Вы успешно связали изображение с интерактивным номером телефона на своем веб-сайте WordPress с помощью HTML-кода.

Метод 3. Связывание стандартных кнопок с помощью HTML

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

Например, в области заголовка, нижнего колонтитула и боковой панели с использованием виджетов HTML и файлов темы.

Для этого добавьте этот код:

 
 +1 (209) 634 4732 
 

Или этот код, если вы хотите, чтобы на кнопке был текст с призывом к действию, а не номер телефона.

 
 Позвоните нам 
 

После копирования и вставки кода на свой веб-сайт все, что вам нужно сделать, это обновить номер телефона и текст кнопки.

Примечание: стиль вашей кнопки унаследован от вашей темы WordPress. Чтобы изменить внешний вид кнопки, вы можете использовать код CSS.

Заключение

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

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

.

Вам также может понравиться

Почему вам нужно размещать свой номер телефона в верхней части пропана…

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

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

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

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

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

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

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

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

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

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

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

Убедите потенциальных клиентов, что они могут достучаться до человека

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

Ваши потенциальные клиенты хотят поговорить с людьми.

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

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

СОВЕТ: Не используйте систему автоматического ответа, убедитесь, что на телефонный звонок отвечает реальный человек. Ничего из этого, «Нажмите 1 для продаж; нажмите 2 для поддержки », прочее. Если вы не можете быть доступны круглосуточно и без выходных, подумайте о том, чтобы воспользоваться услугами профессионального автоответчика.

Сделайте номер вашей пропановой компании частью вашей маркетинговой стратегии

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