Содержание
Делаем номер телефона на сайте кликабельным
С каждым годом стремительно растет количество интернет-пользователей, использующих мобильные платформы. И чтобы не потерять своего клиента, необходимо предоставить посетителю возможность позвонить прямо сейчас.
Современные мобильные браузеры могут автоматически делать номер телефона на сайте кликабельным, но это работает не всегда (из-за разных написаний номера телефона).
Наверное, многие из вас сталкивались с такой ситуацией, когда, заказывая какой-либо товар в интернет-магазине, приходилось уточнять некоторые вопросы по телефону. И для этого приходилось записывать номер телефона магазина на листочек / телефон друга, потом снова набирать в свой телефон, и только после этих манипуляций удавалось позвонить. А если телефон поддержки вдруг оказывался недоступен, приходилось всё это проделывать заново.
Именно для того, чтобы решить эту проблему, был разработан способ, который отвечает на вопрос «Как правильно указывать номер телефона на сайте».
Давайте разберемся, как разместить телефон на сайте и сделать его кликабельным.
Сделать номер телефона кликабельным можно с помощью обыкновенной ссылки, но со специальным адресом:
<a href="tel:+78142332211">+7(814)-233-22-11</a>
Или:
<a href="tel:+7 (8142) 33 22 11">Позвоните нам</a>
То есть в атрибуте href должно быть указано: tel: и номер телефона в формате, который вам нужен.
Выглядеть это будет так:
+7(814)-233-22-11
После этого пользователи мобильных устройств смогут просто кликнуть на ссылку и, не совершая дополнительных действий, позвонить вам. Теперь можно добавлять номер телефона в блок контактов на вашем сайте.
Кроме кликабельного номера телефона, есть возможность добавить кликабельную ссылку на ваш Skype:
<a href="skype:test123">Skype</a>
Или можно добавить ссылку для звонка со Skype на телефон:
<a href="callto:+78142332211">Позвонить нам с помощью Skype</a>Как сделать кликабельный номер телефона на сайте
Современный мобильный телефон — не просто средство для связи с людьми, а полноценный ежедневник, банк, библиотека и даже рок-концерт.
Поэтому большое количество бизнес процессов завязано на приложениях, специально разработанных для смартфонов.
Кликабельный номер на сайте — функция, без которой вы рискуете открыть воронку по утечке клиентов вместо конверсионного действия в мобильной версии сайта. Чтобы нажать на номер и связаться с вами, нужно не больше двух действий. Чтобы связаться с вами без кликабельного номера, нужно не меньше пяти действий: копировать, свернуть браузер, перейти в режим набора, вставить, вызов.
А если человеку нужно позвонить в несколько десятков компаний? Найти свободный столик в ресторане для ужина с семьей или просто срочно найти доставку какой-нибудь еды? Он сэкономит время и найдет похожие условия на сайте конкурентов, которые не заставят его тратить время на 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. Так вам смогут позвонить даже пользователи, которые зашли на сайт с компьютера. Подробнее про callback
Бонус
Кстати, по этому же принципу вы можете сделать кликабельный email на своем сайте! Это важно для B2B — даже если доля мобильного трафика на сайт не очень высокая, все равно есть процент людей, которые захотят отправить вам вопрос, запросить коммерческое предложение или отправить спецификацию через мобильные устройства (смартфон или планшет).
Подпишись на нас в соцсетях:
Чтобы email стал кликабельным, вам нужно поставить атрибут . А если вы пользуетесь email-трекингом, не забудьте правильно расположить атрибуты, чтобы подменялся не только текст на сайте, но и адрес отправки письма:
<a class=”callibri_email” href=”mailto:[email protected]”>[email protected]</a>
Формат ссылки для телефонных звонков в мобильных браузераx (href=»tel:…»)
На сегодняшний день большинство мобильных устройств с браузером также являются телефонами! Так почему бы не создавать для телефонных номеров на вашей странице ссылки, кликая по которым вызывалось бы встроенное приложене для звонков. Если вы создаете сайт бизнес руководства, консалтингового агенства или просто продаете пирожки на своем сайте, большинство людей предпочтут позвонить вам в 1-2 тача вместо нудного заполнения формы (особенно на мобильном девайсе).
Мы уже писали об URI-схемах для отправки смс тут.
Первым стандартом, де-факто (скопированным с японских I-MODE стандартов) является использование tel: схемы. Он был предложен в качестве стандарта в RFC 5341, но будьте осторожны, потому что большинство предложенных там параметров не работают на всех устройствах.
Сегодня поддержка tel: URI-схемы есть почти в каждом мобильном устройстве, в том числе в Safari на IOS, Android Browser, WebOS Browser, Symbian браузер, Internet Explorer, Opera Mini и т.п.
Очень простой и лаконичный синтаксис:
html
<a href="tel:+1234567890"> Звоните нам бесплатно! </ a>
href=”tel:…”
Если пользователь кликает по такой ссылке, мобильное приложение попросит подтверждения вызова с указанием полного номера. Это позволит избежать мошенничества или обмана пользователя при звонках в другую страну или на премиум-номер.
На десктопе, с установленным Skype (или подобным софтом), система попросит вас подтвердить открытие внешнего приложения, при клике на такую ссылку.
Я рекомендую указывать телефонный номер в международном формате: знак плюс (+), код страны, код местной зоны и номер абонента. Мы ведь иногда действительно не знаем, где наши посетители физически расположены. Если они находятся в той же стране, или даже в том же районе, международный формат также будет работать.
Существуют, также другие варианты которые вы можете встретить. Давайте посмотрим несколько примеров для ознакомления, просто что-бы знать, что такое бывает. Но я не рекомендовал-бы использовать их из-за различий в поддержке браузерами.
html
<a href="callto:12345678">Работает на iPhone и Nokia</a>
<a href="wtai://wp/mc;12345678">Работает на Android</a>
<a href="wtai://wp/mc;+123456789">международный формат для Android</a>
В целом все, что хотелось сказать. Используйте tel: URI-схемы и будет вам счастье 😉
Как сделать кликабельный номер телефона на сайте | Блог 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:yourmail@mysite.
com.
Как отслеживать клики по номеру телефона
Это можно делать без вмешательства в код и установки Менеджера тегов Google. В Яндекс.Метрике не так давно появился новый тип цели – «Клик по номеру телефона». Достаточно указать нужные параметры, и данные о звонках будут поступать в Метрику:
Чтобы всё работало, важно указать номер в точности такой же, какой указан в коде сайта. Лучше всего скопировать адрес ссылки прямо с сайта. Для этого:
- Кликните правой кнопкой мыши по номеру на сайте и нажмите в меню «Просмотреть код»;
- В открывшейся консоли разработчика вы увидите нужную ссылку с номером;
- Скопируйте её и вставьте в параметрах цели.
Данные по кликам на номер телефона появятся в отчете «Конверсии» уже через несколько минут после создания цели.
Как сделать кликабельный номер телефона на сайте? | Лаборатория Айтинти
Почему возникает такой вопрос? Не секрет, что большинство пользователей интернета посещают сайты со своих мобильных устройств.
Чтобы вы не потеряли своего клиента, у него должна быть возможность позвонить вам прямо сейчас, просто кликнув по номеру телефона.
Для реализации этой задачи предлагается специальная html-разметка:
<a href=»tel:+7 (4012) 52 44 07″>+7 (4012) 52 44 07</a>
Результатом такой работы будет текст в виде номера +7 (4012) 52 44 07, кликнув по которому в телефоне в поле вызова номера, появится номер+74012524407. И пользователь вашего сайта сможет позвонить вам, не делая никаких лишних действий.
Примечание: Текст между тегами <a> </a> может быть произвольным. А текст после tel: должен содержать телефонный номер в том формате, который вам нужен (с 8, +7, городской и т.д.).
Инструкция 2
Как сделать кликабельный номер телефона на сайте?
Почему возникает такой вопрос? Не секрет, что большинство пользователей интернета посещают сайты со своих мобильных устройств. Чтобы вы не потеряли своего клиента, у него должна быть возможность позвонить вам прямо сейчас, просто кликнув по номеру телефона.
Чтобы добавить кликабельный номер телефона нужно:
1) Перейти в режим редактирования блока или ноды, где содержится редактируемый номер
(При этом, ваш номер телефона будет расположен в текстовом поле страницы.
2) Выделить мышью номер.
(в данное поле также можно вписать любой произвольный номер и текст)
3) В панели инструментов, щелкнуть по значку «Вставить/Редактировать ссылку»
4) Заполнить пустые окошки в открывшемся редакторе
Тип ссылки: Ссылка
Протокол: Другой
В поле ссылка написать ваш номер в формате:
Городской: tel:+74012304541
Мобильный: tel:+79118638675
5) Нажать кнопку «ок»
6) Пролистать страничку до самого низа, нажать кнопку «Сохранить блок»
7) Теперь ваша ссылка кликабельна
Телефон в ссылке должен содержать телефонный номер в том формате, который нужен вам (с 8, +7, городской и т.д.).
Теперь кликнув по вашему номеру, пользователь мобильного устройства будет иметь возможность мгновенно позвонить вам со своего мобильного устройства.
Для вас это может быть полезно: Как сделать кликабельным скайп?
Кликабельный номер телефона на сайте — Ringostat Blog
Вспомните, каково звонить в компанию, если телефон на сайте указан без ссылки, как обычный текст. Выделяешь номер, копируешь, закрываешь браузер, открываешь меню для набора номера, вставляешь, звонишь. Такой процесс осилит не каждый. Особенно, если времени мало, а на сайте конкурента можно позвонить в один клик. Подобный недочет довольно легко исправить — просто воспользуйтесь нашей инструкцией.
Кликабельный номер или click-to-call номер — это телефон на сайте, при нажатии на который сразу происходит вызов. Эта опция предназначена специально для пользователей из мобайла. Позвонить можно и с десктопной версии, если на компьютере установлена программа для звонков.
«Если честно, мы не перестаем удивляться. Вроде бы 21 век, мобильный трафик постоянно растет, у многих уже есть адаптивные версии сайта.
Но мы все равно сталкиваемся с проектами, у которых не настроен кликабельный номер телефона для мобайла. Люди просто не понимают, насколько важна эта функция. А ведь так бизнес теряет часть клиентов, даже не зная об этом».
— признается Евгений Заступ, руководитель техподдержки Ringostat.
Но мы все равно сталкиваемся с проектами, у которых не настроен кликабельный номер телефона для мобайла. Люди просто не понимают, насколько важна эта функция. А ведь так бизнес теряет часть клиентов, даже не зная об этом».
Почему важно использовать кликабельные номера для мобильной версии сайта
- Человек, который открыл сайт со смартфона, не настроен долго выбирать и рассматривать товар. Это повышает вероятность, что он именно позвонит, а не напишет в чат или в соцсети.
- Поведение пользователя мобильного отличается от человека, сидящего за компьютером с полноценной клавиатурой. На небольшом экране неудобно выделять, вставлять и копировать символы. Велика вероятность, что пользователь пойдет искать другую компанию, которой легче позвонить. Тем более, что кликабельные номера уже не редкость, и многие к ним привыкли.
- 46% людей, у которых был негативный опыт с мобильной версией страницы, говорят, что больше ничего не купят у данной компании. А попытка звонка с сайта — это часть пользовательского опыта.
- 49% посетителей заходят в интернет с мобильных телефонов. В среднем жители планеты проводят 3 часа в сети, с помощью смартфона. И эти показатели будут расти — достаточно посмотреть на тенденции:
А попытка звонка с сайта — это часть пользовательского опыта. Если компания с сайтом без click-to-call номеров обратится в агентство за продвижением, то специалисты, скорей всего, порекомендуют устранить этот недочет. Ведь невозможно говорить о повышении конверсии, если потенциальным клиентам просто неудобно обращаться в компанию. Даже если они этого хотят.
Как проверить, можно ли позвонить с вашего сайта в один клик
Если вы заказывали сайт разработчику и не уверены, предусмотрел ли он кликабельные номера — это легко проверить. Откройте сайт с мобильного устройства и попытайтесь позвонить, нажав на номер.
Либо зайдите на сайт с компьютера и попробуйте кликнуть на номер. Если он в формате click-to-call, то появится окошко с предложением выбрать программу для совершения звонков:
Как сделать номер телефона на сайте кликабельным
Убедитесь, что у вас есть доступ к редактированию кода вашей площадки в конструкторе сайтов, напрямую в панели вебмастера или через FTP.
Откройте панель с кодом и найдите фрагмент кода, где указан номер телефона. Для этого нажмите Ctrl+F и в появившееся окошко поиска введите несколько цифр номера. Вот например, как это можно сделать:
Некликабельный номер может выглядеть так:<span>+38 (044) 123-45-67</span>
Или так:
<div class=”phone”>+38 (044) 123-45-67</div>
Если у номера на вашем сайте есть стиль для кода оператора и самого номера — т.е. шрифт, цвет, курсив, то в коде он может быть прописан так:<div><span class=”phone-small”>+38 (044)</span> 123-45-67</div>
Перейдите к номеру. Вам нужно будет добавить в коде три элемента:
- тег
<a>...</a>; - внутри него, вместо троеточия — атрибут
href=””, который отвечает за ссылку; - между кавычками атрибута вставьте параметр
tel:; - после двоеточия впишите номер в международном формате, со знаком плюс перед ним, без пробелов и тире.
Если номер прописан без стилей, то для примеров, приведенных выше, он в коде должен выглядеть так:
<span><a href=”tel:+380441234567”>+38 (044) 123-45-67</a></span>
Или так:<div><span class=”phone-small”><a href=”tel:+380441234567>+38 (044)</span> 123-45-67</a></div>
Как видим, номер телефона прописывается дважды. Первый раз, после атрибута href — это ссылка на номер. Второй телефон — это элемент, который отвечает за то, как номер отображается на сайте.
Если вы делаете кликабельным номер в шапке сайта, убедитесь, что не нарушили стили — шрифт и цвет номера телефона. В противном случае внешний вид телефона изменится, он станет синим и при наведении будет подчеркиваться, как стандартная ссылка.
Иногда в мобильной версии используют вариант, когда номер телефона не указывается, а вместо него пишется «Позвонить».
Если вы хотите сделать так же, то в коде это будет выглядеть так:
<button><a href=”tel:+380441111111”>+Позвоните нам</a></button>
Если вы используете подмену номеров от Ringostat, то наш сервис подменяет и такие номера, сохраняя текст.
ВАЖНО: Если вы хотите подключить коллтрекинг, мы рекомендуем сначала сделать номера на сайте кликабельными. В противном случае, при подключении кода отслеживания будет сложней предусмотреть, чтобы стили не нарушились.
Зато при настройке коллтрекинга на сайт с кликабельными номерами все шрифты и форматирование сохраняются. Наш сервис автоматически подменяет имеющуюся ссылку и ее содержимое.
Если у вас возникли вопросы и сложности при настройке по инструкции — напишите в чат нашей техподдержке. Ребята подскажут ответы по возникшим вопросам и помогут с рекомендацией для вашего сайта.
Если вы нашли ошибку — выделите её и нажмите Ctrl + Enter или нажмите сюда.
Активная ссылка телефона на сайте с помощью tel: (советы, нюансы)
Недавно читал, что объемы мирового мобильного трафика уже превышают десктопных пользователей. В данном блоге этого пока не случилось, но в интернет-магазине одного из моих клиентов бОльшая часть людей заходит именно через планшеты/смартфоны. Поэтому меня попросили сделать продвинутую ссылку на телефон на сайте, которая при нажатии автоматически бы открывала соответствующее приложение с набором номера.
Содержание:
Некоторые устройства без проблем понимают написанные телефоны, например, слышал, что в Android для этого достаточно заключить линк в span:
<span>(098) 555-44-33</span> |
<span>(098) 555-44-33</span>
При клике по тексту, в теории, весь номер должен выделиться, но на практике у меня это почему-то не получилось.
Лучше использовать в ссылке tel параметр:
<a href="tel:+380985554433">Позвоните нам!</a> |
<a href=»tel:+380985554433″>Позвоните нам!</a>
Фишка работает с 2011 года, хотя не все браузеры одинаково с ней дружат(жили) — как это часто бывает в верстке, есть определенные нюансы. Поэтому я решил опубликовать немного инфы по теме из интересной англоязычной статьи.
Спецификация и поддержка
По факту tel: — это не опция «А» тега, а протокол (такой же как http: или mailto:, отвечающие за линки на веб-страницы и почтовые адреса соответственно). Конкретного и детального его описания в HMTL5, вроде бы, нет, но после принятия данного стандарта в iOS, он стал использоваться повсеместно.
Даже без спецификации многие браузеры вполне адекватно понимают ссылку на телефон в HTML, однако процесс обработки клика встречается разный: начиная от открытия диалогового окна с выбором приложения и заканчивая банальным игнорированием.
Как реагируют типовые программы:
- Safari — запускает FaceTime.
- Opera (Windows) — в статье-исходнике сказано, что всплывает окно с ошибкой мол нельзя распознать протокол, но у меня лично было предложение открыть Skype (возможно, потому что он установлен).
- Opera (OSX) — появляется запрос на использование другого приложения.
- iOS — на выбор вам предлагают позвонить, отправить сообщение или добавить в контакты.
- Internet Explorer 11 Mobile — инициирует звонок.
- Internet Explorer 11 — в оригинальном посте говорится, что появится окно с информацией о вызове какого-то приложения, но у меня в Windows (ПК) просто была ошибка протокола.
- Chrome — на декстопе ничего не происходило, но в смартфоне открылось окно со звонком и введенным телефоном.
- Edge — запрос на открытие соответствующей программы.
- BlackBerry 9900 — пытается инициировать набор номера.
- Android — запуск приложения телефона.
- Про Firefox ничего сказано не было, но я встречал информацию о возможных ошибках на Win ПК. В комментариях дополнили, что в Mac при этом вызывается FaceTime.
Увы, не все разработчики браузеров для компьютеров (в том числе и непопулярных) позаботились о должной поддержке tel протокола, вероятно, работа над этим будет продолжаться. Хотя без конкретной спецификации она выглядит несколько абстрактной.=»tel:»]:before {
content: «\260e»;
margin-right: 0.5em;
}
Советы по созданию ссылки на номер телефона
Данная фишка для мобильных устройств — громадное преимущество, т.к. является отличным Call To Action маркетинговым инструментом. Посетителю сайта не надо пытаться выделить весь текст, вводить номер по памяти и т.п., он просто кликает в нужном месте, и активная ссылка телефона сделает свое дело. Однако тут есть нюансы.
Определение мобильных устройств
Как я уже сказал выше, в декстопнах подобный линк срабатывает далеко не всегда, поэтому разумно использовать разный код под разные типы устройств. Чтобы опция функционировала только в мобильных браузерах добавляете в шаблон, например, следующий JavaScript:
<div></div>
<script>
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
document.getElementById("header-phone").innerHTML = '<span><a href="tel:+ 380985554433 ">(098) 555-44-33</a></span>';
} else {
document.getElementById("header-phone").innerHTML = '<span>(098) 555-44-33</span> ';
}
</script> |
<div></div>
<script>
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
document.getElementById(«header-phone»).innerHTML = ‘<span><a href=»tel:+ 380985554433 «>(098) 555-44-33</a></span>’;
} else {
document.getElementById(«header-phone»).innerHTML = ‘<span>(098) 555-44-33</span> ‘;
}
</script>
Здесь, в зависимости от результата условия в IF, в блоке с ID=header-phone создается либо ссылка на телефон с tel:, либо просто HTML текст.
SEO оптимизация
В оригинальной статье есть пример кода контактов для бизнес сайтов, где информация может быть использована в Google выдаче.
Вот сам код:
<div itemscope itemtype="http://schema.org/LocalBusiness">
<h2 itemprop="name">Beach Bunny Swimwear</h2>
Phone:
<span itemprop="telephone">
<a href="tel:+18506484200">
850-648-4200
</a>
</span>
</div> |
<div itemscope itemtype=»http://schema.org/LocalBusiness»>
<h2 itemprop=»name»>Beach Bunny Swimwear</h2>
Phone:
<span itemprop=»telephone»>
<a href=»tel:+18506484200″>
850-648-4200
</a>
</span>
</div>
Теоретически, в линке можно еще указать rel=»nofollow».
Убираем автоопределение
Если вы собираетесь внедрять сегодняшний урок в свой шаблон, то вероятнее всего захотите отключить автоопределение телефона в iOS. Как минимум, чтобы система не переопределила существующие стили. Для этого в HEAD дописываете строку:
<meta name="format-detection" content="telephone=no"> |
<meta name=»format-detection» content=»telephone=no»>
Итого. Если вы размещаете контактную информацию на сайте, то по умолчанию ссылки на телефоны не открываются — вам нужно использовать специальный протокол tel: в HTML теге А. Опция не имеет четкой спецификации, и поддерживается браузерами слегка «хаотично» — учитывайте это. В заключительной части я указал 3 пожелания, которые было бы неплохо внести в ваш код: отключить линки на дестопах, отформатировать код для лучшего считывания поисковыми роботами и т.п.
Если будут вопросы, пишите их ниже. А вы добавляете в своих проектах активные ссылки на номера телефонов? Почему да / нет?
телефонных ссылок: как добавить на свой веб-сайт ссылки с возможностью вызова и призывы к действию
На многих веб-сайтах предприятий указан номер телефона, по которому клиенты могут с ними связаться. Когда настольные компьютеры были самым популярным способом доступа к сайтам, пользователи записывали номер телефона и звонили с отдельного устройства. Конечно, теперь большинство пользователей заходят на сайт и звонят с одного и того же устройства. Это открывает возможность добавить ссылку для звонка — создание номера телефона в формате HTML, на который можно будет нажать.
В этой статье мы рассмотрим, как добавить ссылку для звонка, а также несколько других интерактивных ссылок, таких как электронная почта и другие CTA.
Подпишитесь на наш канал Youtube
Как работают ссылки для вызова
Сделать телефонный номер интерактивным можно легко с помощью HTML. HTML5 включает такие протоколы, как tel: и mailto:, которые могут использовать браузеры. Браузеры по-разному реагируют на эти протоколы. Некоторые запустят приложение для телефона и добавят номер на дисплей, ожидая, пока вы нажмете кнопку «Позвонить». Другие позвонят, а другие сначала спросят, нормально ли.
Поскольку это HTML, вы можете добавлять протоколы в любом месте вашего сайта, включая верхний колонтитул, нижний колонтитул, боковые панели, в содержание сообщений и страниц, а также в виджеты.
Добавление ссылки на телефонный номер в формате HTML на ваш веб-сайт
Добавьте код в виде текста в то место, где должна отображаться ссылка:
123-456-7890
Href = tel: создает ссылку для вызова. Это сообщает браузеру, как использовать номер.
«Tel: 123-456-7890» создает номер телефона в формате HTML. Число в кавычках — это номер, по которому он позвонит.
Число в тегах> <- это визуальная часть, и это может быть все, что вы хотите, включая номер телефона, строку текста, такую как «Нажмите, чтобы позвонить» или «Позвоните сейчас», или любой другой призыв к действию. ты хочешь.Он должен описывать, что произойдет, когда они нажмут.
Отображение сообщения вместо номера будет выглядеть так:
НАЖМИТЕ ДЛЯ ЗВОНКА
Ваши посетители будут видеть текст, но когда они нажимают на него, они видят экран набора номера своего телефона с вашим номером, готовым для того, чтобы они могли нажать кнопку вызова.
Добавление добавочного номера
У некоторых телефонных номеров есть добавочные номера. Вы можете добавить код, который создаст короткую паузу перед набором добавочного номера.Добавление P перед расширением добавит паузу в одну секунду. Код может выглядеть так:
НАЖМИТЕ ДЛЯ ЗВОНКА
Набирает номер, ждет одну секунду, а затем набирает добавочный номер.
Вы можете заставить его ждать гудка, используя w вместо p .
Добавление кодов стран
Коды страны
можно добавить, указав + вместе с кодом страны перед номером телефона.Пример может выглядеть так:
123-456-7890
Добавление микроданных для локального SEO
Одно из моих любимых удобных способов носить с собой смартфон — это когда я ищу местную компанию, и в результатах поиска Google выдает мне номер телефона, на который можно нажать. Я могу щелкнуть номер, чтобы позвонить, не записывая его и не пытаясь запомнить. Эта функция теперь необходима. К счастью, вы можете добавить его на свой веб-сайт, чтобы Google мог указывать ваш номер телефона при локальном поиске.
Это делается с помощью микроданных. Микроданные информируют поисковые системы о том, что номера являются телефонными номерами, поэтому они отображаются в виде интерактивной ссылки для вызова. Вы можете создать это, обогатив разметку несколькими тегами для локального поиска.
Например, код может выглядеть так:
Тема WordPress
Телефон: 234567890
Другие призывы к действию
С HTML5 вы не ограничены телефонными номерами.Вы можете добавить другие призывы к действию, такие как электронная почта, обмен сообщениями, факс и т. Д. Протоколы HTML5 включают:
- тел: — позвонить по телефону
- mailto: — открыть приложение электронной почты
- callto: открыть Skype
- sms: — отправить текстовое сообщение
- факс: — отправить факс
Все эти протоколы используются так же, как мы видели выше. Давайте посмотрим на несколько примеров.
Добавление кода на страницу контактов
Одно из лучших мест для добавления ссылки для звонка — это контактная информация на странице «Контакты».
Независимо от того, используете ли вы классический редактор или новый редактор Гутенберга, вам потребуется просматривать текстовую версию страницы. В классическом редакторе перейдите на вкладку Текст . В Gutenberg щелкните три точки в правом верхнем углу и выберите Code Editor .
Добавьте код вместо своего номера телефона.
Выйдите из редактора кода или просмотрите страницу, и вы увидите, что ваш номер телефона теперь является интерактивной ссылкой.
Создание кода для ссылки электронной почты или URL-адреса
HTML-код для электронной почты — mailto: адрес электронной почты добавляется в конец, например:
.
[защита электронной почты] Как и в случае телефонной ссылки, вы можете использовать визуальную часть для добавления сообщения, например: Нажмите здесь, чтобы отправить мне письмо по электронной почте
Как и в случае телефонной ссылки, вы можете использовать визуальную часть для добавления сообщения, например:
Вот пример со страницы контактов пакета макетов спа.Я добавил модуль аннотации со значком и текстом «Отправить электронное письмо». Я выбрал вкладку «Текст» и добавил HTML-код электронного письма. Теперь текст можно щелкнуть, и откроется ваше почтовое приложение.
Добавление кода к открытым URL-адресам
У вас может быть HTML-код для открытия любого URL-адреса. Это хорошо, если вы хотите отправлять читателей на страницы для подписки на информационные бюллетени, событий и т. Д. Для того, чтобы ссылаться на них, ваш HTML-код будет включать URL-адрес. Например:
См. Образец страницы>
Я добавил еще одну аннотацию с кодом, чтобы увидеть страницу событий.
Отключить на настольном компьютере и планшете
Одна проблема со ссылками для звонков заключается в том, что они не подходят для настольных компьютеров или планшетов. Вы можете решить эту проблему с помощью Divi, создав модули, специфичные для каждого типа устройства, а затем отключив их на других устройствах.
Здесь я создал два модуля с номером телефона: один включает номер телефона в формате HTML, а другой — нет. Я отключил тот, у которого есть интерактивный номер на планшетах и компьютерах, поэтому они никогда не увидят ссылку.Я также отключил модуль без ссылки для телефонов, поэтому пользователи телефонов будут видеть только модуль со ссылкой.
Добавление кода в верхний или нижний колонтитул
Вы можете добавить код в верхний или нижний колонтитул с помощью редактора темы. Всегда используйте дочернюю тему, иначе ваш PHP-код будет перезаписан при обновлении темы. Это потребует некоторого стиля CSS, чтобы хорошо выглядеть.
На панели инструментов выберите Внешний вид> Редактор> Заголовок темы (или Тема Нижний колонтитул ).Поместите код в часть кода
. Я поискал конечный тег , нажал «Enter», чтобы добавить несколько дополнительных строк, и вставил свой код. Вы можете увидеть код здесь, в строках 28 и 29. Вот как это выглядит, когда я разместил ссылку для звонка и ссылку электронной почты в заголовке темы Twenty Nineteen. Он есть, и работает, но не очень красиво. Это можно исправить, добавив цвет и поле для полей, чтобы они стояли отдельно друг от друга. Конечно, это делается в CSS.= «mailto:»] {
оранжевый цвет;
текстовое оформление: нет;
поле справа: 0,8em;
}
Это говорит CSS, как стилизовать текст для tel: и mailto :. Он изменяет шрифт телефонного номера на коричневый, шрифт электронного письма — на оранжевый, а также добавляет небольшое поле справа от каждой ссылки.
CSS работает везде, где код включается в виджеты, сообщения и т. Д. Вы даже можете использовать значки вместо текста.
Добавление кода во вторичное меню Divi
Divi может указать ваш номер телефона и адрес электронной почты в дополнительном меню над заголовком.По умолчанию кнопка электронной почты уже активна, а номер телефона — нет. Номер телефона можно превратить в ссылку для звонка, используя аналогичный номер телефона в формате HTML, который мы использовали в предыдущих примерах.
Перейдите в настройщик темы > Заголовок и навигация > Элементы заголовка . Это даст вам текстовое поле, в которое вы можете добавить свой номер телефона. К счастью, вы не ограничены только числами. Вы также можете добавить HTML. Я добавил HTML из предыдущих примеров.Я также увеличил размер шрифта телефонного номера, чтобы изображения было легче разглядеть.
Вы можете сделать это очевидным, добавив сообщение к визуальной части ссылки. Вы можете заменить номер сообщением или добавить сообщение в конец номера. Это могло бы выглядеть так:
123-456-7890 НАЖМИТЕ ДЛЯ ЗВОНКА
В этом примере показан только текст.
В этом я добавил номер телефона вместе с текстом.
Тестирование на мобильном телефоне
Рекомендую проверить ссылки с мобильных устройств, чтобы убедиться, что они работают. Если у вас нет доступа к смартфону, вы можете использовать Инструменты разработчика Google Chrome.
Щелкните правой кнопкой мыши домашнюю страницу и выберите Inspect . В левом верхнем углу экрана вы увидите список устройств. Выберите тот, чтобы увидеть, как ваш сайт выглядит на этом экране. При нажатии на ссылку с номером телефона в формате HTML должно открываться диалоговое окно с просьбой выбрать приложение.Если вы это видите, ссылка работает. Я по-прежнему рекомендую попробовать его на реальном смартфоне, но это хороший признак того, что ссылка на него что-то делает.
Добавление ссылок для вызовов с помощью плагинов
Вы также можете добавить ссылку на звонок в заголовок с помощью плагина. Обычно они включают в себя функции для стилизации, добавления нескольких призывов к действию и возможность включения или выключения в зависимости от устройства посетителя. Их также легко настроить и использовать. Это отличный выбор, если вы не хотите обрабатывать код.Вот несколько лучших вариантов.
Кнопка вызова
Call Now Button добавляет кнопку для звонка в нижнюю часть экрана для посетителей вашего мобильного устройства. Он не отображается на других устройствах. Вы также можете добавить текст, если хотите. Кнопка представляет собой значок телефона, поэтому легко понять, для чего она нужна. Все, что вам нужно сделать, это включить кнопку и ввести свой номер телефона. Вы можете изменить поведение по умолчанию в дополнительных настройках.
Дополнительная информация
Липкие боковые кнопки
Этот плагин позволяет добавлять кнопки, которые прикрепляются к боковой стороне вашего веб-сайта и остаются на экране, когда пользователь прокручивает страницу.Вы можете добавить интерактивный номер телефона, адрес электронной почты, значки социальных сетей и адреса магазинов. Установите их справа или слева, выберите стили анимации и ролловера, настройте цвета и выберите, где они будут отображаться.
Дополнительная информация
Скоростной контактный стержень
Добавляет панель контактов, которая включает интерактивные ссылки для номера телефона, номера факса, заголовка, адреса, электронной почты, социальных сетей и настраиваемых URL-адресов. Установите полосу вверх или вниз и настройте размер, цвет, цвет текста и ссылок, а также реакцию панели.Вы также можете отрегулировать размер. вы можете добавить больше контента, используя фильтры.
Дополнительная информация
Мобильная контактная панель
Этот плагин добавляет ссылки на ваш сайт при просмотре на мобильных устройствах. Вы можете выбрать, какие ссылки будут отображаться, из 13 вариантов, включая телефон, электронную почту, Skype, настраиваемые URL-адреса и социальные сети. Он имеет интеграцию с FontAwesome для иконок. Вы можете стилизовать ссылки и выбрать размер, границу, непрозрачность и т. Д. Установите меню вверху или внизу экрана.Меню остается на экране, когда пользователь прокручивает. Он также включает прокрутку вверх и корзину WooCommerce с кнопками счетчика товаров.
Дополнительная информация
Последние мысли
Популярность смартфонов для доступа к веб-сайтам растет с каждым днем. Эта популярность превращает ссылки для звонков из простого удобства в полную необходимость. Добавление интерактивных телефонных номеров может иметь значение, когда пользователи звонят в вашу компанию или вашим конкурентам. К счастью, создать интерактивные ссылки для добавления телефонных номеров HTML в заголовки, нижние колонтитулы, виджеты, страницы и сообщения вашего веб-сайта WordPress не так уж и сложно.
Мы хотим услышать от вас. Вы добавили ссылки для звонков на свой сайт? Расскажите нам о своем опыте в комментариях ниже.
Изображение предоставлено Джейн Келли / shutterstock.com
— HTML: язык разметки гипертекста
элементы типа tel используются, чтобы позволить пользователю вводить и редактировать номер телефона. В отличие от и , входное значение не проверяется автоматически на определенный формат перед отправкой формы, потому что форматы телефонных номеров сильно различаются мир.
Несмотря на то, что входы типа tel функционально идентичны стандартным входам text , они действительно служат полезным целям; наиболее быстро очевидным из них является то, что мобильные браузеры — особенно на мобильных телефонах — могут предпочесть специальную клавиатуру, оптимизированную для ввода телефонных номеров. Использование определенного типа ввода для телефонных номеров также делает добавление настраиваемой проверки и обработки телефонных номеров более удобными.
Примечание: Браузеры, которые не поддерживают тип tel , возвращаются к стандартному вводу текста.
| Значение | A DOMString , представляющая номер телефона, или пустая |
| События | изменить и вход |
| Поддерживаемые общие атрибуты | автозаполнение , список , maxlength , minlength , pattern , placeholder , readonly , and size |
| Атрибуты IDL | список , выбор Начало , выбор Конец , выбор Направление и значение |
| Методы | выберите () , setRangeText () , setSelectionRange () |
Атрибут значения элемента содержит DOMString , который либо представляет номер телефона, либо является пустой строкой ( "" ).
В дополнение к атрибутам, которые работают со всеми элементами , независимо от их типа, входы телефонных номеров поддерживают следующие атрибуты:
| Атрибут | Описание |
|---|---|
список | Идентификатор элемента |
макс. Длина | Максимальная длина в символах UTF-16, принимаемая в качестве допустимого ввода |
мин. Длина | Минимальная длина, которая считается допустимой для содержимого поля |
образец | Регулярное выражение, которому должно соответствовать введенное значение, чтобы пройти проверку ограничения |
заполнитель | Пример значения для отображения внутри поля, когда оно не имеет значения |
только для чтения | Логический атрибут, который, если он присутствует, указывает, что содержимое поля не должно быть доступно для редактирования пользователем |
размер | Количество символов в ширину поля ввода должно быть на экране |
список
Значения атрибута списка - это id элемента , расположенного в том же документе. предоставляет список предопределенных значений, которые можно предложить пользователю для этого ввода. Любые значения в списке, несовместимые с типом , не включаются в предлагаемые параметры. Предоставленные значения являются предложениями, а не требованиями: пользователи могут выбрать из этого предопределенного списка или указать другое значение.
maxlength >
Максимальное количество символов (в единицах кода UTF-16), которое пользователь может ввести в поле телефонного номера.Это должно быть целое число 0 или больше. Если не указано значение maxlength или указано недопустимое значение, поле номера телефона не имеет максимальной длины. Это значение также должно быть больше или равно значению minlength .
Входные данные не пройдут проверку ограничения, если длина текста, введенного в поле, больше maxlength, единиц кода UTF-16.
minlength
Минимальное количество символов (в единицах кода UTF-16), которое пользователь может ввести в поле телефонного номера.Это должно быть неотрицательное целое число, меньшее или равное значению, заданному параметром maxlength . Если не указана минимальная длина или указано недопустимое значение, ввод телефонного номера не имеет минимальной длины.
Поле телефонного номера не пройдет проверку ограничения, если длина текста, введенного в поле, меньше минимальной длины единиц кода UTF-16.
шаблон
Атрибут шаблона , если он указан, представляет собой регулярное выражение, которому должно соответствовать входное значение , чтобы значение прошло проверку ограничения.Это должно быть допустимое регулярное выражение JavaScript, используемое типом RegExp и описанное в нашем руководстве по регулярным выражениям; флаг 'u' указывается при компиляции регулярного выражения, так что шаблон обрабатывается как последовательность кодовых точек Unicode, а не как ASCII. Вокруг текста шаблона не следует указывать косую черту.
Если указанный шаблон не указан или недействителен, регулярное выражение не применяется, и этот атрибут полностью игнорируется.
Совет: Используйте атрибут title , чтобы указать текст, который большинство браузеров будет отображать как всплывающую подсказку, чтобы объяснить, какие требования должны соответствовать шаблону. Вы также должны включить рядом другой пояснительный текст.
Подробности и пример см. В разделе «Проверка шаблона» ниже.
заполнитель
Атрибут заполнителя — это строка, которая дает пользователю краткую подсказку относительно того, какая информация ожидается в поле.Это должно быть слово или короткая фраза, демонстрирующая ожидаемый тип данных, а не пояснительное сообщение. Текст не должен содержать символов возврата каретки или перевода строки.
Если содержимое элемента управления имеет одну направленность (LTR или RTL), но должно представлять заполнитель в противоположной направленности, вы можете использовать символы форматирования двунаправленного алгоритма Unicode, чтобы переопределить направленность внутри заполнителя; см. Переопределение двунаправленного текста с помощью управляющих символов Unicode в Алгоритме двунаправленного текста Unicode для этих символов.
только для чтения
Логический атрибут, который, если он присутствует, означает, что это поле не может редактироваться пользователем. Однако его значение все еще можно изменить с помощью кода JavaScript, напрямую установив свойство HTMLInputElement value .
Примечание: Поскольку поле только для чтения не может иметь значение, требуется не оказывает никакого влияния на входные данные с указанным атрибутом только для чтения .
Размер
Атрибут размер — это числовое значение, указывающее, сколько символов должно быть в ширину поля ввода.Значение должно быть числом больше нуля, а значение по умолчанию — 20. Поскольку ширина символов различается, это может быть или не быть точным, и на это не следует полагаться; результирующий ввод может быть уже или шире, чем указанное количество символов, в зависимости от символов и шрифта ( шрифт, настройки используются).
Это не , а не устанавливает лимит на количество символов, которые пользователь может ввести в поле. Он лишь приблизительно указывает, сколько людей можно увидеть одновременно.Чтобы установить верхний предел длины входных данных, используйте атрибут maxlength .
Для полей ввода телефонного номера доступны следующие нестандартные атрибуты. Как правило, вам следует избегать их использования, если это не поможет.
| Атрибут | Описание |
|---|---|
автозамена | Разрешить или запретить автокоррекцию при редактировании этого поля ввода. Только Safari. |
mozactionhint | Строка, указывающая тип действия, которое будет выполняться, когда пользователь нажимает клавишу Enter или Return при редактировании поля; это используется для определения соответствующей метки для этой клавиши на виртуальной клавиатуре. Firefox только для Android. |
автозамена
Расширение Safari, атрибут автозамены — это строка, которая указывает, следует ли активировать автоматическое исправление, когда пользователь редактирует это поле.Допустимые значения:
-
на - Включить автоматическое исправление опечаток, а также обработку замен текста, если они настроены.
-
выкл - Отключить автоматическое исправление и замену текста.
mozactionhint
Расширение Mozilla, поддерживаемое Firefox для Android, которое дает подсказку о том, какое действие будет выполнено, если пользователь нажмет клавишу Enter или Return при редактировании поля.Эта информация используется, чтобы решить, какую метку использовать на клавише Enter на виртуальной клавиатуре.
Допустимые значения: перейти , выполнено , следующее , поиск и отправить . Используя эту подсказку, браузер решает, какую метку поставить на клавишу ввода.
Телефонные номера — это очень часто собираемый в Интернете тип данных. Например, при создании любого типа сайта регистрации или электронной коммерции вам, вероятно, потребуется спросить у пользователя номер телефона, будь то для деловых целей или для связи в чрезвычайных ситуациях.Учитывая, насколько часто вводятся телефонные номера, очень жаль, что универсальное решение для проверки номеров телефонов нецелесообразно.
К счастью, вы можете учесть требования своего сайта и самостоятельно реализовать соответствующий уровень проверки. См. Подробности в разделе «Валидация» ниже.
Пользовательские клавиатуры
Одним из основных преимуществ является то, что он заставляет мобильные браузеры отображать специальную клавиатуру для ввода телефонных номеров.Например, вот как выглядят клавиатуры на нескольких устройствах.
| Firefox для Android | WebKit iOS (Safari / Chrome / Firefox) |
|---|---|
Простой ввод тел.
В самом простом виде ввод тел. Может быть реализован следующим образом:
Здесь не происходит ничего волшебного.При отправке на сервер указанные выше входные данные будут представлены как, например, telNo = + 12125553151 .
Заполнители
Иногда бывает полезно предложить контекстную подсказку о том, какую форму должны принимать входные данные. Это может быть особенно важно, если в дизайне страницы нет описательных меток для каждого . Здесь на помощь приходят заполнители . Заполнитель — это значение, которое демонстрирует форму, которую должно принимать значение , путем представления примера допустимого значения, которое отображается внутри поля редактирования, когда значение элемента равно "" .После ввода данных в поле заполнитель исчезает; если поле пусто, заполнитель появляется снова.
Здесь у нас есть ввод tel с заполнителем 123-4567-8901 . Обратите внимание, как заполнитель исчезает и появляется снова, когда вы манипулируете содержимым поля редактирования.
Управление размером ввода
Вы можете контролировать не только физическую длину поля ввода, но также минимальную и максимальную длину, разрешенную для самого вводимого текста.
Физический размер входного элемента
Физическим размером поля ввода можно управлять с помощью атрибута size . С его помощью вы можете указать количество символов, которое поле ввода может отображать одновременно. В этом примере, например, поле редактирования tel имеет ширину 20 символов:
Длина значения элемента
Размер не связан с ограничением длины введенного телефонного номера.Вы можете указать минимальную длину в символах для введенного телефонного номера с помощью атрибута minlength ; аналогично используйте maxlength , чтобы установить максимальную длину введенного телефонного номера.
В приведенном ниже примере создается поле ввода телефонного номера шириной в 20 символов, в котором требуется, чтобы его содержимое было не короче 9 и не длиннее 14 символов.
Примечание : Приведенные выше атрибуты действительно влияют на проверку - входные данные в приведенном выше примере будут считаться недопустимыми, если длина значения меньше 9 или больше 14 символов.Большинство браузеров даже не позволяют вводить значение, превышающее максимальную длину.
Предоставление опций по умолчанию
Как всегда, вы можете указать значение по умолчанию для поля ввода tel , установив его значение Атрибут :
Предлагаемые значения
Сделав еще один шаг, вы можете предоставить список значений телефонных номеров по умолчанию, из которых пользователь может выбирать.Для этого используйте атрибут list . Это не ограничивает пользователя этими параметрами, но позволяет им быстрее выбирать часто используемые телефонные номера. Это также предлагает подсказки для автозаполнения . Атрибут списка определяет идентификатор элемента , который, в свою очередь, содержит один элемент для каждого предлагаемого значения; значение каждой опции является соответствующим предлагаемым значением для поля ввода телефонного номера. опции
При наличии элемента и его , браузер предложит указанные значения в качестве возможных значений для адреса электронной почты; обычно это отображается как всплывающее или раскрывающееся меню, содержащее предложения.Хотя конкретный пользовательский интерфейс может отличаться от одного браузера к другому, обычно щелчок в поле редактирования представляет раскрывающийся список предлагаемых адресов электронной почты. Затем, по мере того, как пользователь вводит текст, список корректируется, чтобы отображать только отфильтрованные совпадающие значения. Каждый набранный символ сужает список до тех пор, пока пользователь не сделает выбор или не введет настраиваемое значение.
Вот скриншот того, как это может выглядеть:
Как мы уже говорили ранее, довольно сложно предоставить универсальное решение для проверки телефонных номеров на стороне клиента.Так что мы можем сделать? Рассмотрим несколько вариантов.
Внимание! : проверка HTML-формы - это , а не , заменяющая серверные сценарии, которые гарантируют, что введенные данные имеют правильный формат, прежде чем они будут разрешены в базе данных. Для кого-то слишком легко внести изменения в HTML, которые позволят им обойти проверку или полностью удалить ее. Также есть возможность полностью обойти ваш HTML и отправить данные прямо на ваш сервер. Если ваш серверный код не может проверить данные, которые он получает, может произойти катастрофа, когда в вашу базу данных будут введены неправильно отформатированные данные (или данные, которые слишком большие, неправильного типа и т. Д.).
Создание телефонных номеров обязательными
Вы можете сделать так, чтобы пустой ввод был недопустимым и не передавался на сервер с использованием атрибута required . Например, давайте использовать этот HTML:
<форма>
И давайте включим следующий CSS, чтобы выделить допустимые записи галочкой, а недопустимые записи крестиком:
div {
нижнее поле: 10 пикселей;
положение: относительное;
}
input [type = "number"] {
ширина: 100 пикселей;
}
input + span {
отступ справа: 30 пикселей;
}
input: invalid + span: after {
позиция: абсолютная; содержание: '✖';
отступ слева: 5 пикселей;
цвет: # 8b0000;
}
input: valid + span: after {
позиция: абсолютная;
содержание: '✓';
отступ слева: 5 пикселей;
цвет: # 009000;
} Результат выглядит так:
Проверка шаблона
Если вы хотите еще больше ограничить вводимые числа, чтобы они также соответствовали определенному шаблону, вы можете использовать атрибут шаблон , который принимает в качестве своего значения регулярное выражение, которому должны соответствовать введенные значения.
В этом примере мы будем использовать тот же CSS, что и раньше, но наш HTML изменился, чтобы он выглядел так:
<форма>
Требуется
Обратите внимание, что введенное значение сообщается как недопустимое, если не совпадает с шаблоном xxx-xxx-xxxx; например, 41-323-421 не будет принят.Не будет и 800-MDN-ROCKS. Однако 865-555-6502 будет принят. Очевидно, что этот конкретный шаблон полезен только для определенных языков - в реальном приложении вам, вероятно, придется изменять используемый шаблон в зависимости от языкового стандарта пользователя.
В этом примере мы представляем простой интерфейс с элементом , который позволяет пользователю выбирать, в какой стране он находится, и набором из элементов, позволяющих им вводить каждая часть номера телефона; нет причин, по которым у вас не может быть нескольких входов tel .
Каждый вход имеет атрибут заполнитель , чтобы показать подсказку зрячим пользователям о том, что в него вводить, шаблон для обеспечения определенного количества символов для желаемого раздела и атрибут aria-label , содержащий подсказка, которую нужно зачитать пользователям программы чтения с экрана, о том, что в нее ввести.
<форма>
Введите свой номер телефона:
Требуется
Требуется
JavaScript относительно прост - он содержит обработчик события onchange , который при изменении значения обновляет шаблон элемента , заполнитель и aria-label чтобы соответствовать формату телефонных номеров в этой стране / территории.
var selectElem = document.querySelector («выбрать»);
var inputElems = document.querySelectorAll ("ввод");
selectElem.onchange = function () {
for (var i = 0; i Пример выглядит так:
Это интересная идея, которая показывает потенциальное решение проблемы работы с международными телефонными номерами.Конечно, вам придется расширить пример, чтобы предоставить правильный шаблон для потенциально каждой страны, что потребовало бы много работы, и все равно не было бы надежной гарантии, что пользователи будут правильно вводить свои номера.
Это заставляет задуматься, стоит ли возиться со всеми этими проблемами на стороне клиента, когда вы могли бы просто позволить пользователю вводить свой номер в любом формате, который они хотят на стороне клиента, а затем проверять и дезинфицировать его на сервере. Но этот выбор остается за вами.
Таблицы BCD загружаются только в браузере
Текущее состояние телефонных линий
Телефонные ссылки - вещь вещь. Подобно якорной ссылке, которую вы нажимаете, чтобы (возможно) перейти на другую страницу, это ссылки, которые вы нажимаете, чтобы позвонить по номеру на устройстве с поддержкой телефона. Они существуют уже довольно давно. Тем не менее, они вызывают у меня большое замешательство. Например, многие устройства автоматически распознают телефонные номера и связывают их за нас, но не всегда.
На мобильных устройствах достаточно веб-трафика и множество настольных приложений, способных совершать звонки, поэтому стоит узнать больше о телефонных связях.
Использование по умолчанию
У нас есть фрагмент телефонных ссылок на этом сайте, который существует с 2011 года:
1-562-867-5309 Это также работает с текстовыми ссылками:
Звонок по клику! tel: - это не столько функция, сколько протокол, почти так же, как http: и mailto: являются протоколами для функции тегов .Сама спецификация ничего не говорит об этом, хотя HMTL5 действительно обеспечивает поддержку пользовательских обработчиков протоколов, которые позволяют использовать такой протокол.
Вы, вероятно, задаетесь вопросом, почему tel: можно рассматривать как использование по умолчанию при отсутствии на него официальных спецификаций. Вы можете связать это с тем фактом, что это был предложенный стандарт еще в 2000 году и позже принятый iOS, что сделало его фактическим путем примерно к 2007 году. Существуют и другие телефонные протоколы (о которых мы поговорим. позже), но мы сосредоточимся на tel: , учитывая его относительную известность.
Поддержка браузера
Мы видим, что tel: всплывает как обработчик протокола для ссылок без официальной документации; а там, где нет документации, мы часто видим различия в поддержке и поведении браузеров. Это не означает, что браузеры не распознают сам тег . Вместо этого браузеры могут принимать разные решения о том, что делать при нажатии этой ссылки. Например, браузер может предположить, что необходимо открыть другое приложение, и вызовет диалоговое окно с вопросом, какое приложение использовать.В других случаях ссылка может вообще игнорироваться.
| Браузер | Это ссылка? | При нажатии… |
|---|---|---|
| Android | Есть | Запускает приложение для телефона |
| BlackBerry 9900 | Есть | Позвонил по телефону |
| Хром | Есть | Вызывает диалоговое окно, подтверждающее использование другого приложения |
| Кромка | Есть | Вызывает диалоговое окно, подтверждающее использование другого приложения |
| Internet Explorer 11 | Есть | Вызывает диалоговое окно, подтверждающее использование другого приложения |
| Internet Explorer 11 для мобильных устройств | Есть | Позвонил по телефону |
| iOS | Есть | Параметры триггеров для вызова, сообщения, копирования или добавления номера в приложение «Контакты» |
| Opera (OSX) | Есть | Вызывает диалоговое окно, подтверждающее использование другого приложения |
| Opera (Windows) | Есть | Вызывает диалоговое окно с ошибкой, которое не распознает протокол |
| Safari | Есть | запускает FaceTime |
Стилизация телефонных ссылок
Стилизация телефонных номеров похожа на любую другую ссылку.= "tel:"]: перед {
содержание: "\ 260e";
поле справа: 0,5em;
}
Альтернативные телефонные ссылки
Вы не поверите, но tel: - это не единственный способ позвонить по ссылке. В нашем распоряжении есть еще несколько пользовательских обработчиков телефонных протоколов.
-
callto:Точно так же, какtel:, но используется для совершения звонков через приложение Skype. - автоматически определено: Многие браузеры автоматически обнаруживают номер телефона в HTML и связывают его за вас - менять разметку не нужно.iOS, например, полностью сделает это, хотя, похоже, это не относится к Chrome на Android.
-
sms:Пропустите звонок и сразу переходите к текстовому сообщению. Кажется, что это намного меньше поддерживается, чемтел:среди браузеров, в том числе мобильных. -
факс:Вернитесь в будущее с факсимильными аппаратами. Опять пятнистая надежность.
Лучшие Лрактики
Забавно говорить о лучших практиках, когда дело касается чего-то без спецификаций.Спецификация дает краткое мнение об идее «позвонить по щелчку», но вот несколько вещей, которые следует учитывать при работе с телефонными номерами и ссылками.
Рассмотрим контекст
Телефонная ссылка может стать отличным призывом к действию, особенно на мобильных телефонах, где она уменьшает трение между контентом и звонком. В то же время телефонные ссылки можно рассматривать как помеху на рабочем столе, где телефонный звонок был бы невозможен, если бы на устройстве не было поддерживающего его приложения.
Одна из идей - создать класс специально для телефонных ссылок и попытаться показать или скрыть их на основе того, что мы знаем о браузере. Modernizr и медиа-запросы здесь удобны, хотя и совершенно неточны.
Используйте коды стран
Код страны не требуется, но может быть полезен для сайтов с международным трафиком. Коду страны может предшествовать + , но это тоже не обязательно.
1-562-867-5309 Поисковая оптимизация
Эксперты
SEO могут добавить к этому больше, чем я, но Google предлагает структурированный формат данных для местных предприятий, и его использование сделает телефонные ссылки более узнаваемыми для поисковых роботов, форматируя их на страницах результатов поиска таким образом, чтобы число более действенный.Дадли Стори дает отличный обзор на следующем примере:
Купальные костюмы Beach Bunny
Телефон:
850-648-4200
С другой стороны, желая, чтобы поисковые системы следили за телефонными ссылками, вы можете добавить rel = "nofollow" , чтобы препятствовать переходу по ссылкам и их индексации.Это может быть хорошей идеей для любой ссылки, не обозначенной как призыв к действию, поскольку веб-сканеры будут склонны пытаться перейти по ней в никуда.
1-562-867-5309 Отключение определения номера в iOS
Если вы планируете добавить телефонные ссылки в свою разметку, вы также можете рассмотреть возможность отключения iOS от автоматического определения телефонных номеров и переопределения ваших стилей. Добавьте следующий документ , чтобы отключить это:
Дополнительная литература
Как сделать номер телефона интерактивным: пошаговое руководство
Просмотр веб-страниц с мобильных устройств - новый стандарт.Помимо отзывчивых веб-сайтов, люди ожидают найти кнопки для звонков по нажатию. В этой статье вы узнаете, как сделать номер телефона интерактивным, используя два метода.
Без этой функции вашим посетителям пришлось бы копировать и вставлять номер телефона, что может оказаться утомительным занятием.
Сделайте номер телефона интерактивным с помощью HTML
Если вы знакомы с HTML, вы легко справитесь с этой задачей! Вы можете добавить интерактивный номер телефона на любой веб-сайт с помощью атрибута HTML href .Вот как это сделать:
1. В редакторе HTML начните код с .
2. Введите номер телефона в кавычки. Не отделяйте числа тире. Если вы это сделаете, это может не сработать. Перед номером укажите tel: .
3. Добавьте текст для телефонного номера. Введите его между > <.
Код должен выглядеть так:
Позвоните мне по телефону + 62-896-7062-55135
Сделайте номер телефона интерактивным в WordPress
Если вы вы не очень хорошо разбираетесь в кодировании и используете WordPress, вы можете использовать визуальный редактор.
Вы также можете включить ссылки на номера телефонов в WordPress, выполнив следующие действия:
1. Откройте страницу или сообщение, в котором указан номер телефона, в редакторе. Убедитесь, что вы выбрали визуальный редактор вместо текстового редактора. Для этого нажмите кнопку с тремя точками в правом верхнем углу и выберите «Визуальный редактор».
2. Выделите номер телефона и нажмите кнопку гиперссылки.
3. Введите номер и добавьте перед ним тел: . Как и в первом способе, тире не вставляйте.Нажмите на кнопку «Применить».
4. Обновить пост.
Вот как будет выглядеть результат:
Заключение
Наличие интерактивного номера телефона на вашем веб-сайте повысит вовлеченность на вашем сайте. К счастью, включить эту функцию очень просто.
Если вы хорошо разбираетесь в кодировании HTML, вы можете добавить небольшой фрагмент кода на свой сайт. Если вы пользователь WordPress, вы можете использовать редактор контента, чтобы сделать номер телефона интерактивным.
Легко, правда?
Нажмите для вызова | Основы Интернета | Разработчики Google
Пит - защитник разработчиков
На устройствах с функциями телефона упростите пользователям прямое подключение
с вами, просто нажав на номер телефона, более известный как звонок по нажатию.
TL; DR
- Оберните все номера телефонов в гиперссылки со схемой
tel:. - Всегда используйте международный формат набора.
Ссылка на телефонные номера для звонка по нажатию
Хотя многие современные мобильные браузеры автоматически определяют номера телефонов
и преобразовать их в ссылки, рекомендуется сделать это прямо в коде.
Пометив каждый номер телефона вручную, вы можете гарантировать, что номера телефонов всегда
включен для вызова по нажатию, и они будут стилизованы под ваш сайт.
Чтобы пометить номер телефона как ссылку, используйте схему тел: . Синтаксис:
простой:
NIST Телефонная служба в рабочее время
+1 (303) 499-7111
Ваш браузер отображает этот синтаксис следующим образом:
Телефонная служба NIST в рабочее время +1 (303) 499-7111
Нажмите, чтобы позвонить, пример
На большинстве устройств с телефонными возможностями пользователь получает
подтверждение перед набором номера, чтобы убедиться, что пользователь не
обманом заставили позвонить на дорогой междугородний или платный телефонный номер.Если устройство не поддерживает телефонные звонки, пользователям может быть представлен
меню, позволяющее выбрать способ обработки числа браузером.
Настольные браузеры, не поддерживающие голосовые вызовы, открываются по умолчанию.
приложение телефонии на компьютере; например Google Voice или Microsoft
Коммуникатор.
Использовать международный формат набора
Всегда указывайте номер телефона в международном формате:
знак плюса ( + ), код страны, код города и номер.Хотя не совсем
необходимо, рекомендуется отделить каждый сегмент числа символом
дефис (–) для облегчения чтения и лучшего автоматического определения.
Использование международного формата набора с дефисом гарантирует, что независимо от того, где
пользователь звонит, будь то несколько сотен метров или тысячи
километров, их звонок будет соединен.
Отключить автоопределение при необходимости
Современные мобильные браузеры автоматически определяют номера телефонов и включают
нажмите, чтобы позвонить.Mobile Safari автоматически преобразует телефонные номера в ссылки
со связанными стилями гиперссылок. Chrome для Android автоматически
обнаруживает телефонные номера и позволяет пользователям звонить по клику, но не переносит
номера телефонов в гиперссылках или применять какие-либо специальные стили.
Чтобы запретить Mobile Safari автоматически определять номера телефонов, добавьте
следующий метатег на вашу страницу:
Другие функции вызова по нажатию
Помимо схемы tel: , некоторые современные браузеры также поддерживают sms:
и ммс: схем, хотя поддержка не такая последовательная, и некоторые
такие функции, как настройка тела сообщения, не всегда работают.
Обратная связь
Была ли эта страница полезной?
Есть
Что было самым лучшим на этой странице?
Это помогло мне выполнить мои цели
Спасибо за ваш отзыв! Если у вас есть конкретные идеи, как улучшить эту страницу, пожалуйста,
создать проблему.
Там была информация, которая мне была нужна
Спасибо за ваш отзыв! Если у вас есть конкретные идеи, как улучшить эту страницу, пожалуйста,
создать проблему.
Имеет точную информацию
Спасибо за ваш отзыв! Если у вас есть конкретные идеи, как улучшить эту страницу, пожалуйста,
создать проблему.
Легко читалось
Спасибо за ваш отзыв! Если у вас есть конкретные идеи, как улучшить эту страницу, пожалуйста,
создать проблему.
Что-то еще
Спасибо за ваш отзыв!Если у вас есть конкретные идеи, как улучшить эту страницу, пожалуйста,
создать проблему.
№
Что было хуже всего на этой странице?
Это не помогло мне выполнить мои цели
Спасибо за ваш отзыв! Если у вас есть конкретные идеи, как улучшить эту страницу, пожалуйста,
создать проблему.
Отсутствовала необходимая мне информация
Спасибо за ваш отзыв!Если у вас есть конкретные идеи, как улучшить эту страницу, пожалуйста,
создать проблему.
Он имел неточную информацию
Спасибо за ваш отзыв! Если у вас есть конкретные идеи, как улучшить эту страницу, пожалуйста,
создать проблему.
Трудно было прочитать
Спасибо за ваш отзыв! Если у вас есть конкретные идеи, как улучшить эту страницу, пожалуйста,
создать проблему.
Что-то еще
Спасибо за ваш отзыв! Если у вас есть конкретные идеи, как улучшить эту страницу, пожалуйста,
создать проблему.
Как правильно использовать интерактивный номер телефона в формате HTML
В свое время мобильные устройства в основном использовались для звонков друзьям и родственникам. Однако те времена давно прошли, и с тех пор мы перешли к использованию наших iPhone и Android, чтобы делать все, от игры в Angry Birds до веб-серфинга.Тем не менее голосовые вызовы по-прежнему имеют свое место в мире. Вот почему вам нужен интерактивный номер телефона в формате HTML в электронных письмах.
Есть множество предприятий, которые все еще полагаются на телефонные звонки, чтобы заработать себе на жизнь - от тайских ресторанов на вынос до местных салонов красоты. Возможно, даже вы и ваши клиенты тоже попадаете в эту категорию.
Прочтите, чтобы узнать, как можно заставить своих подписчиков совершать звонки из электронного бюллетеня HTML, полученного в их настольных, веб- или мобильных почтовых клиентах.Предлагается пример информационного бюллетеня электронной почты в формате HTML (на фото), который вы можете загрузить, адаптировать и использовать, чтобы узнать больше об этой технике.
Как работает интерактивный номер телефона в формате HTML?
В создании ссылок для удобного звонка нет ничего нового. До того, как эти ссылки использовались в любом из вышеперечисленных, URL-адреса Skype были обычным явлением в Интернете. Skype - это программа, которую можно установить на компьютерах Windows и Mac, а также на телефоны iOS и Android. По состоянию на 2017 год Skype насчитывал в среднем 300 миллионов активных пользователей в месяц.
Эти методы можно адаптировать для использования в электронной почте HTML. Полученные ссылки можно настроить, что означает, что вы можете превратить номер телефона или имя пользователя Skype в смелый призыв к действию. Для демонстрации взгляните на образец шаблона (щелкните, чтобы просмотреть):
Кнопка «Позвонить:» отключена в большинстве браузеров, и это будет обсуждаться позже в этой статье.
Как сделать номер телефона интерактивным в формате HTML?
Когда вы изучаете, как сделать телефонные номера интерактивными в 2019 году, все сводится к тому, насколько вы квалифицированы в кодировании HTML.
Кодирование - это то, что сейчас преподается в школах как часть их обычной учебной программы. Однако так было не всегда, поэтому кодирование для многих может показаться довольно сложным.
Однако существует довольно много инструментов, помогающих упростить этот процесс. Например, такие веб-сайты, как Wix и WordPress, позволяют легко настраивать веб-сайты без каких-либо предварительных знаний в области программирования.
То же самое можно сказать и о маркетинговых инструментах. Здесь, в Campaign Monitor, например, мы позволяем клиентам получать доступ и редактировать HTML-код электронной почты, чтобы помочь им создавать интерактивные кампании электронной почты.Этот вариант требует знания кодирования HTML. Однако клиенты всегда могут воспользоваться нашим конструктором электронной почты, если у них нет опыта в этой области.
Как сделать ссылку «Нажмите, чтобы позвонить» с помощью HTML-кода?
Хотя есть и другие варианты для тех, кто неопытен в кодировании HTML, важно иметь базовое представление о том, как должны выглядеть ваши коды, прежде чем вы начнете над ним работать.
Один из основных HTML-кодов, с которым маркетологи по электронной почте захотят ознакомиться, - это сделать интерактивный номер телефона в своей электронной почте, новостной рассылке и других рекламных материалах.
Прежде чем подробно рассказать о кодировании, необходимом для таких вещей, как номера Skype и другой контент, мы рассмотрим базовый HTML-код, необходимый для создания интерактивного номера телефона.
Для этого откройте редактор HTML и выполните следующие действия в указанном порядке:
- Начните свой код с
- Запомните, где находятся кавычки, потому что теперь вы будете вводить номер телефона компании между кавычками. Обязательно введите его без тире и введите «тел:» перед тем, как начать набирать свой номер.Например:
.
- Затем вы добавите любой текст, на который хотите создать ссылку. Этот текст будет находиться между> <. Текст, который будет введен здесь, будет вашим призывом к действию (CTA), за которым снова будет указан ваш номер телефона. EX:> Позвоните нам по номеру + YOURPHONNUMBERHERE <
Вот как выглядит весь код после того, как вы все сложите:
Некоторые почтовые клиенты вызывают головную боль при кодировании
При тестировании информационных бюллетеней электронной почты на iPhone и в Gmail мы обнаружили, что оба почтовых клиента автоматически заключают телефонные номера в теги , как в следующем примере:
555-666-7777 Эти теги могут сильно раздражать дизайнеров электронной почты, поскольку эти «новые» ссылки tel: обычно выделяются жирным шрифтом, ярко-синим цветом, и их часто сложно стилизовать с помощью CSS.
Избавление от головной боли: привязка к телефонным номерам и именам пользователей Skype
Существует универсальное решение этой проблемы: предварительное добавление собственных тел: ссылок в HTML-код. Используя этот метод, вы также можете добавить ссылки на номера телефонов, где захотите. Например, это может быть ваш призыв к действию или строка «позвоните нам сейчас» в вашем экземпляре:
Чтобы заказать пиццу, позвоните нам прямо сейчас . То же самое можно сделать со ссылками на Skype:
Скайп нам по телефону 555-666-7777 .Не забудьте добавить abcpizza в свои контакты! Обратной стороной этого метода является то, что для обнаружения ссылок в почтовых клиентах мы не можем преобразовать их в ссылки отслеживания для использования в отчетах кампании Campaign Monitor. Чтобы отключить отслеживание специально для этих ссылок, мы используем атрибут cm_dontconvertlink:
Чтобы заказать пиццу, позвоните нам прямо сейчас . Однако не все почтовые клиенты умеют работать со ссылками по тел:Скайп должен быть на машине получателя для Skype: ссылки для работы. Имея это в виду, вот как выглядит служба поддержки в основных почтовых клиентах:
| Почтовые клиенты для настольных ПК | Тел .: Служба поддержки | Skype: Поддержка |
| Outlook 2007/2010 | № | Есть |
| Outlook 2003 | № | Есть |
| Apple Mail | № | Есть |
| Почта Windows Live | № | Есть |
| Thunderbird | № | Есть |
| Клиенты веб-почты | Тел .: Служба поддержки | Skype: Поддержка |
| Hotmail | № | № |
| Yahoo! Почта | № | Есть |
| Gmail | Есть | № |
| AOL | № | № |
| Мобильные почтовые клиенты | Тел .: Поддержка | Skype: Поддержка |
| iPhone | Есть | Есть |
| Android (Gmail) | Есть | № |
| Android (по умолчанию) | Есть | № |
| ОС BlackBerry 6 | Есть | № |
| Windows Mobile 7 | Есть | № |
Хотя tel: поддержка хороша для мобильных клиентов, она может быть ненадежной для настольных компьютеров и клиентов веб-почты.И наоборот, поддержка Skype: чрезвычайно успешна в клиентах для настольных ПК, но неэффективна в клиентах для мобильных устройств и веб-почты (если у вас не установлена веб-панель инструментов Skype).
Отключение тел .: ссылки в клиентах рабочего стола и веб-почты
Учитывая присущие проблемы с отображением ссылок tel: где угодно, кроме мобильных почтовых клиентов, лучший вариант - отключить их. Это можно сделать, вложив текст ссылки в элемент уровня блока (например, таблицу), заключив его в ссылку tel: link, а затем применив следующий CSS:
а.disable-link {
указатель-события: нет;
курсор: по умолчанию;
}
...
<таблица>
Звоните: + 1800-ABC-PIZZA
Ссылка tel: выше неактивна в Outlook, Apple Mail, Thunderbird и в большинстве комбинаций браузера / веб-почты. Тем не менее, Google Voice по-прежнему обрабатывает ссылки tel: даже с обходными путями, описанными выше.
В мобильных почтовых клиентах мы активируем ссылку с помощью запроса:
@media only screen and (max-device-width: 480px) {
a [class = "disable-link"] {
указатель-события: авто! важно;
курсор: авто! важно;
}
} Отлично сделано, если я так говорю.
Ваш шаблон для загрузки и настройки
Это не идеальное решение из-за отсутствия отслеживания и ограничений с tel: support.Однако, если ваш бизнес полагается на запросы по телефону, вы можете построить очень инновационные кампании на основе этой техники.
Большое спасибо vlanzoiz за вдохновение и раннее тестирование и Panic за то, что позволили мне снова использовать их дизайн. Если у вас есть какие-либо вопросы или комментарии по поводу телефонных звонков из информационных бюллетеней по электронной почте, мы будем рады услышать их в комментариях ниже.
Опять же, ниже приведен HTML-код для создания интерактивного номера телефона, который вы можете использовать и настраивать по своему усмотрению.
Заключение
Сама мысль о кодировании HTML может вызвать у некоторых мгновенную головную боль. Однако со всеми технологиями, доступными в 2019 году, этого не должно быть.
Благодаря редакторам HTML и программам, созданным для маркетологов, вставка кода HTML в ваши электронные письма, информационные бюллетени и другие маркетинговые материалы может быть простой задачей.
Кодирование
HTML может помочь вам вставить в свои рассылки по электронной почте следующее:
- Простые призывы к действию для потребителей
- Интерактивные номера телефонов
- Интерактивные адреса электронной почты, которые открываются прямо в конкретном почтовом приложении
- Интерактивные номера Skype
- Разрешить потребителям отправлять текстовые сообщения на заданный номер
Хотите вывести свои рассылки по электронной почте на новый уровень? С помощью конструктора электронной почты и редактора HTML Campaign Monitor добавление интерактивных номеров телефонов и других призывов к действию очень просто!
новый код - добавление номеров телефонов на веб-страницы с помощью HTML5 и микроданных
Традиционно телефонные номера размещались на веб-страницах в виде простой последовательности цифр, неотличимой от любого другого контента.Когда мобильные пользователи посещают сайты, они ожидают, что телефонные номера должны быть полезными, что приведет к прямому контакту.
Мы достигаем этого с помощью двух подходов: добавляя ссылку с протоколом tel и вставляя микроданные. Есть также несколько соображений, которые мы должны сделать для настольных приложений, особенно Skype и Internet Explorer.
Связывание телефонных номеров для мобильных устройств и приложений телефонии
Подобно добавлению ссылки mailto: вокруг адресов электронной почты на странице, номера телефонов связаны с протоколом tel :
Чтобы сделать заказ, позвоните 317-456-2564
iPhone, Android и другие мобильные устройства теперь распознают номер телефона; переход по ссылке вызовет телефонный звонок.
Следует помнить о нескольких вещах:
- Помните, что все веб-страницы являются международными; цифры, перечисленные после
tel, должны включать префикс международного набора, что позволит использовать номер из любого места. - Если страница просматривается в браузере настольного компьютера, нажатие на номер вызовет соответствующее приложение телефонии, такое как Skype, Google Voice или Microsoft Communicator, так же, как при использовании протокола
mailto:в ссылке появится сообщение приложение электронной почты. - Визуальные разделители не являются обязательными в спецификации, за исключением символа
+перед международным кодом вызова.
Не путайте значение tel с тем, как номер набирается на телефоне: большинство телефонных систем потребуют 00 перед международным кодом при наборе номера, но это не входит в значение tel . Например, чтобы указать номер телефона в Новой Зеландии:
Позвоните по телефону 445-2663 в Окленде, чтобы забронировать рейс.
В телефонный номер можно вставлять паузы для добавления добавочного номера:
Позвоните в службу поддержки по телефону 323-579-8328 доб.