Виджет на телефоне: кнопка, которая не мешает

Больше половины обращений приходит с телефонов. Там у чата ровно один шанс не превратиться в раздражитель.

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

Позиция и отступы

В настройках сайта есть сторона (слева или справа) и отступы по X и Y. Правило простое: кнопка не должна накрывать действие, которое приносит деньги. Если снизу справа стоит «В корзину», чат переезжает влево или поднимается на 70–80 пикселей. Проверять это нужно на реальном телефоне, а не в эмуляторе — сдвиг на пару сантиметров на экране решает всё.

Где кнопку лучше спрятать

Поле Visibility rules (JSON) управляет тем, где виджет показывается вообще. Формат простой: {"include":["/pricing"],"exclude":["/admin"],"desktop":true,"mobile":false}. Типовой случай — убрать чат со страницы оформления заказа на мобильных, чтобы он не спорил с формой оплаты, и оставить на страницах товара и тарифов, где вопросы возникают чаще всего.

Скорость важнее красоты

Виджет подключается одной строкой и грузится асинхронно: страница не ждёт его. Оформление лежит в отдельном файле, поэтому строгая Content-Security-Policy на сайте клиента не требует unsafe-inline — достаточно разрешить домен виджета в script-src, style-src и connect-src.

Язык сам подстраивается

Язык берётся из атрибута data-lang, затем из <html lang> страницы, затем из браузера; поддерживаются английский, польский, немецкий и русский. На многоязычном сайте ничего дополнительно делать не нужно: русская версия страницы откроет русский виджет, немецкая — немецкий.

Активное приглашение — дозированно

Всплывающее приглашение («Подсказать что-нибудь?») хорошо работает на тарифах и в каталоге и раздражает на странице оплаты. Поэтому у него есть задержка и собственный список страниц: показывайте там, где человек выбирает, и молчите там, где он уже платит.

Проверка после настройки

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

Клавиатура и высота экрана

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

Фото вместо описания

Мобильный клиент почти всегда может прислать фотографию — бракованный товар, экран с ошибкой оплаты, наклейку с артикулом. Файл уходит оператору в Telegram, и один такой снимок заменяет три круга уточнений. Стоит прямо предлагать: «пришлите фото, так быстрее».

← Все статьи