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

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

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

Первый вариант, простой

Если сайт создан на конструкторе, например: Тильда, LPGenerator LPmotor и любой другой, где не нужно редактировать html код, все оформляется  как в простом редакторе документа MS Word. Чтобы номер телефона стал кликабельным, нужно пройти три простых шага.

Шаг 1

Зайти в редактор страницы, найти блок с номером телефона. (на примере конструктора Tilda)

Шаг 2

Нажмите на цифры, откроется редактор текста. Выделите все символы номера телефона.

Шаг 3

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

А какую ссылку добавить-то? Сейчас расскажу… Ссылка с тегом выглядит следующим образом:

tel:XXXX

где первая часть tel: это специальный тег для набора номера, а ХХХХ, это цифры, номера телефона.  Адрес правильной ссылки будет выглядеть примерно так:

tel:+71234567890

Добавьте эту ссылку на все страницы и блоки, где есть номер телефона.

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

Второй вариант, сложный

Сайт сделан на обычном html коде, или каком-то движке типа WordPress, где контент сайта нужно редактировать в коде страницы. Это сложный способ для обычного пользователя, поэтому для этой задачи вам понадобится программист. 

Найти в коде сайта где расположен номер телефона и добавить к нему тег гиперссылки <a></a> с атрибутом href, в нем указать ссылку на номер телефона, в таком же формате tel:XXXX (как в примере с конструктором сайта)

В результате у вас должен получиться такой html код:

<a href=”tel:+71234567890”>+7(123)456-78-90</a>

На опубликованной странице он будет выглядеть вот так: +7(123)456-78-90 попробуйте на него кликнуть и позвонить. Номер не существующий.

Третий вариант, с коллтрекингом

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

Коллтрекинг — Сервис сквозной аналитики, позволят отследить источник звонка

Меня волновал этот вопрос, я решил разобраться в этом путем экспериментов. Тестирования проводились в системе ROIstat и Callibri.

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

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

Важно + рекомендации 

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

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

По теме: если нужен домен для сайта, рекомендую сервис: REG ru, регистрируйся! А по промокоду: F761-A14A-B178-9947 получи дополнительную скидку 5%

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

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

Нашли ошибку в тексте? Выделите фрагмент и нажмите ctrl+enter

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

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

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

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

Этот способ подходит, если можно править 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><a href=»tel: + 79451234567″>+7(945)123-45-67</a><br></span>.

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

<p>


<br />


<a href=»tel:+ 79451234567″ >+7(945)123-45-67</a>


<br />


</p>

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

<div name=»phone_number»> <br> <a href=»tel:+79451234567″>+7(945)123-45-67</a> <br> </p>.

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

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

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

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

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

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

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

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

Главное — запомнить, что за скрытие номера под другим видом отвечает атрибут(для сервиса Сallibri). 

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

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

Резюме

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

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

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

Автор Максим Остропольский На чтение 6 мин. Просмотров 20.5k. Опубликовано 13 августа, 2019

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

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

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

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

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

HTML-код сайта

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

<span>8-123-456-78-90</span>

или так:

<div>
  +7 (900) <span>101-56-78</span>
</div>

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

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

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

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

<div>
  <a href=”tel:+79001015678”>
    +7 (900) <span>101-56-78</span>
  </a>
</div>

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

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

В WordPress

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

Шапка сайта

1. Если телефон находится в шапке сайта, то заходим в административной панели: «Внешний вид» -> «Редактор».
2. Справа, в Файлах темы находим «header.php», нажимаем на него.
3. В коде находим телефон. Для быстрого поиска кликнете левой кнопкой мыши на поле с кодом и нажмите комбинацию на клавиатуре: “Ctrl” + “F”. Затем введите несколько цифр телефона и нажмите “Enter”. Нужный фрагменты станут выделены желтым цветом.

4. Теперь остается обернуть простой текст в гиперссылку. Как это сделать смотрите в предыдущем пункте статьи.В данному случае получается по итогу так:

5. Нажимаем “Обновить файл” и изменения сохраняются. Проверяем работоспособность на сайте. Готово!

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

1. Если телефон находится в записи, то переходим в редактор записи/страницы.

2. Переходим в редактор кода, нажав на вкладку “Текст”:

3. Выделяем номер и нажимаем кнопку “link”. В поле “URL” добавляем гиперссылку для номера:

4. Получается так:

5. Нажимаем “Обновить” и страница сохраняется. Готово!

В Tilda

Zero-блок

• Переходим к редактированию блока, нажав на кнопку “Редактировать блок” в конструкторе нужной страницы:

• Выделяем телефон и нажимаем кнопку “Setting”:

