Номер телефона как ссылка для звонка

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

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

HTML-код

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

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

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

<p class=»phone”>+7(999)888-77-66</p>

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

<div id=»number» class=»phone mobile text num» style=»color: #1f21ff; text-align: center» 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>

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

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

<p class=»phone”>

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

</p>

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

<div id=»number» class=»phone mobile text num» style=»color: #1ff1ff; text-align: center» 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) Ссылка, которую нужно задать тексту с адресом почты: yourmail@mysite.com. При добавлении ссылки в Контент блока в поле «Ссылка», нужно указывать ссылку как mailto:yourmail@mysite.com.

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

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

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

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

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

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

Как сделать ссылку на Viber на сайте

1. Открыть чат с номером

Замените “4957777777”

на номер пользователя Viber. Вместо плюса используется “%2B”:

viber://chat?number=%2B4957777777

1

<a href="viber://chat?number=%2B4957777777">Ссылка на чат Viber</a>

Как работает: Ссылка на чат Viber

2. Добавить контакт (работает только c телефонов):

viber://add?number=4957777777

1

<a href="viber://add?number=4957777777">Добавить контакт в Viber</a>

Как работает: Добавить контакт в Viber

3. Поделиться текстом (до 200 символов), открывается список контактов:

Замените текст “Привет!” на свой. Можно отправить текст сразу нескольким абонентам из адресной книги.

viber://forward?text=Привет!

1

<a href="viber://forward?text=Привет!">Поделиться текстом в Viber</a>

Как работает: Поделиться текстом в Viber

4. Открыть вкладку «Чаты»:

viber://chats

1

<a href="viber://chats">Открыть Чаты в Viber</a>

Как работает: Открыть Чаты в Viber

5. В мобильном приложении открыть вкладку вызовов

viber://calls

1

<a href="viber://calls">Открыть Вызовы в Viber</a>

Как работает: Открыть Вызовы в Viber

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

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

mailto:

Ссылка формируется из нескольких частей. Сначала в адресе ставится префикс mailto:, после которого указывается адрес почты. Это самый простой вариант.

<a href="mailto:mail@htmlacademy.ru">Напишите нам</a>

Текст письма указывается с помощью параметра body

<a href="mailto:mail@htmlacademy.ru&body=привет">Напишите нам</a>

За тему письма отвечает параметр subject.

<a href="mailto:mail@htmlacademy.ru&body=привет?subject=вопрос">Напишите нам</a>

Можно даже указать кого-то в копии, для этого используются параметры cc и bcc.

<a href="mailto:blog@htmlacademy.ru&cc=mail@htmlacademy.ru?body=Привет, подпишитесь на рассылку">Напишите нам</a>

Что произойдёт, если кликнуть на ссылку с mailto

Откроется почтовая программа, в которой уже будут заполнены все нужные поля. Например, так ссылку выше обработает программа «Почта» в OS X:

Если почтовая программа по умолчанию не установлена, появится окно выбора программы.

Обратите внимание, что адреса с нестандартными символами, например, кавычками или дополнительными знаками @, нужно записывать особым образом. Подробнее об этом и других сложных случаях читайте в >RFC 6068

Как стилизовать mailto

Для стилизации ссылки на электронную почту можно воспользоваться CSS-селектором a[href^="mailto:"].

a[href^="mailto:"] {
  font-size: 16px;
  line-height: 32px;
  color: #000000;
}

tel:

Ссылка на номер телефона размечается с помощью специального префикса перед номером телефона — tel:.

<a href="tel:+79001111111">+7-900-111-11-11</a>

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

<a href="tel:+78121111111">(812) 123-45-67</a>

<a href="tel:+78121111111">123-45-67</a>

<a href="tel:1234567">123-45-67</a>

Другое обязательное требование RFC 3966 — номер телефона, указанный в href, должен быть явно виден на странице.

Звоните <a href="tel:+79001111111">8-900-111-11-11</a> по любому поводу. 

<a href="tel:+79001111111">Звоните</a> по любому поводу.

Что произойдёт, если кликнуть на ссылку с tel

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

• Android, iOS — откроется звонилка по умолчанию.
• Chrome, Edge, Firefox на Windows — откроется предложение использовать какую-нибудь программу для звонка.
• Safari — если номера нет в списке контактов, то появится подтверждение вызова, после этого откроется FaceTime.

Например, Chrome на OS X предложить открыть FaceTime для звонка, так как эта программа установлена по умолчанию. Вместо неё легко может быть Skype или любая другая звонилка.

Windows на ноутбуке предложит выбрать, с помощью какой программы открывать ссылки tel:

Как стилизовать

С помощью CSS-селектора a[href^="tel:"].

a[href^="tel:"] {
  font-size: 16px;
  line-height: 32px;
  text-decoration: none;
  color: #000000;
}

А так можно добавить иконку телефона из Unicode, которая есть во всех системах:

a[href^="tel:"]:before {
  content: "260e";
  margin-right: 0.5em;
}

Получится такой результат:

Дополнительные материалы по теме

• RFC 6068 — The ’mailto’ URI Scheme
• RFC 3966 — The tel URI for Telephone Numbers
• The Current State of Telephone Links

Ещё о вёрстке

• Как убрать подчёркивание ссылок
• Как сделать список без точек в HTML
• В чём отличие aside и article

Что бы сделать номер телефона ссылкой, по нажатию на которую будет происходить вызов (с мобильного устройства) и переход в приложение «звонилки» с десктопа, достаточно вставить в HTML код, следующую конструкцию:

<a href="tel:+79090010901">+7 (909)001-09-01</a>

Пример как это выглядит ссылка на телефон на сайте:

+7 (909)001-09-01

Теперь разберемся в написаном

Конструкция <a href=»tel:+79090010901″> …<a> говорит браузеру, о том что содержимое которое находится внутри тега «a» (<a  href…>…</a>) представляет из себя ссылку, которая ведет на адрес, в нашем случае адресом ссылки является телефон «tel:+79090010901». Все, что находится внутри тега «a» будет кликабельным и отображаться на странице сайта.  Мы можем написать любое содержимое, при клике на которое состоится переход на функцию вызова.

Пример 

<a href="tel:+79090010901">Нажмите что бы позвонить</a>

Нажмите что бы позвонить

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

необходимо проделать следующее:

Выделяем необходимы необходимый текст, при нажатии на который будет происходить звонок инажимаем на кнопку «вставить/изменить ссылку»

вводим в поле,  конструкцию «tel:88000090807» (без кавычек)

Результатом будет:

Выделяем необходимый нам текст

Таким же образом возможно сделать и другие ссылки:

<a href=»mailto:…»>Наше содержимое</a> – ссылка на e-mail адрес;

<a href=»callto:…»>Наше содержимое</a> – звонок по Skype;

<a href=»sms:…»>Наше содержимое</a> – послать смс сообщение;

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

link::Как сделать ссылку с сайта в телеграм (материал уже готовится)

link::Как сделать ссылку с сайта в whatsapp (материал уже готовится)

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

Кнопка позвонить в Инстаграм

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

Для размещения ссылки-кнопки звонка по телефону сделайте следующее:

Связь в мессенджерах

Вставляйте в шапку профиля, описание канала ссылку WhatsApp, Telegram. Большинство пользователей предпочитают переписку в чате звонку по телефону. Переписка позволяет не спешить, подумать, оценить продукт. Мессенджеры передают фотографии, видео и текстовые файлы. Продавцы отправляют клиентам разнообразные файлы для подтверждения качества или дополнительного «прогрева».

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

Дополнительное достоинство коммуникации с клиентами посредством мессенджеры: чат-боты, база данных. Активно развивается мессенджер-маркетинг, направление в интернет-маркетинге, работающее с коммуникацией в WhatsApp, Telegram, Viber. Маркетологи выстраивают отдельные продающие воронки для пользователей таких приложений. Разрабатываются чат-боты, благодаря которым заказчик получает ответы на все вопросы. Посредством чат-бота потенциального заказчика проводят «за ручку» через все вопросы и возражения, тем самым повышается вероятность совершения заказа.

Кнопка звонка на сайте

Для размещения на сайте кликабельной ссылки или значка команды звонка по телефону на сайте используют язык гипертекстовой разметки — HTML. Если умеете редактировать HTML, используйте такой код: <a href=»tel:12345678″>Позвонить</a>. Редактируйте код, только если уверены, что не допустите ошибку. Пользователям без опыта не рекомендуем вносить изменения в код сайта, чтобы не нарушить его корректную работу.

Если сайт работает на системе Tilda, сделать телефон кликабельным — не проблема для неопытных пользователей. Чтобы при нажатии на номер смартфон предлагал совершить звонок, нужно сделать следующее: впишите ссылку вида tel:+7012345678, не используя пробел. Удобными блоками конструктора Tilda для подключения опции звонка являются МЕ301 и ВF901.

Самый простой способ сделать ссылку на звонок

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

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

В чем удобство мультиссылки

Как сделать сайт с кнопкой звонка по телефону

Ставим правильные ссылки на телефонные номера

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

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

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

Сделать номер телефона кликабельным легко с помощью HTML5, который включает в себя специализированный протокол tel:.

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

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

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

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

<a href="tel:123-456-7890">123-456-7890</a>

Если вместо телефона вы хотите видеть ссылку с текстом «Позвонить», то код будет таким:

<a href="tel:123-456-7890">Позвонить</a>

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

Добавочный номер

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

<a href="tel:123-456-7890p123">Позвонить</a>

Если добавочный номер нужно вводить в тональном режиме, используйте разделитель w вместо p.

Код страны

Коды стран могут быть добавлены в телефонный номер при помощи символа + перед самим номером. Например, для России (+7) это будет выглядеть так:

<a href="tel:+7-456-7890">123-456-7890</a>

Микроразметка под SEO

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

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

<div itemscope itemtype="https://schema.org/LocalBusiness">
    <h1 itemprop="name">Рога и Копыта</h1>
    Телефон: <span itemprop="telephone"><a href="tel:+7123456890">+7 (234) 567-890</a></span>
</div>

Ссылки

• Telephone Links: How to Add “Call-able” Links & CTA’s to Your Website

phones tips tricks

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

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

В виде номера

Поставьте курсор на то место в тексте, куда хотите добавить телефон, и выберите Insert/edit link.

Затем в Link Type укажите тип ссылки Tel,  в поле Number добавьте номер телефона, поле Text to display оставьте пустым.

Телефон добавится в письмо в виде номера.

Если хотите убрать подчеркивание, снимите галочку в поле Underline Link.

Получаем

В текст

Напишите в текстовом блоке слово или фразу, на которую вы хотите добавить ссылку на телефон. Например, «Позвонить».

Выделите текст и выберите Insert/edit link, в Link Type снова укажите значение Tel, а в поле Number впишите телефон.

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

На кнопку

Для начала добавьте в письмо блок «Кнопка». Затем нажмите на блок и в свойствах выберите нужный тип ссылки  — «Позвонить».

Укажите номер телефона в формате +9999999999. На самой кнопке можете написать любой текст.

На иконку

Добавьте блок «Иконка» и выберите изображение телефонной трубки. Вы можете загрузить иконку в сервис или добавить ссылку на нужную картинку в свойствах блока слева.

Далее нажмите «Подробнее». Выберите тип ссылки «Позвонить» и укажите номер телефона.

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

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

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