Закреплённая панель связи на мобильном: звонок и мессенджер всегда под пальцем

Откройте свой сайт на телефоне и пролистайте страницу вниз. Где в этот момент находится кнопка звонка? Если она осталась вверху страницы, а вы уже читаете описание услуги или прайс, посетителю придётся возвращаться наверх, искать меню и только потом звонить. Большинство людей этого не делают. Они закрывают сайт и открывают следующий. Закреплённая панель связи решает эту проблему просто: внизу экрана всегда видны две-три кнопки, звонок и мессенджер, и человек может обратиться в любой момент, не прерывая чтение. Разберём, как её сделать, чтобы она увеличивала число заявок и не раздражала.

Почему именно панель внизу экрана

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

Второй довод: решение позвонить или написать возникает не на главной странице, а в процессе чтения. Человек читает про услугу, смотрит цены, видит, что подходит, и именно в этот момент у него появляется готовность обратиться. Если способ связи в этот момент далеко, готовность остывает. Закреплённая панель сохраняет этот момент, потому что кнопка всегда под пальцем.

Третий довод связан с тем, откуда приходят посетители. Люди, которые находят компанию в Яндекс Картах или 2ГИС, открывают сайт на телефоне, часто по дороге или в процессе поиска ближайшего варианта. Им нужен быстрый контакт, а не подробное чтение. Для таких посетителей панель связи это главный элемент страницы.

Что разместить на панели

Не пытайтесь вместить всё. Панель из шести кнопок превращается в ряд крошечных значков, и в них сложно попасть пальцем. Достаточно двух или трёх. Первая кнопка это звонок: ссылка для звонка с вашим номером, нажатие запускает вызов. Вторая это мессенджер, самый популярный у ваших клиентов: Телеграм, Макс или ВКонтакте. Третья по необходимости: «Заказать звонок» с коротким окном формы, «Рассчитать стоимость», «Записаться» или «Маршрут» для бизнеса с офлайн-адресом.

Выбор мессенджера зависит от аудитории. Если клиенты в основном молодые и привыкли к Телеграм, ставьте его. Если у вас корпоративная аудитория, подойдёт Макс. Если клиенты общаются в ВКонтакте, добавьте кнопку сообщества. Посмотрите, куда сейчас пишут вам чаще всего, и поставьте этот канал первым. Не нужно вешать на панель все мессенджеры сразу: выбор усложняет решение, а лишняя кнопка забирает нажатия у главной.

Подписи на кнопках должны быть понятными без иконок. Слово «Позвонить» яснее, чем трубка, а слово «Написать» яснее, чем бумажный самолётик. Иконка плюс подпись это оптимальное сочетание. Если места мало, оставьте иконку и короткую подпись под ней.

Размеры, цвета и расположение

Высота панели обычно составляет от пятидесяти до шестидесяти пикселей. Каждая кнопка должна иметь область нажатия не меньше сорока пикселей по короткой стороне, иначе пальцем будут попадать мимо. Расстояние между кнопками делайте достаточным, чтобы нажатие не задевало соседнюю. Проверьте на реальном телефоне, а не только в окне браузера на компьютере: ощущение пальца нельзя заменить мышью.

Цвет панели должен выделяться на фоне страницы, но оставаться в фирменной палитре. Основную кнопку, например звонок, выделите ярче, вторичные сделайте спокойнее. Если сайт в целом светлый, панель может быть тёмной или цветной, и наоборот. Контраст текста с фоном должен быть высоким, чтобы кнопки читались и на солнце.

Позаботьтесь о том, чтобы панель не перекрывала содержимое. Добавьте внизу страницы отступ, равный высоте панели, иначе последние строки и подвал сайта окажутся под ней. Учтите также системные элементы телефона: у некоторых моделей внизу есть полоса жестов, и панель должна учитывать её высоту, чтобы кнопки не оказались в зоне случайных касаний. Если на странице есть форма с клавиатурой, панель должна скрываться при появлении клавиатуры, иначе она закроет поля ввода.

