Orelspa.ru

Деньги в онлайне
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

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

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

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

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

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

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

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

HTML-код сайта

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

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

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

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

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

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

В WordPress

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

Шапка сайта

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

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

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

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

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

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

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

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

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

В Tilda

Zero-блок

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ссылка на Telegram

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

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

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

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

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

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

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

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

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

Часто задаваемые вопросы

Мой сайт отключен. Что делать?

Как использовать свои шаблоны в системе?

Как изменить URL, Title, Description и Keywords страницы сайта?

Предоставляется ли доступ по FTP?

Можно ли временно закрыть сайт, сделать его недоступным?

Вопросы по редактированию сайта

Закон о персональных данных (152-ФЗ)

Поиск по сайту не находит новую страницу. Почему?

Сайт — редактирование информации

Включение и отключение редактирования

Добавление категории или товара

Как разместить фотографии на сайте

Работа со слайдером

Работа с таблицами

Добавление видео на сайт

Добавление аудиозаписи на сайт

Как сделать баннер?

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

Лендинг: управление меню

Работа с CRM и обратная связь

Работа с файловым менеджером

Редактируемая форма при создании заказа

Создание заказов в карточке клиента

Доставка через СДЭК

Интеграция с 1С:УТ

Интеграция с 1С:УНФ

Изменение количества товаров

Фильтрация по опциональным свойствам

Интеграция с интернет-сервисом «МойСклад»

Контент — содержимое сайта

Структура и меню

Копирование страниц в структуре сайта

Управление формами обратной связи

Запись на прием

Дизайн — внешний вид сайта

Пример работы с CSS

Изменение внешнего вида сайта

Домены — имя сайта

Как добавить поддомен

Распространенные ошибки DNS

Почта на вашем домене

Создание почты для домена в Яндекс.Коннект

Реклама и SEO — поисковая оптимизация

Контекстная реклама и продвижение

Подтверждение владения сайтом

Карта сайта (sitemap.xml)

Перенаправления страниц (редиректы)

Отображение сайта в поисковой выдаче

Как сохранить посещаемость сайта при переезде на другой домен

Вывод сайта из системы

Настройки — управление сайтом

Подключение reCaptcha от Google

Удаление временных файлов

Установка CallbackHunter на сайт

Настройки партнерской программы

Партнерская реферальная ссылка

Настройки сайта партнера на другом хостинге для создания сайтов на домене партнера

Работа с партнерской программой через API

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

Удобнее всего искать код нужных элементов с помощью встроенного редактора в браузерах Google Chrome, Mozilla Firefox и Internet Explorer, для его вызова нажмите F12 и щелкните на иконке анализа элементов страницы в левом верхнем углу (отмечено красными стрелками). В данном примере мы используем devTools от Google Chrome:

Если необходимо найти элемент в мобильной версии сайта, нужно нажать иконку эмулятора (отмечено красными стрелками):

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

Необходимо навести курсор на выделенный фрагмент кода, нажать правую кнопку мыши, в открывшемся контекстном меню необходимо выбрать “Copy” -> “Copy selector” (отмечено красными стрелками). В этот момент определенный код скопируется в буфер обмена.

Затем, из буфера обмена необходимо вставить полученный код вместо слова “РЕЗУЛЬТАТ” в следующий код:

Читать еще:  Сколько платят за сайт в месяц

После всех произведенных действий необходимо вставить полученный код в раздел “Реклама/SEO” -> “Код счетчика.
Также, потребуется добавить код ниже в раздел “Реклама/SEO” -> «Подтверждение владения сайтом»:

Если требуется сделать несколько номеров кликабельными, необходимо скопировать код со слов “/*Начало блока кода*/” до “/*Конец блока кода*/”, внеся дополнительно изменения: нужно добавить к слову “check” (оно встречается в двух местах) цифру 1. Для следующего блока — 2, и так далее, а также подставить вместо слова “РЕЗУЛЬТАТ” значение для другого номера.

Повышаем юзабилити: звонок в компанию по клику с сайта

В статье:

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

Как обычно оформляют телефон

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

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

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

Если посмотреть карту сайта, то на области телефона скорее всего будут клики. На сайте PR-CY не предусмотрен телефон, поэтому приведем пример из выдачи Яндекса:

Есть клики в области телефона

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

Посмотреть, как часто на вашем сайте кликают на телефон, можно на специальной карте.

Как посмотреть карту кликов сайта

Яндекс.Метрика

Самый простой способ — войти в Яндекс.Метрику в раздел Карта кликов, там вы увидите страницу сайта с отметками кликов пользователей.

Есть несколько режимов просмотра:

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

Тепловая карта кликов в Яндекс.Метрике

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

Crazy Egg

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

Инструмент Confetti

Сервис платный с бесплатным периодом в 30 дней.

Mouseflow

Сервис показывает скроллинг и клики, выводит статистику по страницам. Карта похожа на тепловую карту из Яндекс.Метрики.

Карта кликов в Mouseflow

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

Hotjar

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

Карта кликов в сервисе

Сервис обрабатывает до 2000 просмотров сайта пользователями и сохраняет их три месяца. Можно пользоваться бесплатно 15 дней.

Inspectlet

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

Карта движения мыши

В бесплатной версии можно отслеживать до 1000 просмотров в месяц, они месяц будут храниться в сервисе.

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

Читать еще:  Хостинг сайтов что это

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

Что сделать с номером телефона

Для мобильной версии

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

Вместо «Call me» используйте любую другую фразу.

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

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

По клику на номер на смартфоне открываются вызовы

Для десктопа

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

Пример окна по клику на номер телефона

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

Форма «Заказать звонок» может находиться на сайте и в формате виджета. Обычно он находится на экране справа внизу.

Виджет «Заказать звонок» на странице

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

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

Как поставить форму «Заказать звонок»

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

1. Использовать сторонний сервис

Существует много callback-сервисов, самые популярные — Callback Killer, Callback Hunter, Zadarma, UpToCall или RedConnect. Они работают по такой схеме: номер отправляется на сервер, звонок поступает менеджеру, которому сообщается информация о звонке, одновременно с этим программа набирает номер клиента и переводит его на менеджера.

В сервисах можно настроить внешний вид кнопок и полей ввода под свой сайт.

Окно настройки всплывающей формы

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

2. Установить плагины от CMS

В каталогах плагинов для CMS можно найти нужные решения для заказа звонков.

Если ваш сайт на WordPress, в магазине плагинов есть LiveCall, CallPage, Callmaker и другие для установки виджета и формы «Заказать звонок». Плагин Excitel позволяет клиенту звонить в компанию напрямую из браузера.

Для сайта на 1С-Битрикс можно найти нужные плагины в маркетплейсе. Для обратных звонков подойдут Call Me, Заказ обратного звонка, Telephone и другие

Для Joomla! также можно найти готовый плагин, к примеру, Ajax Contact, Simplecallback.

В магазине модулей для Opencart есть модули обратного звонка: Callback Full, Менеджер звонков и другие.

3. Написать плагин самостоятельно

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

Свернутый значок

Выбор звонка или сообщения

Для установки нужно скачать исходник и распаковать его в корень сайта, после этого подключить и инициализировать скрипт. Лучше сделать это перед закрывающим тегом body:

После этого форма с виджетом должна работать.

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

Напишите в комментарии, если вам был бы интересен обзорный материал о разных callback-сервисах.

Ссылка на основную публикацию
Adblock
detector