• В поле Link в настройках вводим ссылку: “tel:+ номер телефона с +7”

• Сохраняем изменения в блоке и публикуем страницу.

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

• Нажимаем “Контент”:

• Находим нужный блок, выделяем телефон и нажимаем иконку “Ссылка”:

• Выбираем пункт: “Вставить ссылку”:

• В поле “URL” вводим “tel:+ номер телефона с +7” и нажимаем кнопку “Вставить”:  

• Сохраняем изменения в блоке и публикуем страницу.

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

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

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

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

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

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

1. Находим иконку, которую будем использовать. Для этого подойдет, например, сервис Flaticon.com.

2. Выбираем подходящее по стилистике изображение. Кликаем на него, выбираем формат SVG.
3. Дальше будет показан алгоритм действия, если сайт на Тильде. Если сайт на другой CMS, то нужно будет загрузить файл на хостинг и добавить небольшой HTML и CSS-коды на сайт, чтобы разместить иконку, например, в шапке. Для этого понадобятся минимальные знания верстки, либо помощь верстальщика.
4. На Тильде переходим в редактирование Zero блока.
5. Выбираем пункт добавить изображение и загружаем иконку.

6. Масштабируем ее и размещаем в нужном месте блока.
7. Добавляем в поле Link ссылку https://wa.me/номертелефона

8. Сохраняем изменения в блоке и публикуем страниц сайта. Готово! Кнопка Whatsapp теперь кликабельная и сразу перенаправляет пользователя на диалог в мессенджере.

Ссылка на Telegram

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

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

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

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

Либо так:

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

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

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

Либо так:

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

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

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

<a href="mailto:[email protected]">[email protected]</a>

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

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

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

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

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

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

Лендинг должен быть удобным. Посетитель заходит на сайт и с первого взгляда должен понять, какую проблему он может здесь решить. Качественно сконструированный первый экран на 100% на это работает. Здесь всё должно быть удобно и понятно – меню с навигацией, фотография или видео продукта, краткое описание услуг. Кликабельный номер – часть такого удобства.

По статистике 52% пользователей интернета выходят в сеть с компьютеров и мобильных устройств, 19% – только с мобильных. Шанс, что ваш сайт будут просматривать с телефона – высок. Если номер телефона кликабельный, клиенту не придется переключаться с вкладки на вкладку – он просто нажмет на номер телефона и позвонит вам. Вы не потеряете своих клиентов.

Обычно номер размещают в меню на первом экране и в подвале среди контактов. Разбираемся, как это сделать.

Добавим виджет “Кнопка” на секцию.

Перейдём в настройки виджета в раздел “Содержимое” и изменим название кнопки. Далее переходим в раздел “Вид” – “Текст” – “Подробные настройки” и настраиваем нужный “Размер текста”.

Во вкладку “Цвета” – “Подробные настройки” и зададим нужный цвет текста при:
1) Обычном состоянии
2) Под курсором
3) По клику

Далее переходим в раздел “Действие”, выбираем “Открыть страницу” и прописываем код телефона в поле “Ссылка”: tel:+ и ваш номер. Например, tel:+71234567890

Публикуем страницу и всё готово. Проверяем в режиме предпросмотра.

Добавим виджет “Текст” в секцию и отредактируем его.

Выделим текст в режиме редактирования и установим на него ссылку в виде: tel:+71231234567 в поле “URL”. После tel:+ – ваш номер телефона. Нажимаем “Вставить” ссылку на выделенный текст.

Готово! Ссылка установлена и работает для вызова.

Как убрать подчеркивание текстовой ссылки?

Переходим в “Просмотр HTML-кода” виджета “Текст” и после ссылки установим код:

style="text-decoration: none;"

Например,

<p><a href="tel:+71231234567">Позвоните нам!</a></p>

Как изменить цвет ссылки?

Перейдем в “Просмотр HTML-кода” виджета “Текст” и после ссылки установим код:

color: #262626; или style="color: #262626;"

Например,

<p><a href="tel:+71231234567">Позвоните нам!</a></p>

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

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

Другие рекомендации по созданию лендинга – в блоге Платформе в рубрике #сделайлендинг.

Лайфхаки для продвинутых пользователей – в рубрике #сделайлучше.

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

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

Получи нашу книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Подпишись на рассылку и получи книгу в подарок!

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

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

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

Открываем текстовый редактор и изменяем написание номера следующим образом: <a href=»tel:+7123456789″>+7(123)-456-78-9</a>

Или: <a href=»tel:+7 (123) 45 67 89″>Свяжитесь с нами</a> (текст может быть каким угодно).

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