Когда панель показывать, а когда прятать

Постоянно закреплённая панель с первой секунды бывает избыточной: человек ещё не прочитал, чем вы занимаетесь, а ему уже предлагают позвонить. Хороший вариант: показывать панель сразу на страницах с высоким намерением, таких как страница услуги с ценами, страница контактов и страница акции, а на главной и в статьях блога показывать после небольшой прокрутки, примерно после первого экрана. Так панель не мешает первому знакомству и появляется, когда человек уже вовлечён.

Ещё один приём: при прокрутке вниз панель остаётся на месте, а при прокрутке вверх может скрываться, освобождая место для чтения. Но делайте это аккуратно: если кнопки пропадают в момент, когда человек решил позвонить, вы потеряли обращение. Чаще надёжнее оставить панель неподвижной и компактной.

Не показывайте панель на компьютерах. На большом экране она выглядит чужеродно, а возможности связи там обеспечивает шапка сайта. Панель нужна только на телефонах и, возможно, на небольших планшетах. Проверьте, как сайт ведёт себя при повороте телефона в горизонтальное положение: панель не должна занимать треть экрана.

И обязательно уберите панель на страницах, где она мешает: на страницах оформления заказа, в личном кабинете, на страницах с длинными формами. Там у человека уже есть своё действие, и лишние кнопки отвлекают от завершения.

Технические детали: чтобы кнопки действительно работали

Кнопка звонка это обычная ссылка со специальным адресом, который телефон понимает как команду набрать номер. Номер указывается в международном формате, начиная с плюса и кода страны, без пробелов и скобок в самой ссылке. Видимая подпись может содержать красивое написание с пробелами, а вот внутри ссылки номер должен быть слитным. Это самая частая ошибка: номер в ссылке с пробелами или скобками на части телефонов не набирается или набирается неправильно.

Кнопка мессенджера это ссылка на ваш аккаунт или чат. Проверьте её на разных телефонах и в разных приложениях. Если у человека не установлен нужный мессенджер, ссылка должна открывать веб-версию или предлагать установку, а не показывать пустую страницу. Обязательно протестируйте все ссылки самостоятельно, с настоящего телефона, а не только в режиме эмуляции на компьютере.

Если вы используете Коллтач или Каллибри для подмены номеров, убедитесь, что номер на панели меняется вместе с остальными номерами на странице. Иначе звонки с панели окажутся без источника, и вы не поймёте, откуда они пришли. Для мессенджеров настройте метки в ссылке, чтобы в Яндекс.Метрике было видно, с каких страниц и каналов пришли обращения.

В ХостСМС панель связи удобно вывести в общем шаблоне сайта: единый блок в нижней части мобильной версии, номер и ссылки берутся из настроек сайта, поэтому при смене номера или мессенджера достаточно изменить одно значение. Не вшивайте номера в код каждой страницы вручную: через год вы забудете, где они спрятаны, и часть страниц продолжит показывать старый телефон. В 1С-Битрикс и ВордПресс принцип тот же: панель выносится в общий шаблон, а контакты в настройки.

Скорость и аккуратность

Панель не должна замедлять сайт. Не подключайте ради неё тяжёлые библиотеки и виджеты, достаточно небольшого блока разметки и нескольких строк скрипта. Иконки лучше делать встроенными векторными, они не требуют дополнительных запросов. Если вы пользуетесь готовым виджетом от сервиса чата, например Живосайт или Энвибокс, проверьте, что его кнопка не накладывается на вашу панель. Часто виджеты рисуют плавающую иконку в правом нижнем углу, и она закрывает кнопку на вашей панели. Либо отключите плавающую иконку на телефонах, либо встройте её открытие в одну из кнопок панели.

Аккуратность важна и в анимации. Лёгкое появление панели допустимо, а мигающие, подпрыгивающие кнопки раздражают и воспринимаются как навязчивая реклама. Нужна спокойная панель, которая просто есть и не требует внимания, пока не понадобится.

