Создай лендинг бесплатно
Лендинг бесплатно
Как оформить ссылку на телефон при помощи html
В последние годы пользователи интернета предпочитают пользоваться сетью посредством телефона, что подтверждается статистикой — мировой мобильный трафик превышает десктопный. Чтобы избежать потери клиентов, рассмотрим как ссылка на телефон оформляется при помощи html.
Браузеры мобильных устройств способны автоматически делать кликабельный номер телефона, однако номер может быть записан разными способами, что может поставить браузер в тупик, а пользователь увидит просто цифры. Посетителю сайта придется запоминать номер либо переключаться между приложениями, чтобы набрать его. Давайте разбираться, каким образом сделать кликабельный телефонный номер средствами html.
Классический способ
В атрибуте href должно быть указано: протокол tel: и номер телефона. Для удобства мобильных пользователей используйте международный формат.
<a href="tel:+79150000000">Позвоните нам!</a>
Нажав такую ссылку, пользователь без проблем позвонит вам.
Можно добавить кликабельную html-ссылку на Skype:
<a href="skype:nick">Skype</a>
nick замените вашим логином программы Скайп.
Вот таким образом добавим html-ссылку для звонка со Skype на номер телефона:
<a href="callto:+79160000000">Позвонить нам с помощью Skype</a>
Для удобства посетителей посредством html и CSS мы можем выставлять определенные события:
a:hover {} — вид ссылки при наведении
a:link {} — непосещенные ссылки,
a:visited {} — посещенные ссылки
a:active {} — вид активной ссылки.
Для большей уникальности страницы используйте не просто цифры, но и номер телефона оформленный в виде изображения. Html позволит использовать любые цвета, тени, округления, анимацию — все зависит от вашей фантазии.
Вариант с картинкой
<a href="tel:+79050000000"><img src="button.png"></a>
img src="button.png" — путь к вашей картинке, на которой изображен номер телефона или слово "Позвонить".
Не забудьте заменить использованные в примерах цифры своим номером телефона.в правой части экрана вставьте код, нажмите "Принять"
Так как по умолчанию мобильные девайсы пытаются распознать номера телефонов иногда может возникнуть ситуация, когда аппарат принимает за номер большую цену, артикул или иную последовательность цифр. Отключим данную функцию посредством html метатега, который размещается в разделе <head>:
<meta name="format-detection" content="telephone=no">
Когда HTML не нужен
Номер телефона обычно вставляют в профиле Инстаграм. Однако одного номера может оказаться мало, к тому же часть пользователей предпочитает использовать для общения чат Viber, WhatsApp, Telegram. Каким образом это всё уместить? Выход из положения — сервис мультиссылок Hipolink. Здесь вы не только соберете все свои ссылки, но и получите готовые шаблоны лендинга, сайта-визитки и даже интернет-магазина. Доступна статистика о посетителях, которая позволит лучше взаимодействовать с клиентами. К моменту написания статьи сервисом пользуются больше 130 000 человек.
В чем преимущества Hipolink?
1. Простота создания и оформления красивой страницы
2. Настройка, оформление лендинга (60 готовых тем, создание уникального стиля)
3. Подключение дополнительных модулей (аналитика, метрика, прием платежей, CRM система, рекламная подписка и др.)
4. Квалифицированная круглосуточная поддержка.
Теперь вам не придется думать, что же предпочтительнее разместить в профиле Инстаграм — телефон, почту, мессенджер, ссылку на сайт. Плюс избавитесь от повторяющихся вопросов в Директе — "А как вам позвонить?", "Какая у вас почта?" и т.д.
На странице Хиполинк можно разместить исчерпывающую информацию:
- Ответы на частые вопросы
- Переход в Телеграм, Ватсапп, Вайбер
- Перенаправление в социальные сети
- Каталог товаров и услуг
- Формы заказа и оплаты
Создание мультиссылки займет считанные минуты, специальных знаний не требуется. Не придется приобретать домен и хостинг, вникать в сложности языков программирования, оформления и дизайна.
Для оформления номера в Хиполинк откройте конструктор, нажмите "Добавить новый блок", выберите "ссылки". В появившемся справа блоке нажмите "Телефон", заполните поля, нажмите "Применить".
Чтобы использовать приведенные выше примеры выберите HTML блок в панели редактирования, в правой части экрана вставьте код, нажмите "Принять". Для вставки следующего кода повторите операцию.