Віджет на телефоні: кнопка, яка не заважає

Понад половина звернень надходить із телефонів. Там чат має рівно один шанс не стати подразником.

На десктопі кнопка чату розміщується в порожньому куті й нікому не заважає. На телефоні той самий кут зайнятий кнопкою «Купити», кошиком, плашкою про cookie, а часом і номером телефону. Тому мобільний віджет налаштовують окремо — інакше він перекриває саме те, заради чого людина прийшла.

Розташування та відступи

У налаштуваннях сайту є бік (ліворуч чи праворуч) і відступи по 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, і один такий знімок замінює три кола уточнень. Варто прямо пропонувати: «надішліть фото, так буде швидше».

← Усі статті