• sms – послать смс сообщение;
• fax – для отправки факса.

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

Выглядеть это будет следующим образом: <a href=»callto:+7 (123) 45 67 89″>Свяжитесь с нами</a>. Это позволит сделать активным телефон на сайте независимо от браузера и устройства юзера.

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

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

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

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

Если вы используете популярную систему управления контентом WordPress, то можете применить плагин, позволяющий сделать кликабельный номер телефона на сайте. Встречайте — CallPhone’r. Этот модуль выводится на каждой странице портала иконку, при нажатии на которую мобильное устройство переходит в режим вызова. Настройки очень простые, представлены на скриншоте ниже.

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

Выводы

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

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

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

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

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

Большинство последних моделей смартфонов автоматически распознают номер телефона. По крайней мере, если вы написали этот номер в правильном формате, содержащем коды страны и города:

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

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

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

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

• Откройте сообщение в текстовом редакторе или, откройте код шаблона WordPress
• Вставьте следующую строку:

• Смените номер телефона на свой
• Сохраните, опубликуйте или обновите свой пост.

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

Использование Skype звонков.

Но что, если вы хотите, чтобы ваши посетители могли выбирать между обычным и skype звонком? Тогда вам просто нужно изменить протокол в ссылке. Итак, вместо протокола TEL, используйте протокол CALLTO:

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

Использование СМС

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

Как добавить кнопку вызова с помощью бесплатного плагина.

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

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

Это плагин Call Now Button

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

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

Кода вы установите и активируете плагин Call Now Button, зайдите в его настройки. Перед вами откроются три вкладки. На первой вкладке введите свой номер телефона, а также текст, который будет показан на кнопке.

Далее перейдите на вкладку Presentation. Выберите здесь цвет кнопки, позицию кнопки, а также введите те ID постов, на которых вы хотите отобразить кнопку, или выберите опцию Exclude these posts and pages и введите те ID постов, на которых кнопка вызова не должна появлятся.

И на вкладке Advanced вы можете добавить дополнительные настройки, такие как отслеживание ваших звонков с помощью Google Analitics и других настройках.

И вот как будет выглядеть готовая кнопка вызова.

Как и во многом другом, в WordPress создание кликабельных номеров телефонов совсем не сложно. И это можно сделать буквально в несколько кликов.

А если у вас остались ещё вопросы, то задавайте их в разделе с комментариями, и я с радостью на них отвечу.

Как сделать свой телефон на сатах «живым»

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

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

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

Или вот так:

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

В процессе создания любой ссылки необходимо использовать тег <a>…</a>. Между знаками требуется располагать текст ссылки или картинку. Определение href=”” обозначает действие или адрес ссылки. Для ввода номера необходимо вводить код: tel: + 7XXXXXXXXXХ, где на месте + 7XXXXXXXXXX вводится необходимый номер телефона.

После доработки готовый код выглядит следующим образом:

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

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

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

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

Номер телефона в шапке сайта

Указать кликабельный номер в шапке сайта можно следующим образом:

1. Сперва необходимо открыть административную панель и перейти во вкладку под названием «Внешний вид», а после в раздел «Редактор»;
2. Далее справа, в разделах «Файлы» нужно найти тему «header.php» и нажать на нее;
3. В открывшемся коде нужно найти номер телефона. Это можно сделать при помощи быстрого поиска, нажав левой кнопкой мыши на поле с кодом, а после также зажав комбинацию на клавиатуре «Ctrl» + «F». Далее нужно ввести несколько цифр из номера и нажать на клавишу «Enter». Введенные фрагменты выделятся желтым цветом;
4. На этом этапе требуется превратить простой тест в работающую ссылку. Для этого нужно также вставить значение href=””, а после необходимо ввести код: tel: + 7XXXXXXXXXХ, где на месте + 7XXXXXXXXXX вводится необходимый номер телефона;
5. В конце нужно нажать на кнопку «Обновить», после чего все изменения сохранятся.

Номер телефона в записи или на странице

Делается это следующим образом:

1. Сперва потребуется также перейти в редактор записи или страницы;
2. Далее нужно перейти в меню редактора кода, для этого нужно нажать на раздел «Текст»;
3. В открывшемся меню нужно выделить номер и нажать на кнопку под названием «Link». Далее в поле «URL» нужно добавить гиперссылку необходимого номера телефона;
4. Должно получиться следующим образом:
5. В конце требуется просто обновить, после чего страница сохранится.

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

В Zero-блоке

Для этого сперва потребуется перейти в раздел редактирования блока. Делается это нажатием на кнопку «Редактировать блок», которая находится в конструкторе необходимой страницы.

