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

12.01.202313.01.2023 admin 0 Comments

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Выводы

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

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

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

Источник

Кликабельные номер телефона и электронная почта

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

Есть 2 варианта настройки кликабельного телефона: с использованием виджета кнопки или виджета текста. Разберем оба способа ниже.

1.1 Используем виджет «Кнопка»

Шаг 2. Перейдём в настройки виджета кнопки (гаечный ключ), в раздел «Содержимое» и укажем наш номер телефона, который будут видеть посетители (можно указать в любом формате).

Далее переходим в раздел «Вид» во вкладку «Текст» и настроим нужный нам размер текста.

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

Шаг 3. Перейдем в раздел «Цвета» во вкладку «Подробные настройки» и зададим нужный цвет тексту:

1. В обычном состоянии
2. При наведении курсора
3. При нажатии на кнопку

Проделаем вышеописанные действия (шага 3) на записи:

Шаг 4. Переходим в раздел «Действие», выбираем действие «Открыть страницу» и пропишем код телефона в поле «Ссылка».
Пример кода:

После tel:+ необходимо указать ваш номер телефона без пробелов и дефисов, строго в том формате, который указан на примере выше.

Шаг 5. Публикуем страницу и всё готово! Чтобы протестировать кликабельность телефона, зайдите в предпросмотр или на опубликованную версию страницы.

1.2 Используем виджет «Текст»

Шаг 1. Добавим виджет «Текст» на секцию

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

Шаг 2. Выделим наш текст в режиме редактирования и установим на него ссылку в поле «URL» в виде:

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

Проделаем вышеописанные действия (шага 2) на записи:

Шаг 3. Публикуем страницу и всё готово! Чтобы протестировать кликабельность телефона, зайдите в предпросмотр или на опубликованную версию страницы.

❗После добавления ссылки в виджет «Текст», изменится цвет и появится нижнее подчеркивание. Отключить подчеркивание и изменить цвет ссылки можно по инструкции, в разделах ниже. А именно:

2. Кликабельный адрес электронной почты

Есть 2 варианта настройки кликабельного электронного адреса: с использованием виджета кнопки или виджета текста. Разберем оба способа ниже.

2.1 Используем виджет «Кнопка»

Шаг 2. Перейдём в настройки виджета кнопки (гаечный ключ), в раздел «Содержимое» и укажем наш электронный адрес, который будут видеть посетители (можно указать в любом формате).

Далее переходим в раздел «Вид» во вкладку «Текст» и настроим нужный нам размер текста.

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

Шаг 3. Перейдем в раздел «Цвета» во вкладку «Подробные настройки» и зададим нужный цвет тексту:

1. В обычном состоянии
2. При наведении курсора
3. При нажатии на кнопку

Проделаем вышеописанные действия (шага 3) на записи:

Шаг 4. Переходим в раздел «Действие», выбираем действие «Открыть страницу» и пропишем код в поле «Ссылка».
Пример кода:

После mailto: необходимо указать ваш электронный адрес.

Шаг 5. Публикуем страницу и всё готово! Чтобы протестировать кликабельность электронного адреса, зайдите в предпросмотр или на опубликованную версию страницы.

2.2 Используем виджет «Текст»

Шаг 1. Добавим виджет «Текст» в секцию

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

Шаг 2. Выделим наш текст в режиме редактирования и установим на него ссылку в виде: mailto:info@platformalp.ru в поле «URL».
После mailto: необходимо указать ваш электронный адрес. И нажмем «Вставить» ссылку на выделенный текст.

Проделаем вышеописанные действия (шага 2) на записи:

✅ В ссылке на почту есть возможность сразу вставить тему письма, добавив в конце ?subject=темаПример:

Шаг 3. Публикуем страницу и всё готово! Чтобы протестировать кликабельность электронной почты, зайдите в предпросмотр или на опубликованную версию страницы.

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

Переходим в «Просмотр HTML-кода» виджета «Текст» (нажав на иконку в панели редактирования текста)

Разберем на примере, как должно получиться:

Проделаем вышеописанные действия на записи:

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

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

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

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

Переходим в «Просмотр HTML-кода» виджета «Текст» (нажав на иконку в панели редактирования текста)

Вместо #ffffff указываем нужный нам цвет ссылки.

Разберем на примере, как должно получиться:

Проделаем вышеописанные действия на записи:

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

Источник

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

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

Рассмотрим несколько вариантов, смотря на чем у вас сайт.

HTML-код

Обычный номер телефона, который пока является простым текстом, в коде может выглядеть так:

+7(999)888-77-66

Или так (если присвоен класс):

Или так (если к этому тексту применены стили: цвет, шрифт, форматирование):

За гипертекст (возможность текста в коде HTML включать в себя гиперссылку) отвечает тег . . Атрибут href=”” отвечает за то, куда будет направлен клиент — внутри кавычек указывается адрес страницы или действие.

За автоматический набор номера по клику отвечает параметр tel:ХХХ, где XXX — номер телефона без пробелов и тире.

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

К тексту добавили действие – вызов на конкретный номер.

Сделаем и второй номер кликабельным:

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

По этому же принципу вы можете сделать кликабельный email.

Чтобы email стал кликабельным, поставьте атрибут .

Сайт на WordPress

Для Вордпресса есть специальный плагин CallPhone’r. Этот модуль выводит на каждой странице сайта иконку, при нажатии на которую мобильное устройство переходит в режим вызова.

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

Сайт на LPmotor

Этот конструктор дает несколько вариантов.

1) Телефон в виде текста.

В этом случае выделите текст телефона в блоке и нажмите кнопку добавления ссылки в панели редактирования:

2) Переход к набору номера с кнопки. В панели редактирования блока «Кнопка» необходимо выставить «Переход по ссылке» и указать ваш номер телефона в формате «tel:88005555555».

3) Переход к набору номера с иконки/картинки. Здесь в выпадающем меню «Действие» нужно выбрать «Переход по ссылке» и вставить номер в формате «tel:+74957873422».

4) Также можно вставить кликабельный телефон на сайт в виде html блока.

Тогда в поле «Редактирование HTML-кода» нужно вставить

Сайт на Wix

1) Чтобы создать кликабельный номер телефона:

— Нажмите «Редактировать текст».

— Введите номер телефона. Не вводите другой текст в том же окне.

2) Чтобы связать текст ссылкой с номером телефона:

— Нажмите «Редактировать текст».

— Введите текст, например, «Позвонить сейчас».

— Нажмите на иконку «Ссылка».

— Выберите Номер телефона.

— Введите номер телефона в поле «Номер телефона».

3) Чтобы связать кнопку ссылкой с номером телефона:

— Нажмите на иконку Ссылка.

— Выберите Номер телефона.

— Введите номер телефона в поле «Номер телефона».

Сайт на Tilda

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

1) Ссылка, которую нужно задать тексту с номером телефона: tel:+71234567890 (все без пробела). Будет работать при просмотре сайта на телефоне.

Например, выбираете блок меню ME301, во вкладке Контент в поле Дополнительно указываете номер телефона, затем выделяете его и с помощью выпадающей панели инструментов для текста добавляете ссылку вида tel:+7123456789.

Источник