Что бы сделать номер телефона ссылкой, по нажатию на которую будет происходить вызов (с мобильного устройства) и переход в приложение «звонилки» с десктопа, достаточно вставить в HTML код, следующую конструкцию:
<a href="tel:+79090010901">+7 (909)001-09-01</a>Пример как это выглядит ссылка на телефон на сайте:
+7 (909)001-09-01
Теперь разберемся в написаном
Конструкция <a href=»tel:+79090010901″> …<a> говорит браузеру, о том что содержимое которое находится внутри тега «a» (<a href…>…</a>) представляет из себя ссылку, которая ведет на адрес, в нашем случае адресом ссылки является телефон «tel:+79090010901». Все, что находится внутри тега «a» будет кликабельным и отображаться на странице сайта. Мы можем написать любое содержимое, при клике на которое состоится переход на функцию вызова.
Пример
<a href="tel:+79090010901">Нажмите что бы позвонить</a>Нажмите что бы позвонить
Обратите внимание чтобы сделать номер телефона ссылкой, наполняя текст в визуальном редакторе, как на картинке ниже,
необходимо проделать следующее:
Выделяем необходимы необходимый текст, при нажатии на который будет происходить звонок инажимаем на кнопку «вставить/изменить ссылку»
вводим в поле, конструкцию «tel:88000090807» (без кавычек)
Результатом будет:
Выделяем необходимый нам текст
Таким же образом возможно сделать и другие ссылки:
<a href=»mailto:…»>Наше содержимое</a> – ссылка на e-mail адрес;
<a href=»callto:…»>Наше содержимое</a> – звонок по Skype;
<a href=»sms:…»>Наше содержимое</a> – послать смс сообщение;
Инструкция по ссылкам на Телеграм и WhatsApp будет в отдельных постах, так как у нее есть дополнительные возможности.
link::Как сделать ссылку с сайта в телеграм (материал уже готовится)
link::Как сделать ссылку с сайта в whatsapp (материал уже готовится)
В последние годы пользователи интернета предпочитают пользоваться сетью посредством телефона, что подтверждается статистикой — мировой мобильный трафик превышает десктопный. Чтобы избежать потери клиентов, рассмотрим как ссылка на телефон оформляется при помощи 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 блок в панели редактирования, в правой части экрана вставьте код, нажмите «Принять». Для вставки следующего кода повторите операцию.
Приветствую!
Подскажите, как конвертировать цифры номера телефона, на лету, который выводится на странице HTML — в картинку?
Чтобы на странице сайта не было цифр номера телефона.
Например, есть функция imagettftext(), которая создает на лету картинку из номера телефона.
Есть переменная, которая выводит номер телефона на странице:
$phone = 8-999-222-22-33
На на странице всё-равно выводится номер телефона в ссылке, например src=»/index?tnum=8-999-222-22-33″.
Мне нужно, чтобы в ссылке было например src=»img-phone.png». Чтобы номера телефона вообще не было на странице.
Как можно это сделать?
-
Вопрос заданболее года назад
-
102 просмотра
Вот что работает (нагуглил):
<?php
$path = '/index?tnum=8-999-222-22-33';
$type = pathinfo($path, PATHINFO_EXTENSION);
$data = file_get_contents($path);
$base64 = 'data:image/' . $type . ';base64,' . base64_encode($data);
echo "<img src="$base64" alt="" />";
?>Теперь номер телефон спрятан в PHP и выводится в HTML только картинка.
Пригласить эксперта
-
Показать ещё
Загружается…
15 февр. 2023, в 00:26
35000 руб./за проект
15 февр. 2023, в 00:11
1000 руб./в час
14 февр. 2023, в 23:55
80000 руб./за проект
Минуточку внимания
Когда пользователь может в один клик по номеру телефона сделать звонок, это в плюс и ему, и вам. Он тратит минимум усилий и времени, чтобы вам дозвониться, а вы получаете +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. В Яндекс.Метрике не так давно появился новый тип цели – «Клик по номеру телефона». Достаточно указать нужные параметры, и данные о звонках будут поступать в Метрику:
Чтобы всё работало, важно указать номер в точности такой же, какой указан в коде сайта. Лучше всего скопировать адрес ссылки прямо с сайта. Для этого:
- Кликните правой кнопкой мыши по номеру на сайте и нажмите в меню «Просмотреть код»;
- В открывшейся консоли разработчика вы увидите нужную ссылку с номером;
- Скопируйте её и вставьте в параметрах цели.
Данные по кликам на номер телефона появятся в отчете «Конверсии» уже через несколько минут после создания цели.
Хотите тоже написать статью для читателей Yagla? Если вам есть что рассказать про маркетинг, аналитику, бизнес, управление, карьеру для новичков, маркетологов и предпринимателей. Тогда заведите себе блог на Yagla прямо сейчас и пишите статьи. Это бесплатно и просто
#1
Отправлено 08 Ноябрь 2014 — 16:56
Как поменять номер телефона на картинку с номером телефона на шапке сайта , и иконкой , на которой изображен телефон
- Наверх
#2
batta
batta
- ГородНижний Новгород
Отправлено 08 Ноябрь 2014 — 17:06
Deadbeats (08 Ноябрь 2014 — 16:56) писал:
Как поменять номер телефона на картинку с номером телефона на шапке сайта , и иконкой , на которой изображен телефон
Здравствуйте.
В style.css
.phone{margin:0 auto;width:300px;}
измените на
.phone{margin:0 auto;width:300px;background: url('{ASSETS_IMAGES_PATH}###');}
Вставьте своё название вместо ###
- Наверх
#3
Deadbeats
Отправлено 08 Ноябрь 2014 — 17:24
batta (08 Ноябрь 2014 — 17:06) писал:
Здравствуйте.
В style.css
.phone{margin:0 auto;width:300px;}
измените на
.phone{margin:0 auto;width:300px;background: url('{ASSETS_IMAGES_PATH}###');}
Вставьте своё название вместо ###
Сделал, но не поменялось ничего
Аккаунт SL-270319
S SL-270319
- Наверх
#4
batta
batta
- ГородНижний Новгород
Отправлено 08 Ноябрь 2014 — 17:35
Deadbeats (08 Ноябрь 2014 — 17:24) писал:
Сделал, но не поменялось ничего
Аккаунт SL-270319
S SL-270319
Вы не загрузили картинку в редактор шаблонов через кнопочку добавить файл, название у этой картинки должно быть nomer.png
- Наверх
#5
Deadbeats
Отправлено 08 Ноябрь 2014 — 18:03
batta (08 Ноябрь 2014 — 17:35) писал:
Вы не загрузили картинку в редактор шаблонов через кнопочку добавить файл, название у этой картинки должно быть nomer.png
Да, спасибо. Теперь загрузил, но все равно картинка не появляется
- Наверх
#6
MikDark
MikDark
-
- Модераторы
-
- 6 464 сообщений
Активный участник
Отправлено 08 Ноябрь 2014 — 19:51
Deadbeats (08 Ноябрь 2014 — 18:03) писал:
Да, спасибо. Теперь загрузил, но все равно картинка не появляется
В style.css ищем код:
.phone span {
display: block;
font-size: 20px;
font-weight: bold;
line-height: 120%;
}
и меняем на:
.phone span {
display: none;
font-size: 20px;
font-weight: bold;
line-height: 120%;
}
Далее в коде, который в сообщениях выше меняем
width:300px;
на
width:137px;height:25px;
- Наверх
Если на мобильной версии вашего сайта номер телефона указан в виде обычного текста — вы теряете клиентов.
В статье объясним, как отсутствие кликабельного номера влияет на конверсию, зачем вообще нужен кликабельный номер и как его установить на сайт.
Реклама: 2VtzquY3wEz
Читайте также: ТОП-10 лучших конструкторов сайтов
Зачем нужен кликабельный номер на сайте
Объясняем, почему из-за текстового номера часть клиентов отваливается.
Пользователь заходит с устройства на мобильную версию сайта и видит контакт для связи. В нашем случае — номер телефона. Чтобы позвонить ему нужно скопировать номер, свернуть браузер с сайтом, перейти в режим набора, вставить, нажать на кнопку вызова. Или переписать на листочек, а потом набрать номер в свободное время (но человек может передумать к тому времени). Или нужно запоминать номер, а потом вводить его вручную. Если забыли цифру — нужно возвращаться на сайт, опять запоминать, потом опять сворачивать браузер и так по кругу. В среднем получается около 5 действий и больше. Представьте, если человеку нужно совершить несколько таких звонков.
С кликабельным номером пользователю нужно всего 3 действия — нажать на номер, выбрать способ звонка (через телефон или мессенджер), затем нажать кнопку вызова. Чем меньше действий, тем выше вероятность, что пользователь все-таки совершит звонок, а не отвалится на середине процесса.
Это интересно: 50 способов увеличить объемы продаж
Как установить кликабельный номер телефона на сайт — инструкция
Как сделать так, чтобы вам могли позвонить в один клик:
Способ #1. Через html-код
Если есть доступ к коду, то через изменения в нем можно сделать номер телефона кликабельным.
Текстовый номер телефона (то есть некликабельный) может выглядеть по-разному:
- Если это просто номер:
<span>+7(111)111-11-11</span>
- Если присвоен класс через CSS стили, то код может выглядеть так:
<p class=»phone”>+7(111)111-11-11</p>
- Если к номеру телефона применялись стили оформления, например, цвет, шрифт, выравнивание, код, скорее всего, будет таким:
<div id=»number» class=»phone mobile text num» style=»color: #1f21ff; text-align: center» name=»phone_number»>+7(111)111-11-11</p>
Чтобы сделать номер кликабельным в код нужно добавить следующие элементы:
- тег <a>…</a> (отвечает за возможность добавить гиперссылку в текст);
- атрибут href=”” (отвечает за перенаправление по ссылке, ставится внутри предыдущего тега вместо трех точек);
- параметр tel: (отвечает за вызов номера по клику, после двоеточия нужно указать номер телефона без пробелов);
То есть, для первого варианта (просто текстовый номер) конечный код будет выглядеть так:
<span>
<a href=”tel:+7(111)111-11-11”>+7(111)111-11-11</a>
</span>
Первый номер телефона — это ссылка, второй — как номер отображается на сайте. Вместо номера телефона на сайте может отображаться призыв сделать звонок, тогда код выглядит так:
<span>
<a href=”tel:+7(111)111-11-11”>Позвоните нам</a>
</span>
Если в коде был прописан класс (пример #2), то конечный кликабельный код с добавлением элементов выглядит следующим образом:
<p class=»phone”>
<a href=”tel:+7(111)111-11-11”>+7(111)111-11-11</a>
</p>
Третий номер (с применением шрифта, цвета, выравнивания), соответственно, выглядит так:
<div id=»number» class=»phone mobile text num» style=»color: #1ff1ff; text-align: center» name=»phone_number»>
<a href=”tel:+7(111)111-11-11”>+7(111)111-11-11</a>
</p>
P.S. Лучше, чтобы к номеру телефона были применены стили через CSS, потому что если просто сделать кликабельный текст (самый простой первый вариант), то он будет выделен синим цветом и с подчеркиванием, как обычная гиперссылка. Визуально выглядит непривлекательно.
Способ #2. Если сайт сделан на CMS или конструкторе
Если у вас сайт на конструкторе, то телефон делается кликабельным через применение гиперссылки к номеру телефона.
Возьмем к примеру, конструктор Тильда. Телефон обычно указывают в хедере, футере, меню сайта или на отдельной странице с контактами. Но мы покажем на примере обычного текстового блока — остальное делается по аналогии.
Вот у нас на странице блок с текстом, где указан номер телефона. Нужно выделить номер — появляется меню редактирования текста. В нем кликаем на инструмент добавления ссылок.
В поле «Укажите ссылку» прописываем tel:+71111111111. Номер телефона должен быть указан без пробела, кавычек и точек.
Также можно настроить цвет и стиль ссылки — это плюс, так как не нужно морочиться с CSS стилями. Кстати, цвет и стиль ссылок можно задать заранее при создании лендинга и тогда не надо будет каждый раз настраивать их вручную.
Жмем «Применить» и получаем кликабельный номер телефона.
Если сайт на Wix, телефон настраивается похожим образом, с одним отличием. Когда выделяем текст и жмем на инструмент ссылки, появляется дополнительное меню, где можно выбрать, куда ведет ссылка.
В этом меню выбираем пункт «Номер телефона». Телефон указываем в формате +7(111)111-11-11.
Если сайт на WordPress, кроме изменения кода или добавления гиперссылки к тексту, можно использовать сторонние плагины. Например, бесплатный плагин Call Now Button. Он добавляет заметную цветную кнопку с иконкой телефона и призывом позвонить. Все, что нужно — установить плагин в Вордпресс, указать в настройках номер телефона, цвет кнопки и ее местоположение на сайте.
Способ #3. Через сервис коллтрекинга
Современные сервисы коллтрекинга используют функцию подмены номеров. И чаще всего номерам присваиваются атрибуты (классы). Например, у коллтрекинга Callibri это class=”callibri_phone» и class=»phone».
В этом коллтрекинге, если настроена автоподмена номера, ссылка будет иметь вид:
<p class=»phone”><a class=”callibri_phone”href=”tel:+71111111111”>+7(111)111-11-11</a></p>
Важно: у сервисов коллтрекинга нужно уточнять код в инструкциях сервиса или у техподдержки. Потому что у них прописываются свои классы, могут меняться настройки. У каждого сервиса коллтрекинга будут свои ссылки.
Как сделать кликабельный номер WhatsApp, Viber, Skype и Телеграм
Кликабельный телефон для мессенджеров делается через html-код, как мы описывали в способе #1 данной статьи. Отличается только сама гиперссылка.
Для WhatsApp:
<a href=”https://wa.me/71111111111”>+7(111)111-11-11</a>
Номер телефона в самой ссылке (в кавычках) указываем без скобок, пробелов и дефисов.
Для Viber:
<a title=»Viber» href=»viber://add?number=71111111111″>Viber</a>
Для Skype:
<a href=»skype:skype_user?call»>Набрать по скайпу!</a>
skype_user — это логин в скайпе. Параметр call позволяет сразу начать вызов, если его не добавлять в ссылку, то просто откроется профиль.
Если хотите, чтобы при клике по номеру скайпа автоматически открывался диалог, то вместо параметра call добавляем chat, получается:
<a href=»skype:skype_user?chat»>Написать в скайп!</a>
Для Телеграм:
Можно добавить в текст короткую гиперссылку вида:
https://t.me/login
Ссылку можно найти в настройках аккаунта Телеграм. При клике на ссылку откроется диалог с пользователям, там же можно позвонить.
Статья в тему: Как добавить ссылку на Вотсап в Инстаграм
Примеры оформления кликабельных номеров
Телефон на сайте сервиса коллтрекинга Callibri. Тут его еще и подчеркнули для наглядности.
Кликабельный номер на сайте Тинькофф Банка. Визуально номер телефона никак не выделен, но при клике по нему можно совершить звонок.
Книжный магазин «Читай-город» — номер указан на сайте отдельным пунктом меню, вообще визуально не отличается от остальных пунктов.
Заключение
Кликабельный номер телефона позволяет посетителям сайта позвонить в один клик. Без лишних движений. Эта экономит время и дает положительный опыт взаимодействия с сайтом. В итоге кликабельный номер способен повысить конверсию сайта. Мелочь, а работает.
Полезные ссылки:
- SSL-сертификат для сайта
- 10 курсов для веб-разработчиков
- Как сделать лид-магнит
- 27 способов удержать пользователя на сайте
Казалось бы, такой очевидный вопрос, на который ответ больше чем ясен. Но это только на первый взгляд: везде есть свои подводные камни. К примеру, для мессенджеров ссылка формируется немного иначе, к ссылке на звонок с телефона приписывается приставка tel и так дальше.
С этого небольшого обзора узнаем, как сделать ссылку на телефон кликабельной (активной), также сделаем активную ссылку на почту и на все популярные мессенджеры: Viber, Skype, WhatsApp, Telegram, ICQ. Разберем каждую в отдельности, а в конце все объединим в один блок и сделаем оформление, чтоб все красиво было.
Активная ссылка телефона на сайте
Для того чтобы на сайте номер телефона при нажатии срабатывал как активный вызов, нужно в атрибуте href прописать значение tel. Ну не совсем сразу будет идти вызов, а появится окно с запросом, каким приложением открыть tel. По сути, это обычный тег ссылки, а значит, вместо текста или самого номера, может быть, картинка, иконка и прочие.
<a class="phone-but" href="tel:+12345678912">Позвонить нам</a> <!-- Пример с картинкой --> <a class="phone-but" href="tel:+12345678912"><img src="img/phone.png" alt="номер телефона"></a>
Пример: Позвонить нам
Активная ссылка для отправки писем по email
Здесь аналогичная ситуация, то есть все остается как есть, но в атрибуте ссылки прописываем немного другое значение. При нажатии на такую ссылку откроется модельное окно, в котором вас попросят выбрать приложение для открытия ссылки mailto.
Плюс ко всему к ссылке емейл можно задать параметры, а именно, тему письма, текст письма. Таким образом, будет автоматически заполнено поле формы.
<a class="email-but" href="mailto:moypochta@gmail.com">Задать вопрос</a> <!-- Пример с автозаполнением темы письма и сообщение --> <a class="email-but" href="mailto:moypochta@gmail.com?subject=Спасибо за статью&body=Здравствуйте! Статья для меня была полезной">Написать на почту</a>
Пример: Написать на почту
Активная ссылка на Viber на сайт
Теперь начнем работу с самыми популярными приложениями для общения, связи или, другими словами, мессенджерами. Для Viber есть разный формат ссылок для разных устройств. То есть для ПК один вид, для телефонов другой. Это очень неудобно. Но есть универсальная ссылка, которая будет работать на всех устройствах. Только помните, что на устройстве должно быть установлено приложение Viber, иначе при нажатии на такую ссылку ничего не будет происходить.
<a class="viber-but" href="viber://chat?number=%2B75555555559">Написать по Viber</a>
Пример: Написать по Viber
Активная ссылка на WhatsApp на сайт
Такую ссылку можно получить в самом приложении в своем профиле. Но это лишняя «возня», так как ссылка всегда одинаковая, за исключением номера телефона. Поэтому вам всего лишь нужно изменить номер и можете смело использовать эту ссылку на WhatsApp на своем сайте.
<a class="whats-but" href="https://api.whatsapp.com/send?phone=77788899965">Написать по WhatsApp </a>
Пример: Написать по WhatsApp
Активная ссылка на Telegram на сайт
С ссылкой на Telegram особо никаких сложностей нет. Просто подставляется ник пользователя и ссылка готова. Но есть один небольшой нюанс, в основном в РФ. Ссылки могут блокировать, так как в России телеграм запрещён. Для этого есть разные способы обхода. К примеру, через сервис teleg.run сгенерировать ссылку или подобный сервис. Перенаправление будет происходить через переадресацию. В таком плане блокировок быть не должно.
<a class="teleg-but" href="https://t.me/username">Написать по Telegram</a>
Пример: Написать по Telegram
Активная ссылка на Skype на сайт
Ссылка для Скайпа похожа на другие мессенджеры, только со своими приставками. Для примера приведу два варианта: ссылка на звонок и ссылка на чат. Они чаще всего используются на сайте. Ещё можно делать ссылки на конференции, на мультичат и т.д. Но это немного не то, что нужно для связи.
<!-- ссылка на звонок --> <a class="skype-but" href="skype:username?call">Позвонить по Skype</a> <!-- ссылка на чат --> <a class="skype-but" href="skype:username?chat">Написать по Skype</a>
Пример: Написать по Skype
Активная ссылка на ICQ на сайт
Для сервиса ICQ также есть ссылка, при нажатии на которую будет добавлять контакт в ваш список контактов. Это мессенджер уже стал не столь популярным, но все им еще многие пользуются. Скорей всего те, кто к нему привык.
<a class="icq-but" href="icq:999999999">Добавить контакт ICQ</a>
Пример: Добавить контакт ICQ
Активные кнопки на мессенджеры
Демо
Как говорилось в начале обзора, объединяем все ссылки в один блок в виде веб-кнопок. В качестве иконок использовался шрифт Font Awesome.
<div class="social-buttons">
<a class="social-button skype-but" href="skype:username?chat">
<i class="fa fa-skype" aria-hidden="true"></i>
</a>
<a class="social-button whats-but" href="https://api.whatsapp.com/send?phone=77788899965">
<i class="fa fa-whatsapp"></i>
</a>
<a class="social-button teleg-but" href="https://t.me/username">
<i class="fa fa-telegram" aria-hidden="true"></i>
</a>
<a class="social-button icq-but" href="icq:999999999">
<i class="fa fa-asterisk" aria-hidden="true"></i>
</a>
<a class="social-button viber-but" href="viber://chat?number=%2B75555555559">
<i class="fa fa-phone-square" aria-hidden="true"></i>
</a>
<a class="social-button email-but" href="mailto:moypochta@gmail.com?subject=Спасибо за статью&body=Здравствуйте! Статья для меня была полезной">
<i class="fa fa-envelope"></i>
</a>
<a class="social-button phone-but" href="tel:+12345678912_">
<i class="fa fa-phone" aria-hidden="true"></i>
</a>
</div>
.social-buttons {
height: 90px;
}
.social-button {
display: inline-block;
background-color: #fff;
width: 50px;
height: 50px;
line-height: 50px;
margin: 0 3px;
text-align: center;
position: relative;
overflow: hidden;
opacity: .99;
border-radius: 28%;
box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.05);
-webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-button:before {
content: '';
background-color: #000;
width: 120%;
height: 120%;
position: absolute;
top: 90%;
left: -110%;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-button .fa {
font-size: 28px;
vertical-align: middle;
-webkit-transform: scale(0.8);
transform: scale(0.8);
-webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-button.skype-but:before {
background-color: #00A3E7;
}
.social-button.skype-but .fa {
color: #00A3E7;
}
.social-button.whats-but:before {
background-color: #4dc247;
}
.social-button.whats-but .fa {
color: #4dc247;
}
.social-button.email-but:before {
background-color: #ff6600;
}
.social-button.email-but .fa {
color: #ff6600;
}
.social-button.phone-but:before {
background-color: #000;
}
.social-button.phone-but .fa {
color: #000;
}
.social-button.teleg-but:before {
background-color: #31A9DD;
}
.social-button.teleg-but .fa {
color: #31A9DD;
}
.social-button.icq-but:before {
background-color: #24FF00;
}
.social-button.icq-but .fa {
color: #24FF00;
}
.social-button.viber-but:before {
background-color: #7B519C;
}
.social-button.viber-but .fa {
color: #7B519C;
}
.social-button:focus:before, .social-button:hover:before {
top: -10%;
left: -10%;
}
.social-button:focus .fa, .social-button:hover .fa {
color: #fff;
-webkit-transform: scale(1);
transform: scale(1);
}