Далее пользователь должен выделить телефон и нажать на кнопку под названием «Setting». После чего в поле «Link», которая находится в настройках, нужно ввести следующий код: «tel:+ номер телефона с +7».

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

В стандартном блоке

Для этого необходимо сделать следующие действия:

1. Сперва потребуется нажать на кнопку «Контент», расположенную вверху меню;
2. После нужно найти необходимый блок и выделить в нем номер телефона. Далее нужно нажать на значок «Ссылка»;
3. На этом этапе нужно выбрать пункт под названием «Вставить ссылку»;
4. Теперь в поле под названием «URL» нужно ввести следующее: «tel:+ номер телефона с +7», а после нужно нажать на кнопку «Вставить»;
5. Готовые изменения нужно сохранить, а после можно публиковать страницу.

Как добавить на сайт активную ссылку на WhatsApp

Делается это точно так же, как и добавляется номер телефона. Только в этом случае немного отличается сама ссылка. Она будет иметь следующий вид:

Однако, на сайтах делается кликабельным не номер телефона, а иконка мессенджера WhatsApp. На примере конструктора Тильда делается это следующим образом:

1. Для начала пользователь должен найти иконку, которую будет использовать. В этом может отлично помочь сервис «Flaticon.com»;
2. Нужно выбрать наиболее подходящее по стилистике сайта изображение. После нужно кликнуть на него и выбрать формат SVG;
3. Теперь необходимо зайти в режим редактирование нулевого блока;
4. После пользователь должен выбрать кнопку «Добавить изображение» и загрузить выбранную картинку;
5. Загруженную картинку потребуется масштабировать, а после разместить в подходящем месте блока;
6. В поле «Link» нужно добавить следующую ссылку: «https://wa.me/номертелефона»;
7. Готовые изменения нужно сохранить в нулевом блоке.

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

По ссылке можно посмотреть видео, в котором рассказывается о том, как это сделать:

Как добавить ссылку на Telegram

Алгоритм действий при добавлении активной ссылке в Телеграмме точно такой же, как и с предыдущим мессенджером. Однако, отличается он тем, что стандартная ссылка в формате «https://t.me/seoforge» не работают на территории Российской Федерации.

В связи с этим потребуется использовать перенаправление через специальные сервисы. Для этого можно использовать tele.gg, telegram.im и другие сервисы. Они абсолютно бесплатны, а также в них нет рекламы.

Готовая ссылка будет иметь следующий вид:

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

Также она может иметь такой вид:

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

Возможные проблемы

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

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

<a class=”callibri_phone” href=”tel:+79998887766”>

<span>+7(999)888-77-66</span>

</a>

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

Вячеслав

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

Задать вопрос

Что такое кликабельный номер?

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

Где поддерживается эта функция?

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

Можно ли создать такую же ссылку на почту или Skype?

Да, такая возможность существует. При клике на почту будет открываться почтовый клиент пользователя, а при клике на Skype будет открываться чат с указанным человеком.
Это также можно делать в конструкторах для создания сайтов.

4.1 / 5 ( 19 голосов )

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

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

Приготовьтесь кодировать!

По сути, у вас должен быть доступ к конструктору вашего сайта. Независимо от того, используете ли вы WordPress, Wix, Unbounce или что-то еще, у вас должна быть возможность редактировать страницу и / или шаблон, на котором должен отображаться номер телефона.Если у вас нет доступа, попросите администратора сайта (или попросите его сделать это за вас).

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

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

  +61 (07) 5555 2345  

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

Примечание о вариациях

Также можно сделать это, используя «tel» вместо «callto», как показано ниже:

  +61 (07) 5555 2345  

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

Настольные браузеры

В зависимости от компьютера, который кто-то использует, он может вызывать браузеры на своем рабочем столе! Например, на Apple Macbook с включенным FaceTime вы можете нажать, чтобы позвонить по номеру.

Когда это может не сработать…

Имейте в виду, что это может не работать на всех смартфонах . Он должен работать на большинстве из них (включая устройства iPhone и Android), но есть вероятность, что у ваших клиентов нет совместимого телефона.

Некоторые браузеры смартфонов могут даже распознавать номер телефона и делать его интерактивным без необходимости использования этого кода. Удобно!

–

Надеемся, это поможет! Дайте нам знать, если у вас возникнут вопросы.

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

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

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

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

Нет? Тогда читайте дальше..

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

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

1.

В редакторе публикации или страницы нажмите кнопку ссылки, чтобы вставить ссылку в текст (иногда это отображается как значок цепочки, на этом снимке экрана это ссылка)

2.