Как это связано с продвижением 3 в 1

Закреплённая панель особенно полезна, потому что на сайт приходят люди из трёх точек, и у них разные ожидания. Тот, кто нашёл вас в поиске, читает страницу услуги и хочет уточнить цену. Тот, кто увидел карточку в Яндекс Картах, ищет быстрый контакт и часто переходит на сайт именно ради телефона. Тот, кто искал в 2ГИС, хочет позвонить сразу или построить маршрут. Панель обслуживает всех трёх, потому что при любом сценарии нужный способ связи находится под пальцем.

Чтобы видеть вклад каждой точки, используйте отдельные метки. В ссылку на сайт в карточке Яндекс Бизнеса и в 2ГИС добавьте метки источника, тогда в Яндекс.Метрике видно, сколько человек пришло с карт и сколько нажали на панель. Если у вас подключено отслеживание звонков, можно выделить отдельный номер для карточек. Тогда звонки с панели, звонки из карточек и звонки из поиска не смешиваются.

Для нейропоиска панель сама по себе мало значит, но данные на ней должны совпадать с теми, что указаны в карточках и в разделе контактов: номер, часы работы, названия мессенджеров. Расхождения путают и людей, и системы, собирающие факты о компании. Если номер на панели один, в карточке другой, а в подвале третий, часть обращений теряется, а доверие снижается. Поэтому один источник правды для контактов и его вывод везде, где они встречаются.

Как проверить результат по заявкам

Перед запуском панели зафиксируйте исходные цифры за две-четыре недели: сколько звонков и обращений приходило с мобильных устройств, какая доля посетителей телефона совершала целевое действие. После запуска настройте в Яндекс.Метрике отдельные цели: нажатие на кнопку звонка в панели, нажатие на кнопку мессенджера в панели, открытие формы. Для этого достаточно присвоить кнопкам идентификаторы и отправлять событие при клике.

Через месяц сравните. Выбирайте именно мобильный трафик: на компьютерах панель не показывается, и общая цифра исказит картину. Смотрите на число обращений с телефонов, долю обращений от числа мобильных посетителей и стоимость заявки, если вы вкладываетесь в рекламу в Яндекс Директе. Посмотрите также, какие страницы приводят больше нажатий на панель. Если на одной из страниц услуги нажимают заметно чаще, чем на других, изучите, чем она отличается, и перенесите приём.

Сравните и соотношение каналов. Если нажатий на звонок мало, а в мессенджер много, значит, ваша аудитория предпочитает писать, и стоит сделать мессенджер основной кнопкой. Если наоборот, оставьте звонок первым и убедитесь, что вы действительно отвечаете на звонки в рабочее время. Нажатие на кнопку это ещё не заявка: обязательно сверяйте цифры с реальными звонками и сообщениями, чтобы понять, сколько нажатий дошло до разговора.

Типичные ошибки

Первая ошибка: слишком большая панель. Если она занимает пятую часть экрана, посетитель видит не страницу, а рекламный баннер. Вторая: слишком много кнопок. Четыре-пять равнозначных значков не позволяют понять, что нажимать. Третья: номер в ссылке записан с пробелами или скобками и не набирается. Четвёртая: панель закрывает подвал и кнопки внизу страницы, а отступа нет. Пятая: панель перекрывается виджетом чата, и пользователь не может нажать ни одну из кнопок.

Шестая ошибка: панель есть, а ответить на обращение некому. Человек нажал «Написать», отправил сообщение вечером, а ответ получил на следующий день. Для него это отказ. Если вы не можете отвечать сразу, настройте автоответ с указанием времени, когда с ним свяжутся, и предложением оставить номер. Седьмая: звонок ведёт на номер, который в нерабочее время не отвечает, и это нигде не указано. Хотя бы напишите часы работы рядом с кнопкой или заведите переадресацию на мобильный дежурного.

