Как сделать телефон кликабельным вконтакте
Как сделать кликабельный номер телефона на сайте
Я не буду лить воду про выгоды кликабельного номера на сайте. Надеюсь, вы в курсе. Суть: посетитель жмакает на номер, автоматом идет звонок. Естественно, это относится к мобильным устройствам.
Рассмотрим несколько вариантов, смотря на чем у вас сайт.
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.
Как сделать кликабельный номер телефона на сайте
Я не буду лить воду про выгоды кликабельного номера на сайте. Надеюсь, вы в курсе. Суть: посетитель жмакает на номер, автоматом идет звонок. Естественно, это относится к мобильным устройствам.
Рассмотрим несколько вариантов, смотря на чем у вас сайт.
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.
2) Ссылка, которую нужно задать тексту с адресом почты: yourmail@mysite.com. При добавлении ссылки в Контент блока в поле «Ссылка», нужно указывать ссылку как mailto:yourmail@mysite.com
При подготовке материала использованы инструкции Callibri, Tilda, Wix, LPmotor
Кликабельные номер телефона и электронная почта
Содержание:
1. Кликабельный номер телефона
Есть два варианта настройки кликабельного телефона: с использованием виджета кнопки или виджета текста. Разберем оба способа ниже.
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-кода» виджета «Текст» (нажав на иконку в панели редактирования текста)
Разберем на примере, как должно получиться:
Зачем и как делать номер телефона на сайте кликабельным
Абсолютно каждый элемент на продающем сайте имеет значение. Простой пример: номер телефона компании на главной странице прописан без ссылки. Потенциальный клиент кликает по цифрам, но ничего не происходит. В итоге человек выделяет номер, копирует его, выходит из браузера, заходит в меню с контактами, вставляет цифры и лишь потом совершает звонок. Но будет ли так делать каждый клиент? Вероятнее всего, нет. Из-за этого владелец сайта рискует потерять часть готовых к покупке пользователей. Чтобы не допустить такого, рекомендуем делать номер телефона на сайте кликабельным. Для этого следует учесть несколько важных моментов.
Звонок в один клик: проверяем ваш сайт
Кликабельный номер на сайте — это набор цифр, при нажатии по которому сразу выполняется вызов. Такая опция нужна специально для пользователей мобайла. Сделать звонок можно и с десктопа, если на ПК имеется ПО для разговоров.
На сайтах многих компаний нет кликабельного номера. Владельцы таких проектов не осознают, какое количество покупок они из-за этого упускают. Конечно, все большую популярность сегодня набирает мессенджер-маркетинг, однако отказывать клиенту в возможности позвонить вам точно не стоит.
Использовать активный номер на сайте важно по нескольким причинам:
Проверить кликабельность номера на сайте можно в одно касание. Просто тапните по нему со своего смартфона или планшета. Если ничего не произошло, то ситуацию следует исправлять.
Как сделать номер телефона кликабельным
Существует несколько простых способов, как сделать номер телефона кликабельным, не потеряв при этом оформление и стили:
Способ 1. Код сайта
Такой вариант подойдет вам, если у вас есть доступ к HTML-коду сайта. Номер на сайте, прописанный обычным текстом, в коде выглядит вот так:
Либо вот так, если у него есть класс:
Если же в тексте используются стили, например, шрифты, цвета или форматирование, то эта часть кода выглядит следующим образом:
Получается, для примера № 1 код получится таким:
Для второго примера код выглядит так:
Наконец, третий пример также без лишних усилий можно преобразовать в гипертекст. При этом сохранятся первоначальные его стили:
Сохраните код, и телефонный номер станет кликабельным.
Способ 2. Конструктор сайтов или CMS
В функционале любого конструктора или CMS-системы есть несколько особых инструментов, которые позволяют сделать номер кликабельным. Полную информацию вы найдете в разделе FAQ на соответствующей площадке (Tilda, Wix, LP и т.д.). Однако есть один способ, подходящий для любого конструктора.
Механизм «Гиперссылка» при форматировании текста доступен, как правило, везде. Цифры — это текст. Следовательно, вы можете ввести их в редактор. Чтобы номер был кликабельным, обозначьте текст номера, оформите его как гиперссылку, после чего в блоке «Адрес» пропишите следующее:
Гиперссылка включится автоматически.
Способ 3. Коллтрекинг
На вашей площадке может быть установлен коллтрекинг с регулярно обновляемой подменой цифр. Но из этого вовсе не следует, что подменный номер нельзя сделать кликабельным.
Для начала стоит учесть, что за сокрытие номера под другим видом отвечает При наличии у вас хорошо работающего проекта, на сайте есть скрипт, и к каждому номеру в коде привязан указанный атрибут. Подмена при этом выполняется автоматически. Скрипт коллтрекинг-системы самостоятельно выполняет поиск необходимых элементов с телефонными номерами и сам их заменяет.
В ситуации, когда цифры на сайте не кликабельные, подменяться будет и простой номер в форме текста. Если же на ваш номер можно совершить звонок в один клик, то скрипт, используя класс, заменит и номер, прописанный в атрибуте «href=tel:XXX. Когда пользователь нажимает по подменному номеру, совершается звонок.
Используя на практике один из этих способов, вы не потеряете лиды и всегда будете знать, с какого именно места на сайте они к вам пришли.