Вы собираетесь ввести свой номер телефона в поле url, где вы обычно помещаете адрес веб-сайта, на который хотите создать ссылку, но сначала введите tel: перед вашим номером телефона, это дает указание рассматривать ссылку как телефон. количество.

3.

Щелкните Добавить ссылку. Это действительно так просто!

HTML-код для ссылок Click-to-Call

Когда вы Google

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

или

«Как создать ссылку для звонка»

, вы получите ответ, в котором говорится о коде HTML. Все это звучит очень сложно, если вы не разбираетесь в кодировании, но при использовании этого метода все, что вам нужно запомнить, — это указать tel: перед своим номером телефона в любом поле URL-адреса ссылки.

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

Все, что вам нужно ввести, это

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

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

Есть ли у вас звонок по телефону на вашем веб-сайте?

Оставьте ссылку в комментариях, чтобы мы могли это проверить!

#WebsiteWednesday

Каждую среду мы обсуждаем веб-сайты в Your Marketing Lounge, моей бесплатной группе Facebook, где вы можете задавать вопросы, делиться и обсуждать передовой опыт или будущие тенденции в виртуальном пространстве для совместной работы.Запросите бесплатный доступ и присоединяйтесь к разговору сегодня.

Создайте ссылку для звонка или электронной почты

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

Ссылки

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

Вы можете вставлять ссылки Click-to-Call и mailto в модули форматированного текста и призывы к действию (CTA).

Создать ссылку для звонка

Добавить ссылку «Звонок по клику» в модуль форматированного текста

• Щелкните Добавить ссылку .
• Чтобы применить изменения в реальном времени, нажмите Опубликовать или Обновить в правом верхнем углу.

Добавить ссылку «Звонок по рекламе» в призыв к действию

• В своей учетной записи HubSpot перейдите к Marketing > Lead Capture > CTA .
• Наведите указатель мыши на CTA и щелкните раскрывающееся меню Действия , затем выберите Изменить .

• Задайте дизайн CTA, затем нажмите Далее в правом нижнем углу.

• Щелкните раскрывающееся меню Тип перенаправления URL-адреса и выберите Номер телефона .

• В поле Введите номер телефона введите номер телефона .

• В правом нижнем углу нажмите Сохранить .

Создать ссылку mailto

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

Форматировать почту по ссылке

Если вы не используете модуль форматированного текста или CTA, вы можете вместо этого создать ссылку mailto вручную. Выделите текст, который хотите связать, затем введите: mailto: [email protected] в качестве ссылки.

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

mailto: [адрес электронной почты получателя]? Subject = [тема электронной почты] & body = [тело электронной почты]

Поскольку ссылки не поддерживают пробелы, вам нужно будет использовать % 20 вместо каждого пробела. Каждые % 20 будут отображаться как пробелы в строке темы и теле письма при нажатии ссылки mailto.

Например, ссылка mailto для электронного письма с получателем recipient @ hubspot.com, , в строке темы «Зарегистрируйтесь на наш веб-семинар» и в теле письма «Не забудьте зарегистрироваться сейчас!» будет выглядеть так:

mailto: [email protected]? Subject = Зарегистрируйтесь% 20for% 20our% 20webinar & body = Не забывайте% 20to% 20sign% 20up% 20now!

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

Добавить ссылку mailto в модуле форматированного текста

Добавить ссылку mailto в CTA

• В своей учетной записи HubSpot перейдите к Marketing > Lead Capture > CTA .
• Наведите указатель мыши на CTA и щелкните раскрывающееся меню Действия , затем выберите Изменить .

• Задайте дизайн CTA, затем нажмите «Далее» в правом нижнем углу.

• Щелкните раскрывающееся меню Тип перенаправления URL-адреса и выберите Адрес электронной почты .

Целевые страницы

Эл. адрес

Блог

База знаний

CTA

Страницы веб-сайта

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

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

Большинство последних моделей смартфонов автоматически распознают телефонный номер. Что ж, это правда, по крайней мере, если вы написали этот номер в правильном формате, содержащем коды страны и города:

<(Area Code)>

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

Добавьте интерактивные номера телефонов

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

1. Откройте сообщение в текстовом редакторе или используйте код в шаблоне
2. Скопируйте и вставьте одну из следующих строк:

+1 (234) 567-8912

3. Изменить номер телефона
4. Сохраните, опубликуйте или просмотрите свой пост

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

Используйте Skype-звонок

