Posted:
Янв 1, 2023
Comments:
0 Comments

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

Содержание

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

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

 

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

HTML-код

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

 

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

 

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

 

<pnumber» name=»phone_number»>+7(999)888-77-66</p>

 

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

 

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

 

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

 

<span>

<a href=”tel:+79998887766”>+7(999)888-77-66</a>

</span>

 

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

 

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

 

<pnumber» name=»phone_number»>

<a href=”tel:+79998887766”>+7(999)888-77-66</a>

</p>

 

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

 

Чтобы email стал кликабельным, поставьте атрибут <a href=”mailto:XXX”>.

Сайт на WordPress

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

 

 

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

Сайт на mottor (LPmotor)

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

 

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

 

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

 

 

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

 

 

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

 

 

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

 

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

 

<a href=»tel:+74957873422″>Позвонить 8 (495) 787 34 22</a>.

 

Сайт на Wix

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

 

— Добавьте текст. Вот инструкция из базы знаний Wix о том, как это сделать;

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

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

 

 

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

 

— Добавьте текст;

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

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

— Выделите текст;

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

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

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

— Нажмите «Готово».

 

 

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

 

— Добавьте кнопку

— Измените текст кнопки

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

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

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

— Нажмите «Готово».

 

Сайт на Tilda

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

 

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

 

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

 

2) Ссылка, которую нужно задать тексту с адресом почты: [email protected]. При добавлении ссылки в Контент блока в поле «Ссылка», нужно указывать ссылку как mailto:[email protected].

Как отслеживать клики по номеру телефона

Это можно делать без вмешательства в код и установки Менеджера тегов Google. В Яндекс.Метрике не так давно появился новый тип цели – «Клик по номеру телефона». Достаточно указать нужные параметры, и данные о звонках будут поступать в Метрику:

 

 

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

 

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

 

  • Скопируйте её и вставьте в параметрах цели.

 

 

Данные по кликам на номер телефона появятся в отчете «Конверсии» уже через несколько минут после создания цели.

Хотите тоже написать статью для читателей Yagla? Если вам есть что рассказать про маркетинг, аналитику, бизнес, управление, карьеру для новичков, маркетологов и предпринимателей. Тогда заведите себе блог на Yagla прямо сейчас и пишите статьи. Это бесплатно и просто

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

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

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

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

Читайте также:

Упавшие сервера: самые необыкновенные истории

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

Код сайта

В первую очередь рассмотрим вариант, когда у вас есть доступ к HTML-коду сайта.

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

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

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

<pnumber" name="phone_number">+7(999)888-77-66</div>

За гипертекст (возможность текста в коде HTML включать в себя гиперссылку) отвечает тег <a>…</a>. Атрибут href=”” отвечает за то, куда будет направлен клиент — внутри кавычек указывается адрес страницы или действие. За автоматический набор номера по клику отвечает параметр tel:ХХХ, где XXX — номер телефона без пробелов и тире.

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

<span><a href=”tel:+79998887766”>+7(999)888-77-66</a></span>

Мы не только оставили сам текст на сайте, но и добавили к нему действие: вызов на конкретный номер.

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

<pnumber" name="phone_number"><a href=”tel:+79998887766”>+7(999)888-77-66</a></div>

Сохраняем код — вуаля, телефон стал кликабельным! 

CMS/конструктор сайтов

Если вы пользуетесь CMS/конструктором сайтов, вероятнее всего в функционале конструктора есть специальные инструменты, чтобы сделать номер телефона активным — подробнее об этом нужно узнавать в FAQ каждой платформы (например, LP, Wix, Tilda). Но есть небольшой лайфхак на случай, если этот функционал вы так и не найдете. 

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

tel:+7XXXXXXXXXX

где «+7XXXXXXXXXX» — номер телефона, на который должен происходить дозвон.

У меня коллтрекинг. Как быть?

Разберем на примере коллтрекинга Callibri (хотя вообще эти правила примерно так же работают для любого сервиса подмены номера). 

За подмену номера отвечает атрибут class=”callibri_phone”. Если у вас есть активный настроенный проект, на сайте установлен скрипт и каждому номеру телефона в коде присвоен атрибут class=”callibri_phone”, подмена происходит автоматически. Скрипт Callibri сам находит нужные элементы с номерами телефонов и подменяет их.

Коллтрекинг

считает звонки с онлайн и офлайн рекламы,

показывает, с каких объявлений приходят клиенты,

помогает оптимизировать рекламу.

Попробовать

В случае, если номер телефона на сайте не кликабельный, то и подменяться будет обычный номер в виде текста. Но если на ваш номер уже можно позвонить в один клик, скрипт Callibri c помощью class=”callibri_phone” подменит и номер, указанный в атрибуте «href=»tel:XXX», на который происходит вызов. Если клиент нажмет на подменный номер, звонок также пройдет на подменный номер — вы не потеряете лид и сможете узнать откуда к вам пришёл клиент.

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

<pphone callibri_phone”>+7(999)888-77-66</p></a>

В этом случае, кроме потери оформления, подмена произойдёт только для элемента <p>…</p>. Таким образом, видимый телефон в коде сайта подменится. А при клике элемент будет ссылаться на основной номер телефона, без подмены. То есть вы не узнаете, откуда пришел клиент: вместо подменного номера он позвонит по вашему основному телефону. 

Финал

Поздравляем, теперь вы достойны посвящения в мастера HTML. 

Обновление номера до кликабельного — большой плюс для мобильной версии сайта. С ним вы намного ближе к своему клиенту — буквально в паре кликов.

А можно все это не настраивать и просто установить на сайт обратный звонок Callibri. Так вам смогут позвонить даже пользователи, которые зашли на сайт с компьютера.

Бонус

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

