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

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

<div class=phone>+7 (495) 123-45-67</div>

<div class=phone><a href="tel:+74951234567">+7 (495) 123-45-67</a></div>

.phone {
	color: #000;
	font-size: 16px;
	font-weight: 900;
}
.phone a {
	color: #000;
	font-size: 16px;
	font-weight: 900;
}

a[href^="tel:"] {
	color: #000;
	font-size: 16px;
	font-weight: 900;
}

<meta name="format-detection" content="telephone=no">

<!-- Рабочая ссылка -->
<a href="tel:+74951234567">+7 (495) 123-45-67</a>

<!-- Нерабочая -->
<a href="tel:+7 (495) 123-45-67">+7 (495) 123-45-67</a>

function replace_phone_call($matches)
{
	$tel = str_replace(array('-', ' ', '(' , ')'), '', $matches[0]);
	$tel = str_replace('+7', '8', $tel);
	return '<a href="tel:' . $tel . '">' . $matches[0] . '</a>';
}
 
function replace_phone($text)
{
	return preg_replace_callback('/(?:+|d)[d-() ]{9,}d/', 'replace_phone_call', $text);
}
 
$text = 'Позвоните по телефону +7 (495) 123-45-67, или 88001234567';
echo replace_phone($text);

Позвоните по телефону <a href="tel:84951234567">+7 (495) 123-45-67</a>, 
или <a href="tel:88001234567">88001234567</a>

require_once 'Mobile_Detect.php';
$detect = new Mobile_Detect;
define('IS_MOBILE', $detect->isMobile() && !$detect->isTablet());

function replace_phone_call($matches)
{
	$tel = str_replace(array('-', ' ', '(' , ')'), '', $matches[0]);
	$tel = str_replace('+7', '8', $tel);
	return '<a href="tel:' . $tel . '">' . $matches[0] . '</a>';
}
 
function replace_phone($text)
{
	if (IS_MOBILE) {
		return preg_replace_callback('/(?:+|d)[d-() ]{9,}d/', 'replace_phone_call', $text);
	} else {
		return $text;
	}
}
 
$text = 'Позвоните по телефону +7 (495) 123-45-67, или 88001234567';
echo replace_phone($text);

require_once 'Mobile_Detect.php';
$detect = new Mobile_Detect;
define('IS_MOBILE', $detect->isMobile() && !$detect->isTablet());

function replace_phone_call($matches)
{
	if (IS_MOBILE) {
		$tel = str_replace(array('-', ' ', '(' , ')'), '', $matches[0]);
		$tel = str_replace('+7', '8', $tel);
		return '<a href="tel:' . $tel . '">' . $matches[0] . '</a>';		
	} else {
		return '<a class="modal" href="/callbaсk">' . $matches[0] . '</a>';	
	}
}
 
function replace_phone($text)
{
	return preg_replace_callback('/(?:+|d)[d-() ]{9,}d/', 'replace_phone_call', $text);
}
 
$text = 'Позвоните по телефону +7 (495) 123-45-67, или 88001234567';
echo replace_phone($text);

Позвоните по телефону <a class="modal" href="/callbak">+7 (495) 123-45-67</a>, 
или <a class="modal" href="/callbak">88001234567</a>

Позвоните по телефону <a href="tel:84951234567">+7 (495) 123-45-67</a>, 
или <a href="tel:88001234567">88001234567</a>

Когда пользователь может в один клик по номеру телефона сделать звонок, это в плюс и ему, и вам. Он тратит минимум усилий и времени, чтобы вам дозвониться, а вы получаете +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. В Яндекс.Метрике не так давно появился новый тип цели – «Клик по номеру телефона». Достаточно указать нужные параметры, и данные о звонках будут поступать в Метрику:

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

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

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

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

I want to mark up a phone number as callable link in an HTML document. I have read the microformats approach, and I know, that the tel: scheme would be standard, but is quite literally nowhere implemented.

Skype defines, as far as I know, skype: and callto:, the latter having gained some popularity. I assume, that other companies have either other schemes or jump on the callto: train.

What would be a best practice to mark-up a phone number, so that as many people as possible with VoIP software can just click on a link to get a call?