Но что, если вы хотите, чтобы пользователи вашего смартфона могли выбирать между обычным звонком и звонком в Skype? Не волнуйтесь; вам просто нужно изменить протокол в ссылке.Итак, вместо протокола TEL используйте протокол CALLTO:

  +1 (234) 567-8912  

 
 Если вы используете Skype, вы можете даже позволить пользователям звонить вам, указав имя в Skype. 
 
 Используйте SMS 
 
 Знаете ли вы, что вы даже можете создать ссылку на SMS-сообщения? Как вы уже догадались, вам просто нужно сменить протокол. Как и следовало ожидать, эта ссылка ничего не сделает, если щелкнуть на настольном компьютере, поэтому убедитесь, что ваши пользователи знают, что вы разрешаете им отправлять SMS-сообщения или использовать такую ​​ссылку только тогда, когда ваш сайт находится в отзывчивый режим.
 
  Отправить SMS
на +1 (234) 567-8912  
 
 Добавить кнопку «Позвонить сейчас» с помощью бесплатного плагина 
 
 Если ваша компания сильно зависит от телефонных звонков, вам следует сделать еще один шаг, когда дело доходит до создания интерактивных телефонных номеров. Вместо того, чтобы создавать простую ссылку, вы можете подумать о добавлении кнопки «Позвонить сейчас», которая всегда будет доступна вашим мобильным посетителям. К счастью, среди некоторых замечательных плагинов WordPress есть фантастический бесплатный, который может помочь вам в этом.
 
 Кнопка «Позвонить сейчас» 
 
  ЦЕНА:  Бесплатно 
 
 Этот бесплатный плагин легкий и требует секунд для установки, активации и настройки. Все, что вам нужно будет сделать после установки, — это ввести свой номер телефона, выбрать цвет кнопки и ее расположение. Вы можете отобразить кнопку вызова сейчас в левой или правой части экрана или выбрать отображение полностью нижней кнопки, которая подчеркнет вашу новую функцию. 
 
 Если у вас есть учетная запись Google Analytics, связанная с вашим веб-сайтом, плагин позволяет отслеживать телефонные звонки, создавая событие для каждого клика.Это просто; после настройки плагина подождите не менее 24 часов, прежде чем Google Analytics отобразит данные. 
 
 Если вы не хотите, чтобы кнопка отображалась на определенных постах и ​​страницах, запишите их идентификаторы в настройках. Это просто. Чтобы кнопка отображалась на всех страницах WordPress, оставьте последний вариант пустым. 
 
 Как и многое другое в WordPress, создание интерактивных номеров телефонов совсем несложно. Надеемся, эта статья поможет вам создать свою собственную. Как вам ваши новые ссылки? 
 
 Если вам нужна дополнительная помощь в ведении блога WordPress, улучшите свои навыки работы с WordPress с помощью наших руководств.
 
 Оптимизируйте свой веб-сайт для мобильных устройств с помощью интерактивных номеров телефонов 



 
 19 апреля 2013 г. 
 


 Модернизация существующего веб-сайта для мобильных устройств может быть сложной и потенциально дорогостоящей, особенно если требуется некоторое изменение дизайна или отдельный мобильный сайт. Однако есть одна небольшая вещь, которую вы можете легко и недорого сделать для своего текущего веб-сайта для посетителей мобильных устройств — сделать свои номера телефонов интерактивными! 
 
  Как работают интерактивные телефонные номера  
 
 Все мы знакомы со ссылками на веб-сайтах.Большинство веб-сайтов в настоящее время используют несколько различных типов: 
 
 
 ссылки на другую страницу или веб-сайт 
 
 ссылается на адрес электронной почты, который открывает ваш почтовый клиент по умолчанию, когда вы нажимаете на него и вводите адрес электронной почты в поле «Кому». 
 
 внутристраничные ссылки или якорные ссылки, которые перемещают вас в другую часть той же страницы, когда вы нажимаете на них 
 
 
 Ссылки используют так называемый атрибут «href» тега HTML «a». В зависимости от браузера атрибут href принимает ряд различных «схем», которые сообщают браузеру, что делать со ссылкой при нажатии на нее.Ссылки на другую страницу или веб-сайт используют схему «http» или «https». Ссылки на адрес электронной почты используют схему «mailto». Удобная схема «тел» позволяет привязать телефонный номер. В браузерах, которые распознают схему tel, нажатие на ссылку либо предложит вам добавить номер в ваши контакты (iPad и Kindles), либо предложит вам набрать номер телефона (Android и iPhone). 
 
 Вот синтаксис: 






 Позвони мне!  

 
 



 
  Позвони мне!  
 
 


 
 Сделать телефонные номера вашего веб-сайта интерактивными, очевидно, очень удобно для клиентов, посещающих ваш сайт через свои телефоны для передачи данных.Это экономит время и избавляет от необходимости копировать, вставлять или вводить число. И это простое исправление, внедрение которого требует очень мало времени и усилий. 
 
  Предупреждение для настольных компьютеров — фильтруйте код для мобильных устройств  
 
 Когда вы или ваши разработчики копаются на страницах своего веб-сайта, чтобы заключить номер телефона в ссылки, обязательно проверьте мобильное устройство, прежде чем отображать связанный номер телефона. Схема tel хорошо поддерживается в мобильных браузерах, но не в браузерах для настольных компьютеров.Щелчок по телефонной ссылке в Firefox на настольном компьютере вернет посетителю вашего сайта некрасивую ошибку «проблема с загрузкой страницы»; IE вернет ошибку «веб-страница не может быть отображена». Chrome игнорирует ссылку, но игнорируемые ссылки выглядят неработающими. 
 
 Если ваш веб-сайт построен на WordPress, функцию wp_is_mobile () можно использовать в темах вашего веб-сайта для экрана планшета или телефона. И WordPress, и Joomla предлагают плагины для обнаружения мобильных устройств: WP Mobile Detector и одноименный Mobile Detector для Joomla.Если ваш сайт построен на другой платформе, ваши разработчики смогут помочь вам условно отобразить связанный номер телефона. 
 
 Попробуйте! Ваши мобильные посетители будут вам благодарны! 
 
 
 
 
 
 






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

 
 В эпоху смартфонов это очень полезно и экономит время, когда на веб-сайте можно щелкнуть номер телефона и адрес электронной почты. В первую очередь для владельцев бизнеса, во-вторых, для пользователей смартфонов.Когда вам нужно отправить быстрое электронное письмо или позвонить на ходу, вы просто нажимаете на ссылку, и вы перенаправляетесь в приложение электронной почты или выполняется звонок. Возможность связаться с кем-либо одним щелчком мыши является обязательной в наши дни. 
 
 В этой статье я покажу, как сделать ссылки для телефона и электронной почты на вашем веб-сайте интерактивными. 
 
 Есть 3 способа сделать телефонный номер интерактивным: 
 
 
 в чистом HTML 
 
 в классическом редакторе WordPress Gutenberg 
 
 в Elementor Page Builder 
 
 
 Как создать интерактивный номер телефона с помощью HTML 
 
 Если ваш сайт построен на чистом HTML, ссылка для звонка будет выглядеть так: 
 
   123-456-7890   
 Вы можете заменить номер телефона текстовой меткой, например «Нажмите, чтобы позвонить» или «Позвоните сейчас»:
   НАЖМИТЕ ДЛЯ ЗВОНКА   
 Для международных компаний поместите код страны со знаком + перед номером телефона:
   НАЖМИТЕ ДЛЯ ЗВОНКА   
 Ссылки для вызова в редакторе WordPress Gutenberg 
 Вам удобнее использовать визуальную вкладку / редактор WYSIWYG / TinyMCE? Вот как добавить телефонные ссылки в редакторе Гутенберга:
 Отредактируйте свою страницу или сообщение в WordPress.
 Выделите номер телефона или текст, на который нужно нажимать для звонков.
 Щелкните кнопку «Гиперссылка».
 Введите тел:, а затем свой номер телефона без тире.
 Примените ссылку.
 Обновите / опубликуйте свою страницу или сообщение.
 Вот и все. Готово.
 Как создать интерактивный номер телефона в виджетах Elementor 
 Использовать интеллектуальные ссылки 
 С помощью функции динамического URL-адреса контакта Elementor Pro вы можете быстро создавать «умные» ссылки, такие как интерактивные ссылки для телефона или почты из любого виджета, имеющего поле «Ссылка», например виджета «Кнопка».С помощью этой функции также можно создавать многие другие умные ссылки, включая ссылки на SMS-сообщения, ссылки на беседы WhatsApp, ссылки для звонков в Skype, ссылки для звонков в Viber, ссылки для навигации Waze, ссылки на Facebook Messenger и ссылки на события календаря.
 Вам просто нужно выполнить эти простые шаги:
 Перетащите виджет «Кнопка» на свою страницу,
 Щелкните значок динамических тегов в самом правом углу поля «Ссылка»,
 Выберите параметр URL-адрес контакта из раскрывающегося списка,
 Щелкните значок гаечного ключа рядом на метку URL-адрес контакта, чтобы открыть панель настроек,
 Выберите нужный тип ссылки, например tel,
 Введите номер телефона.Заполните остальные параметры кнопки. Выполнено.
 
 Создание ссылок для телефона и почты в Elementor вручную 
 Чтобы вручную создать интерактивные ссылки phone и mailto вместо смарт-ссылок, следуйте инструкциям ниже:
 Интерактивные телефонные ссылки 
 Для создания интерактивной телефонной ссылки, открывающей диалоговое окно на смартфонах и мобильных устройствах:
 Введите  tel: , а затем полный номер телефона без тире, например:
  тел .: 9855551212  
 Ссылки Mailto 
 Просто введите соответствующий код  mailto:  в поле  Link  любого виджета, на который можно установить ссылку.
  Для создания базовой ссылки Mailto с заполненным полем TO:: 
 Введите  mailto: , а затем адрес электронной почты, на который нужно отправить электронное письмо, как показано в примере ниже:
  mailto: [email protected]  
  Для создания ссылки Mailto с заполненными полями TO: и SUBJECT: 
 Добавьте  тему = , а затем текст темы электронного письма
  mailto: jane @ где-нибудь.com? subject = Спасибо, что связались  
 или
  mailto: [email protected]? Subject = Спасибо% 20You% 20For% 20Getting% 20In% 20Touch  
 Последние мысли 
 В наши дни мир мобильных устройств настолько разросся, что ссылки для звонков по клику превратились из простого удобства в абсолютную необходимость. Большинство предприятий перешли на смартфоны. И очень важно, смогут ли клиенты связаться с вами одним касанием на экране мобильного телефона или нет. К счастью, сделать телефонные номера интерактивными — это детская игра! Убедитесь, что вы доступны для клиентов в любое время через свой веб-сайт, и пусть ваш бизнес растет.
 Как сделать номер телефона интерактивным в WordPress 
 Вы пытаетесь добавить в WordPress интерактивный номер телефона? Более половины большинства посетителей веб-сайтов сейчас используют мобильные устройства для доступа к контенту. Это означает, что более половины людей могут просто щелкнуть, чтобы позвонить, вместо того, чтобы набирать ваш номер телефона. В этом руководстве мы покажем вам, как сделать номер телефона интерактивным в WordPress. Хорошая новость заключается в том, что это довольно просто — вам не нужно уметь программировать, и вы можете значительно улучшить пользовательский интерфейс для посетителей мобильных устройств.
 Есть два способа добавить интерактивный номер телефона в WordPress: 
 1. Добавление ссылки в модуль ссылок 
 2. Редактирование HTML
 Добавление интерактивного номера телефона в поле ссылки WordPress 
 Если вы хотите добавить интерактивный номер телефона в сообщение или страницу блога в WordPress, вы просто выделяете текст, который хотите превратить в ссылку, а затем добавляете «tel +», телефонный код страны и номер телефона. Вот пример номера телефона в США (код страны = 1)