Чтобы email стал кликабельным, вам нужно поставить атрибут <a href=”mailto:XXX”>. А если вы пользуетесь email-трекингом, не забудьте правильно расположить атрибуты, чтобы подменялся не только текст на сайте, но и адрес отправки письма: 

<a class=”callibri_email” href=”mailto:[email protected]”>[email protected]</a>

У Callibri есть телеграм-канал — присоединяйтесь, чтобы не пропустить свежие кейсы, материалы блога и обновления сервисов.

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

Время чтения 8 минут

Монитор кампании — 29 марта 2019 г.

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

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

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

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

В создании ссылок для удобного звонка нет ничего нового. До того, как эти ссылки использовались кем-либо из вышеперечисленных, URL-адреса Skype были обычным явлением в Интернете. Skype — это программа, которую можно установить на машины Windows и Mac, а также на телефоны iOS и Android. По состоянию на 2017 год у Skype было в среднем 300 миллионов активных пользователей в месяц.

Эти методы можно адаптировать для использования в электронной почте в формате HTML. Полученные ссылки можно настроить, а это означает, что вы можете превратить номер телефона или имя пользователя Skype в смелый призыв к действию. Чтобы продемонстрировать, посмотрите пример шаблона (щелкните, чтобы просмотреть):

Кнопка «Позвонить:» отключена в большинстве браузеров, и об этом будет рассказано далее в этой статье.

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

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

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

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

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

Как создать ссылку «Нажми и позвони» с помощью HTML-кода?

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

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

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

Для этого откройте HTML-редактор и выполните следующие действия по порядку:

  1. Начните свой код с
  2. Запишите, где находятся кавычки, потому что теперь вы будете вводить свой рабочий номер телефона между кавычками. Обязательно введите его без дефисов и введите «тел:», прежде чем начать вводить свой номер. Например:
  3. Далее вы добавите любой текст, который хотите связать. Этот текст будет находиться между ><. Текст, который будет введен здесь, будет вашим призывом к действию (CTA), за которым снова следует ваш номер телефона. ПРИМЕР: >Позвоните нам по номеру +ВАШ НОМЕР ЗДЕСЬ<

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

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

При тестировании рассылок по электронной почте на iPhone и в Gmail мы обнаружили, что оба почтовых клиента автоматически заключают телефонные номера в теги , как в следующем примере:

 555-666-7777

Эти теги могут сильно раздражать дизайнеров электронной почты, так как эти «новые» ссылки tel:, как правило, выделяются жирным шрифтом, ярко-синим цветом и часто трудно стилизуются с помощью CSS.

Избавьтесь от головной боли: привязка к телефонным номерам и именам пользователей Skype

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

.

 Чтобы заказать пиццу, позвоните нам сейчас.

То же самое можно сделать со ссылками на Skype:

 Свяжитесь с нами по телефону 555-666-7777.
Не забудьте добавить abcpizza в свои контакты!

Недостатком этого метода является то, что для того, чтобы ссылки можно было обнаружить в почтовых клиентах, мы не можем преобразовать их в ссылки для отслеживания для использования в отчетах о кампаниях Campaign Monitor. Чтобы отключить отслеживание именно для этих ссылок, мы используем атрибут cm_dontconvertlink :

.

 Чтобы заказать пиццу, позвоните нам сейчас.

Однако не все почтовые клиенты умеют работать с тел: ссылками. Skype должен быть на компьютере получателя, чтобы Skype: ссылки работали. Имея это в виду, вот как выглядит поддержка в основных почтовых клиентах:

.

Настольные почтовые клиенты Тел: Поддержка Скайп: Поддержка
Перспективы 2007/2010 № Да
Перспектива 2003 № Да
Apple Mail № Да
Почта Windows Live № Да
Тандерберд № Да
Клиенты веб-почты Тел: Поддержка Скайп: Поддержка
Горячая почта № №
Yahoo! Почта № Да
Gmail Да №
АОЛ № №
Мобильные почтовые клиенты Тел: Поддержка Скайп: Поддержка
Айфон Да Да
Android (Gmail) Да №
Android (по умолчанию) Да №
BlackBerry 6 ОС Да №
Windows Mobile 7 Да №

Несмотря на то, что поддержка по телефону: отлично работает в мобильных клиентах, она может быть ненадежной на настольных компьютерах и в клиентах веб-почты. И наоборот, поддержка Skype: чрезвычайно эффективна в клиентах для настольных ПК, но неэффективна в клиентах для мобильных устройств и веб-почты (если у вас не установлена ​​веб-панель инструментов Skype).

Отключение тел: ссылок в настольных и веб-почтовых клиентах

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

.

 a.disable-ссылка {
события-указатели: нет;
курсор: по умолчанию;
}
...

   <таблица>
      
           Звоните: +1800-ABC-ПИЦЦА

Ссылка tel: выше неактивна в Outlook, Apple Mail, Thunderbird и большинстве комбинаций браузер/веб-почта. Однако Google Voice по-прежнему улавливает тел: ссылки, даже при использовании описанных выше обходных путей.

В мобильных почтовых клиентах мы активируем ссылку с помощью запроса:

 @media только экран и (max-device-width: 480px) {
   [класс = «отключить ссылку»] {
      события-указатели: auto !important;
      курсор: авто !важно;
   }
}

Красиво сделано, если я сам так говорю.

Шаблон, который вы можете загрузить и настроить

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

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

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

Подведение итогов

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

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

HTML-кодирование может помочь вам добавить в свои почтовые кампании следующее:

Хотите вывести свои кампании по электронной почте на новый уровень? С конструктором электронной почты Campaign Monitor и редактором HTML добавление интерактивных телефонных номеров и других CTA становится проще простого!

4 шага для добавления кликабельной телефонной ссылки в HTML

Загрузка