Восьмая ошибка: нет проверки на реальных устройствах. На одном телефоне панель выглядит прекрасно, на другом часть кнопок съезжает или перекрывается полосой жестов. Проверьте минимум на двух-трёх разных моделях и в разных браузерах. Девятая: отсутствие учёта. Панель стоит, а вы не знаете, помогает ли она. Без целей в Яндекс.Метрике любые разговоры о пользе остаются догадками.

Что делать пошагово

Шаг первый: определите главные способы связи. Посмотрите по звонкам и сообщениям, как чаще всего с вами связываются, и выберите два основных. Шаг второй: подготовьте единый источник контактов, чтобы номер и ссылки хранились в одном месте. Шаг третий: добавьте панель в мобильный шаблон сайта, задайте высоту, отступ внизу страницы и скрытие при появлении клавиатуры. Шаг четвёртый: проверьте все ссылки с настоящих телефонов, с мобильным интернетом и без установленного мессенджера. Шаг пятый: настройте цели и события в Яндекс.Метрике. Шаг шестой: договоритесь с менеджерами о времени ответа и настройте уведомления в Телеграм или Битрикс24. Шаг седьмой: через месяц проведите разбор и скорректируйте набор кнопок.

Если после запуска оказывается, что звонков стало больше, но они менее целевые, посмотрите, где стоит панель. Возможно, она слишком агрессивна и заставляет людей звонить раньше, чем они поймут услугу. Тогда сместите момент появления панели или добавьте рядом короткую подсказку, что именно можно спросить. Если, наоборот, обращений не прибавилось, проверьте технические вещи: работают ли ссылки, видна ли панель на всех страницах, не закрывает ли её чат.

Отдельно стоит протестировать вариант с формой обратного звонка. Для части аудитории звонить самим неудобно, а оставить номер и ждать звонка проще. Кнопка «Перезвоните мне» открывает компактное окно с одним полем телефона, и обращение приходит в систему учёта клиентов, например амоСРМ или Битрикс24. Такой вариант хорошо работает для услуг, где перед разговором человеку нужно время подумать.

Примеры расположения для разных бизнесов

Для услуг с выездом, например ремонта или клининга, на панели обычно ставят «Позвонить» и «Написать в мессенджер», а третьей кнопкой «Рассчитать стоимость». Для кафе и салонов, у которых есть физический адрес, полезна кнопка «Маршрут», открывающая Яндекс Карты или 2ГИС. Для медицинских и косметологических центров основной кнопкой часто становится «Записаться», которая ведёт к форме записи. Для интернет-магазина удобна пара «Позвонить» и «Консультант», а корзину стоит держать отдельной кнопкой в шапке. Для производственных компаний и поставщиков лучше работает «Получить расчёт», потому что решение принимается после обсуждения параметров.

Универсального рецепта нет, поэтому полезно проверять два варианта. Например, неделю показывать панель с кнопками «Позвонить» и «Написать», а вторую неделю панель с «Позвонить» и «Рассчитать стоимость». Сравните число обращений и их качество. Ориентируйтесь не на число нажатий, а на заявки, дошедшие до реального разговора и сделки.

Вывод

Закреплённая панель связи это небольшой элемент, который при правильной настройке добавляет заметную долю обращений с мобильных устройств. Она работает потому, что убирает лишний шаг между желанием и действием. Две-три чёткие кнопки, рабочие ссылки, спокойное оформление, отсутствие конфликтов с виджетами и обязательный учёт нажатий в Яндекс.Метрике дают понятный результат, который можно измерить по заявкам, а не по ощущениям.

А когда панель согласована с карточками в Яндекс Бизнесе и 2ГИС и использует те же контакты, она замыкает тройку каналов: поиск, карты и приложение с каталогом компаний, откуда приходят обращения, получают единый, удобный и надёжный способ связи. Если хотите проверить, как ваш сайт выглядит и работает на телефоне, и понять, где вы теряете звонки, обратитесь за бесплатной консультацией к специалистам компании «Сайты Профессионально». Мы проверим мобильную версию, поможем выбрать набор кнопок и настроить учёт обращений.