Кликабельный номер телефона на сайте: как настроить и почему это важно

Вспомните, каково звонить в компанию, если телефон на сайте указан без ссылки, как обычный текст. Выделяешь номер, копируешь, закрываешь браузер, открываешь меню для набора номера, вставляешь цифры в поле, звонишь. Слишком сложно и долго. Особенно, если времени мало, а на сайте конкурента можно позвонить в один клик. Подобный недочет довольно легко исправить — добавить на сайт кликабельный номер. Мы написали детальную инструкцию, как это сделать.

Статья обновлена 01.02.2024.

Что такое кликабельный номер телефона

Кликабельный номер или click-to-call номер — это номер телефона на сайте, при нажатии которого сразу происходит вызов.

Эта опция предназначена специально для пользователей мобильных устройств. Но звонить на телефон через интернет, кликая по номеру, можно и с десктопной версии сайта, если на компьютере установлена специальная программа для звонков, например Ringostat Smart Phone.

«На дворе 21 век, мобильный трафик растет фантастическими темпами, все (ладно, почти все) компании обзавелись адаптивными версиями сайта. Но кликабельные номера до сих пор есть не у всех. Предприниматели просто не понимают, насколько важна эта функция. А ведь без нее бизнес теряет часть клиентов, даже не догадываясь об этом».

Евгений Заступ,
руководитель техподдержки Ringostat

Почему важно настроить кликабельные номера на мобильной версии сайта  

1. Люди, которые заходят на сайт с телефона, как правило, не хотят долго изучать ассортимент и сравнивать цены. Они уже знают, за чем пришли, и хотят купить это быстро. Они скорее позвонят, чем напишут в чат или в соцсеть.
2. Пользователи часто используют смартфоны в общественных местах, а там неудобно долго печатать текст или копировать, сохранять, набирать номера. Поэтому люди предпочитают простые и быстрые действия, такие как звонки, а не набор сообщений.
3. 46% людей никогда не купят у компании, если раньше столкнулись с негативным опытом использования мобильной версии сайта. А звонок с сайта — это тоже часть пользовательского опыта. 
4. Больше половины пользователей заходят в интернет с мобильных телефонов. Люди проверяют телефон около 58 раз в день, а в целом проводят за телефоном 3 часа 15 минут. И эти показатели будут расти — достаточно посмотреть на тенденции: 
   

Компаниям с сайтами без кликабельных click-to-call номеров специалисты по продвижению обязательно порекомендуют добавить такой функционал на сайт. Ведь удобство звонков напрямую влияет на конверсию.

Проверьте ваш сайт: можно ли с него звонить в один клик?

Возможно ваш сайт создавали разработчики, и вы не уверены, кликабелен ли номер телефона. Но это легко проверить. Откройте сайт на смартфоне и попытайтесь позвонить, нажав на номер.

Либо зайдите на сайт с компьютера и попробуйте кликнуть на номер телефона. Если номер в формате click-to-call, появится окошко с предложением выбрать программу для звонка:

Инструкция: как сделать номер телефона на сайте кликабельным

Вначале убедитесь, что у вас есть необходимые права доступа к коду сайта. Вы можете получить такой доступ к коду в конструкторе сайтов, в панели вебмастера или через FTP.

Откройте панель с кодом. Чтобы найти номер телефона в коде сайта, нажмите Ctrl+F. В появившееся окошко поиска введите несколько цифр номера телефона. Например, если номер телефона начинается с 8-916, то введите 8916. Вот так:

Некликабельный номер может выглядеть так:

<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>

Итак, превратим наш обыкновенный номер — в номер click-to-call.

Перейдите к строке с номером в коде сайта. Вам нужно будет добавить в код три элемента:

• тег  <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, то наш сервис подменяет и такие номера, сохраняя текст.

ВАЖНО. Если вы хотите подключить коллтрекинг, мы рекомендуем сначала сделать номера на сайте кликабельными.

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

Если у вас возникли вопросы или сложности при настройке номеров click-to-call по инструкции, обратитесь в нашу техподдержку. Наши специалисты помогут вам разобраться и настроить все наилучшим образом.