.
 Добавление интерактивного номера телефона HTML 
 Если вы не являетесь веб-разработчиком, идея редактирования HTML может показаться немного подавляющей.Но не волнуйтесь. Добавить ссылку такого типа в WordPress очень просто! Давайте начнем с того, что посмотрим, как выглядит код «нормальной» ссылки:
   Текст привязки   
 В примере выше:
 URL-адрес находится между метками »
 Отображается« Текст привязки »
 Ссылка будет отображаться следующим образом: Текст привязки
 Чтобы ссылка указывала на номер телефона и была интерактивной, нам необходимо:
 Используйте номер телефона вместо ссылки
 перед номером телефона ставьте «tel: +»
 HTML-код для добавления интерактивного номера телефона выглядит следующим образом:
   Нажмите, чтобы позвонить   
 Важно отметить, что перед номером телефона 555-444-3333 нам нужно добавить телефонный код страны.Для США это 1.
.
 Чтобы добавить номер телефона в WordPress, вам нужно начать с переключения в представление HTM:
 Затем вам нужно обернуть свой якорный текст тегами  и вставить + tel: и код страны:
.
 Вот и все! Когда вы переключаетесь в режим редактирования визуально, ваш номер телефона будет отображаться в виде ссылки:
 Это пример абзаца. В нем мы добавим ссылку для вызова здесь: Позвоните нам!
 Добавление интерактивного номера телефона в меню 
 Если вы хотите использовать интерактивный номер телефона в меню WordPress, это тоже очень просто.Просто выберите «Внешний вид»> «Меню» в левой навигационной панели. Затем добавьте настраиваемую ссылку и просто введите номер телефона + телефон в поле ссылки
.
 Альтернативные телефонные ссылки 
 Помимо использования «tel», есть еще несколько других обработчиков телефонных протоколов, которые также можно использовать:
  Протокол 
  Пример 
  Что он делает 
 тел.
Добавить комментарий Отменить ответ
Ваш адрес email не будет опубликован. Обязательные поля помечены *
Комментарий *
Имя * 
Email * 
Сайт