Bonus question: Does anyone know about complications with emergency numbers such as 911 in US or 110 in Germany?

Update: Microsoft NetMeeting takes callto: schemes under WinXP. This question suggests, that Microsoft Office Communicator will handle tel: schemes but not callto: ones. Great, Redmond!

Update 2: Two and a half years later now. It seems to boil down to what you want to do with the number. In mobile context, tel: is the way to go. Targeting desktops it’s up to you, if you think your users are more Skype people (callto:) or will more likely have something like Google Voice (tel:) installed. My personal opinion is, when in doubt use tel: (in line with @Sidnicious’ answer).

Update 3: User @rybo111 noted, that Skype in Chrome has meanwhile jumped on the tel: bandwagon. I cannot verify this, because no machine with both at hand, but if it’s true, it means we have finally a winner here: tel:

Displaying a phone number on your website can help increase trust in your business, attract prospective customers, and delight existing ones.

To make it as easy as possible for users to get in touch with you or someone on your team, you can make the phone number clickable in HTML. This is a great UX strategy considering that mobile accounts for approximately half of web traffic worldwide. Meaning, over half of your website visitors will be using the same device to find your business online and to place the call.

In this post, we’ll walk through the process of creating HTML telephone links, or “click to call” links.

1. Create an anchor element.

To start, create an anchor element with an empty href attribute. It will look like this:

 
<a href=""></a>

2. Enter your phone number in the href attribute.

Place the phone number inside the href attribute inside the opening a tag. This href (hypertext reference) attribute ensures the hyperlink is functional. It will look like this:

 
<a href="6031112298"></a>

3. Add tel: before the number inside the quotation marks.

Now add tel: inside the href attribute, before the phone number. Both the tel: and phone number should be inside the quotation marks with no spaces or dashes. It will look like this:

 
<a href="tel:6031112298"></a>

4. Include text in the anchor element.

You can include text in the anchor element. Although it’s not required, it can make the call-to-action more obvious to users. Here’s the code side by side with how it would appear to users on the front end of a website.

See the Pen How to Link a Telephone Number in HTML [With Linked Text] by HubSpot (@hubspot) on CodePen.

If you’d like to include the telephone number and have it be the only text that’s linked, then wrap the phone number in the anchor element and place it inside a paragraph tag. It will look like this:

See the Pen How to Link a Telephone Number in HTML [With Text] by HubSpot (@hubspot) on CodePen.

How to Link a Telephone Number With an Extension in HTML

If the telephone number you’d like to make clickable has an extension, then you’ll need to take an additional step.

• You create an anchor element.
• Enter tel: and the phone number in the href attribute.
• Now, after the phone number, add the letter “p” and the extension number. It will look like this:

 
<a href="tel:6031112298p000"></a>

When clicking this “click to call” link, the user will hear the number dialed, then a one-second pause, then the extension dialed.

How to Link a Telephone Number With a Country Code in HTML

If the telephone number you’d like to make clickable has a country code, then you’ll need to take a different additional step.

• You create an anchor element.
• Enter tel: and the phone number in the href attribute.
• Now, before the phone number, add the plus icon (+) and the country code. It will look like this:

 
<a href="tel:+16031112298p000"></a>

How to Add a HTML Telephone Link to Your Website

An HTML telephone link, or “click to call” link, can be included in various parts of your website. Your contact page and header or footer are among the most common. Let’s look at examples of including these clickable links on a WordPress website.

Contact Page

The exact steps to add a HTML telephone link to a contact page will vary depending on what platform and template you use. Below is the general process.

• To start, select a predesigned contact page template.
• Then click into the block with the example phone number.
• Click the three dots icon.
• Click Edit as HTML.

• Replace the existing phone number with the anchor element: <a href=»tel:6031112298″>(603)111-2298</a>

• Click Save Draft and Preview.

Header and Footer

The exact steps to add a HTML telephone link to a header or footer will vary depending on what platform and template you use. Below is the general process.

• In your dashboard, click Appearance > Widgets.

• In the section labelled “Footer,” add any blocks that you want. For the sake of this demo, I’ll only add a paragraph block.

• When you’re ready, click Update.
• Now go to one of your pages.
• Scroll down to the footer area and click the paragraph block.

