Показ иконки вместо номера

• Инструкции
• О системе
• Подключение
• Google Tag Manager
• Вопросы и ошибки
• Настройка Zoiper
• Отложенный показ
• Оптимизация Яндекс Директ
• Интеграции
• Яндекс Метрика
• Google Analytics
• Albato
• ApiX-Drive
• Bitrix24 CRM
• AmoCRM
• Webhooks / API
• Телефония и АТС
• Вся телефония
• Новофон
• Мегафон
• OnlinePBX
• Sipuni
• MCN Telecom
• МГТС
• ДОМ.РУ
• Гравител
• Энфорта
• ТТК Транстелеком
• Asterisk
• Zadarma
• Мобильные SIM-карты
• Конструкторы и CMS
• Тильда
• Битрикс24
• 1С Bitrix
• Joomla
• Другие
• Регионы
• Видео

Вариант 1

Данная иконка, вставлена фоном со следующим стилем:
<div class="phoneAllostat phoneAllostatMob" style="height: 40px; width: 40px; background: no-repeat; background-image: url(https://allostat.ru/img/icon-phone.png);">
<a href="tel:+7 (495) 000-00-00" ></a>
</div>
Под ней в ссылке a href="tel: находится аналитический номер, который виден в строке состояния, если навести на иконку курсор. Этот номер совпадает с аналитическим номером, который виден в шапке.

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

1. Добавить к разметке вашей иконки класс phoneAllostat phoneAllostatMob, так чтобы получилось class="phoneAllostat phoneAllostatMob"
2. Добавить внизу основного скрипта код:
   var phoneAllostatMob = document.querySelectorAll('.phoneAllostatMob')[0];
phoneAllostatMob.innerHTML = '<a href="tel:+7 (495) 000-00-00" style="font-size: 1px; color: transparent; padding: 25px 25px;"></a>';

где, при помощи querySelectorAll мы находим класс phoneAllostatMob, далее при помощи innerHTML вставляем ссылку a href="tel: с аналитическим номером.

• +7 (495) 000-00-00 - ваш основной (не аналитический) номер по умолчанию.
• font-size: 1px; - делает номер едва заметным.
• color: transparent; - делает номер бесцветным.
• padding: 25px 25px; - делает область вокруг номера кликабельной.

Две иконки на странице

Это нижняя иконка.

• Для второй иконки необходимо добавить внизу основного скрипта еще один код:
  var phoneAllostatMob = document.querySelectorAll('.phoneAllostatMob')[1];
phoneAllostatMob.innerHTML = '<a href="tel:+7 (495) 000-00-00" style="font-size: 1px; color: transparent; padding: 25px 25px;"></a>';

Вариант 2

Для того, чтобы на мобильных версиях сайта показывать иконку вместо аналитического номера, необходимо сделать аналитический номер едва заметным при помощи style="font-size: 1px;, а значок телефона расположить в фоне background: no-repeat; background-image: url(img/icon-phone.png);.

Пример дополнительной html-разметки, которая на месте текущего размещения номера добавляет фоном иконку, а номер делает едва заметным.

<div class="phoneAllostat phoneAllostatMob" style="height: 40px; width: 40px; background: no-repeat; background-image: url(https://allostat.ru/img/icon-phone.png);">
<a href="tel:+7 (495) 000-00-00" style="font-size: 1px; padding: 10px 35px;" ></a>
</div>

Ниже основного скрипта AlloStat размещаем дополнительный скрипт, который вставляет номер в ссылке "tel:"

<script type="application/javascript"> var phoneAllostatMob = document.querySelectorAll('.phoneAllostatMob')[0]; phoneAllostatMob.innerHTML = '<a href="tel:+7 (495) 000-00-00" style="font-size: 1px; padding: 10px 35px;"></a>'; </script>

где (495) 000-00-00 - ваш основной (не аналитический) номер по умолчанию