• Add your phone number, then click the three dots icon.
• Click Edit as HTML.

• Wrap the phone number in an anchor element and add href=»tel:6031112298″ to the opening tag.

• Click Save Draft and Preview.

How to style a HTML Telephone Link

To style a HTML telephone link, you’ll have to add some custom CSS.

For example, say you want the telephone number to appear bolded, orange, and with no underline. Here’s the CSS and how the “click to call” link would appear on the front end:

See the Pen How to style a HTML Telephone Link by HubSpot (@hubspot) on CodePen.

How you add this CSS to your website depends on the platform you’re using.  If building your site in WordPress, for example, you’d add this CSS to the Additional CSS tab in the WordPress Customizer.

Adding “Click to Call” Links to Your Website

Displaying a phone number on your website can help attract and delight prospective and existing customers — making them clickable is even better for UX. The good news is that creating telephone links is easy. You just need to know some HTML and CSS to create and style these links and embed them in different areas on your site.

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

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

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

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

Как сделать ссылку в HTML на телефон, скайп и e-mail

Все довольно просто:

<a href="tel: +74951234567">+7 (495) 123-45-67</a>
<a href="mailto: example@mail.ru">example@mail.ru</a>
<a href="skype: someskype?call">someskype</a>

Атрибут нашего тега <a href=””>, или hypertext reference, должен начинаться со специального слова, после которого идет двоеточие, и уже после мы пишем телефон, емейл или логин скайпа.

Кстати говоря, многие забывают выставлять ссылкам соответствующие события:

a:hover {}
a:link {}
a:visited {}
a:active {}

:hover – вид ссылки при наведении,
:link – непосещенные ссылки,
:visited – посещенные ссылки,
:active – вид активной ссылки.

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

Telephone links are the ones that you tap to call a number on phone-capable devices. Of course, some devices are able to recognize phone numbers and provide the linking automatically, but it’s not always so.

In the example below, we use :tel within the HTML <a> tag. Note that tel: is much like a protocol, and not a feature.

Example of adding a telephone link:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <a href="tel:+05890000111">0-589-0000111</a>
  </body>
</html>

Result

There isn’t any documentation (official) on this protocol handler for links. That’s why there can be differences in browser support and behavior. Commonly, browsers make different decisions on determining what to do with the clicked link.

You can use a little CSS to style your telephone link. Let’s see an example where we add color to our link with the CSS color property.

Example of adding color to the telephone link:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a {
        color: #ff2121;
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <a href="tel:+05890000111">0-589-0000111</a>
  </body>
</html>

In our next example, we’ll add a phone character before the telephone number with the CSS ::before pseudo-element and content property.

Example of adding a phone character before the telephone link:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a[href^="tel:"]:before {
        content: "260e";
        margin-right: 10px;
      }
    </style>
  </head>
  <body>
    <a href="tel:+05890000111">0-589-0000111</a>
  </body>
</html>

I want to mark up a phone number as callable link in an HTML document. I have read the microformats approach, and I know, that the tel: scheme would be standard, but is quite literally nowhere implemented.

Skype defines, as far as I know, skype: and callto:, the latter having gained some popularity. I assume, that other companies have either other schemes or jump on the callto: train.

What would be a best practice to mark-up a phone number, so that as many people as possible with VoIP software can just click on a link to get a call?

Bonus question: Does anyone know about complications with emergency numbers such as 911 in US or 110 in Germany?

Update: Microsoft NetMeeting takes callto: schemes under WinXP. This question suggests, that Microsoft Office Communicator will handle tel: schemes but not callto: ones. Great, Redmond!

Update 2: Two and a half years later now. It seems to boil down to what you want to do with the number. In mobile context, tel: is the way to go. Targeting desktops it’s up to you, if you think your users are more Skype people (callto:) or will more likely have something like Google Voice (tel:) installed. My personal opinion is, when in doubt use tel: (in line with @Sidnicious’ answer).

Update 3: User @rybo111 noted, that Skype in Chrome has meanwhile jumped on the tel: bandwagon. I cannot verify this, because no machine with both at hand, but if it’s true, it means we have finally a winner here: tel: