Стрічка «Безкоштовна доставка до неділі» над шапкою, кнопка з месенджерами в кутку, ввічливе питання про мову сайту, банер про cookie — ми роками бачили, як власники магазинів замовляють ці дрібниці в розробників або клеять сторонні сервіси за окрему абонплату. Тому ми зробили їх частиною платформи. У кожному магазині на Turboshop тепер є розділ «Налаштування → Віджети» з вісьмома готовими віджетами, спільними правилами показу та попереднім переглядом. Розповідаємо, що ми туди поклали, чому саме так і що це дає вашим продажам.
Що ми поклали в набір
Віджет для нас — це невеликий елемент вітрини, який живе поверх сторінок і виконує рівно одну задачу: повідомити, підказати, утримати або дати спосіб зв’язку. Ми відібрали вісім таких задач, з якими стикається майже кожен магазин:
- Бігуча стрічка — смуга з повідомленням над або під шапкою, до трьох повідомлень із посиланнями, три шаблони виводу й зворотний відлік до дати;
- Вибір мови — попап, який пропонує перейти на іншу мовну версію сайту;
- Cookie-повідомлення — банер згоди з категоріями «Аналітика» і «Маркетинг», який справді керує запуском GTM, GA4 та Facebook Pixel;
- Кнопка «Наверх» — з’являється після прокрутки й повертає на початок сторінки;
- Плаваючі контакти — кнопка зв’язку з телефоном, Telegram, Viber, WhatsApp, Messenger, email і формою зворотного зв’язку;
- Утримання (exit-intent) — попап для відвідувача, який збирається піти;
- Зацікавлений гість — попап тому, хто переглянув кілька сторінок і досі вагається;
- Email при додаванні до кошика — двокрокове вікно, що зберігає кошик і надсилає промокод.
Останні три — це сценарії повернення покупця з промокодами, і кожному з них ми присвятили окрему статтю. Тут зосередимося на самому розділі й на п’яти «сервісних» віджетах, які ми радимо увімкнути першими.
Розділ «Віджети»: одна сторінка, вкладка на кожен віджет
Ми зібрали все керування в одному місці — «Налаштування → Віджети». На першій вкладці «Загальні» — два спільні правила, які ми вважаємо найважливішими для спокою покупця: «Пауза між попапами, секунд» (на екрані завжди не більше одного спливного вікна, наступне з’являється лише після паузи) і «Попапи чекають на рішення щодо cookie» — поки відвідувач не відповів банеру, інші вікна йому не заважають. Ми принципово не хотіли, щоб магазин на нашій платформі зустрічав людину трьома вікнами одразу.
Далі — по вкладці на віджет. Кожну ми побудували однаково, щоб не доводилося вчитися заново: перемикач «Увімкнено», поля самого віджета, блок «Де показувати» і кнопка «Попередній перегляд». Два рішення, які ми ухвалили свідомо. Перше: після оновлення всі віджети вимкнені — установка модуля нічого не змінює на вашій вітрині, ви самі вирішуєте, що і коли вмикати. Друге: усі текстові поля ми заповнили прикладами українською та російською, щоб ви могли увімкнути віджет і побачити результат за хвилину, а тексти переписати, коли буде час.
Бігуча стрічка: акція, яку неможливо не помітити
Найпростіший і, за нашими спостереженнями, найкорисніший віджет. Це смуга над шапкою (або під нею) з повідомленням на кшталт «Безкоштовна доставка від 1500 ₴ — тільки цього тижня». Ми дозволили до трьох повідомлень, у кожного — необов’язкове посилання на сторінку акції чи добірку товарів. Ви отримуєте найпомітніше місце сайту без жодного банера в контенті.
Три шаблони виводу на вибір: «Статичний рядок», «Біжучий рядок» (текст пливе, як у теленовинах) і «По черзі» — повідомлення змінюють одне одного із заданим інтервалом. Кольори ми беремо з палітри вашої теми, тож стрічка не виглядає чужорідно і вам не потрібно підбирати їх вручну. Можна дозволити відвідувачу закрити стрічку й задати, скільки днів після закриття її не показувати.
Окремо ми зробили «Зворотний відлік до дати»: вкажіть дату й час завершення акції, і поруч із текстом з’явиться лічильник «до кінця акції». Ми навмисно прив’язали відлік до реальної дати: коли вона минає, він зникає сам. Терміновість працює, лише поки вона чесна, — і ми не даємо стрічці брехати вашим покупцям.
І нюанс для SEO, який ми заклали свідомо: стрічка — єдиний віджет, який бачать пошукові роботи. Усі попапи від ботів ми ховаємо, щоб не засмічувати індекс, а стрічка з акцією індексується як звичайний текст сторінки.
Попап вибору мови
Якщо у вашого магазину дві мовні версії, відвідувач часто потрапляє не на ту: перейшов із реклами, з чужого посилання, з пошуку. Ми зробили попап «Оберіть мову сайту» з кнопками всіх активних мов, поточна позначена «залишитися». І ми свідомо відмовилися від автоматичного перемикання: воно ламає посилання з реклами й дратує людей, у яких мова браузера не збігається з бажаною. Рішення завжди за людиною.
Опція «Показувати лише, якщо мова браузера відрізняється» звужує показ до тих, кому це справді потрібно, а «Пам’ятати вибір, днів» гарантує, що людину не питатимуть щоразу. На оформленні замовлення та вході попап не з’являється ніколи — там ми нікого не відволікаємо.
Cookie-повідомлення: згода, яка справді керує аналітикою
Більшість cookie-банерів у мережі — декорація: кнопка «Прийняти» є, а трекери запускаються ще до кліку. Ми не хотіли давати вам декорацію. Наш банер пропонує три дії — «Прийняти всі», «Лише необхідні» і «Налаштувати» з окремими перемикачами «Аналітика» та «Маркетинг» — і головне відбувається під капотом.
Поки банер увімкнений, коди Google Tag Manager і GA4 (категорія «Аналітика») та Facebook Pixel (категорія «Маркетинг») із розділу «Meta & Marketing» ми запускаємо лише після згоди — і одразу, щойно відвідувач натиснув кнопку, без перезавантаження. Рішення зберігається на заданий термін (за замовчуванням пів року), а в підвалі з’являється постійне посилання «Налаштування cookie». Ви отримуєте банер, який витримує перевірку рекламного кабінету, а не просто «є для галочки».
Два практичні моменти, про які ми просимо пам’ятати. По-перше, банер навмисно не модальний: він не затемнює сторінку й не заважає дивитися товари — покупець важливіший за формальність. По-друге, під згоду ми підводимо лише трекери зі спеціальних полів GTM / GA / Pixel. Якщо ви колись вставили лічильник вручну в «Код перед закриттям head», перенесіть його у відповідне поле — інакше він працюватиме без згоди, а після ввімкнення банера ви отримаєте дубль контейнера.
Кнопка «Наверх» і плаваючі контакти
Два віджети, які роблять довгі сторінки каталогу зручнішими. Кнопка «Наверх» з’являється після прокрутки на задану кількість екранів, ставиться ліворуч або праворуч і має власний відступ від низу. Ми знаємо, як часто такі кнопки на сайтах перекривають кнопку чату в тому ж куті, тому зробили просто: якщо з того самого боку увімкнені плаваючі контакти, кнопка сама переїде на протилежний бік. Жодних ручних відступів.
Плаваючі контакти — кнопка «Зв’язатися з нами» в кутку екрана, яка розкриває список каналів: телефон, Telegram, Viber, WhatsApp, Messenger, email і зворотний зв’язок. Кожен канал вмикається окремо, має власне значення й порядок. Телефон та email ми підставляємо із загальних налаштувань магазину, месенджери — зі «Соцмереж», тож вам зазвичай достатньо просто увімкнути потрібні. Ви отримуєте питання покупця в месенджері замість втраченого відвідувача.
Ми додали й режим роботи: задайте години та робочі дні — і поза ними над списком з’явиться підпис «Зараз ми не на зв’язку — напишіть, відповімо зранку». Чесна відповідь о другій ночі викликає більше довіри, ніж мовчазний чат. А клік по кожному каналу ми надсилаємо окремою подією в аналітику — ви побачите, яким каналом покупці користуються найчастіше, і зрозумієте, куди посадити оператора.
На мобільному все це працює так само: кнопка контактів не перекриває кошик, попапи виїжджають знизу як «шторка», а стрічка вміщується в один рядок. Ми перевірили це на кожному віджеті окремо, бо у більшості наших клієнтів телефон — основний пристрій покупця.
Попапи з промокодами: коротко
Три віджети з промокодами — «Утримання (exit-intent)», «Зацікавлений гість» і «Email при додаванні до кошика» — ми поєднали з розділом «Промокоди», а не вигадували для них окрему систему знижок. У кожному магазині ми вже створили дві системні промоакції: «Утримання −5 %» із загальним кодом і «Перше замовлення −10 %» з персональними кодами. Обидві вимкнені й активуються однією кнопкою просто у вкладці віджета — публічна знижка не запрацює у вас сама по собі після оновлення.
Як ми влаштували ці сценарії, коли вони спрацьовують, чому код приходить лише листом і як повторно надіслати його з картки покупця — розповідаємо в окремих статтях про кожен із трьох віджетів.
Правила показу: де, кому, коли і як часто
Саме це відрізняє вбудований модуль від «скрипта з інтернету». У кожного віджета ми зробили однаковий блок «Де показувати»:
- Сторінки — усі, головна, каталог, сторінка товару, кошик і оформлення, статичні сторінки, блог або за маскою адреси (наприклад,
/catalog/*— лише для розділу каталогу); - Аудиторія — усі відвідувачі, лише гості, лише авторизовані або лише нові відвідувачі;
- Пристрої — усі, комп’ютер або мобільний;
- Показувати з / до — розклад: стрічка про акцію сама увімкнеться в перший день і зникне в останній, за часовим поясом магазину;
- Частота показу — раз за сесію, раз на N днів або завжди, плюс «не показувати повторно» після закриття відвідувачем;
- Пріоритет у черзі — якщо на сторінці претендують кілька попапів, спочатку показується той, у кого менше число.
Ще одне наше правило: попапи ніколи не з’являються на сторінках оформлення замовлення, «дякуємо за замовлення» та входу. Там людина вже робить те, що вам потрібно, і відволікати її — найгірше, що може зробити магазин. Єдиний виняток, який ви можете увімкнути свідомо, — нагадування про кошик у віджеті утримання.
Попередній перегляд: побачити до того, як побачать покупці
Ми не хотіли, щоб ви налаштовували віджети «наосліп», тому кожна вкладка закінчується кнопкою «Попередній перегляд». Вона відкриває вікно з реальним макетом вашої теми, у якому віджет показується примусово — незалежно від того, увімкнений він чи ні, і без урахування правил показу, частоти й cookie. Події аналітики при цьому не надсилаються, cookie не пишуться. У стрічки можна перемкнути всі три шаблони, у попапів утримання й зацікавленого гостя — варіанти «Звичайний» і «З кошиком» із демонстраційним кошиком. Поруч є посилання «Відкрити в новій вкладці», щоб показати результат колезі.
Що це дає вашому магазину: приклади за нішами
- Магазин одягу. Стрічка «По черзі» з трьома повідомленнями: безкоштовна доставка, нова колекція, розпродаж минулого сезону з відліком до неділі. Розклад задано наперед — у понеділок стрічка зникне сама, вам не доведеться про неї згадувати.
- Автозапчастини. Плаваючі контакти з Viber і телефоном, режим роботи 9:00–18:00 у будні. Покупець, який не знайшов деталь за VIN, пише в месенджер замість того, щоб піти до конкурента.
- Магазин з рекламою в Google і Meta. Cookie-банер із гейтом GTM і Pixel: аналітика працює лише за згодою, а ви спокійно проходите будь-яку перевірку рекламного кабінету щодо обробки даних.
- Двомовний магазин. Попап вибору мови лише для тих, у кого мова браузера відрізняється від мови сторінки, — решта його не побачить.
- Оптовий постачальник. Стрічка з маскою адреси
/catalog/*і аудиторією «лише авторизовані»: умови для дилерів бачать тільки дилери.
Часті питання
Чи потрібно щось встановлювати або вставляти код? Ні. Модуль уже є у вашому магазині після оновлення. Усе налаштовується в адмінці, без коду і без сторонніх сервісів.
Чи не сповільнять віджети сайт? Ні. Ми не тягнемо жодних JavaScript-бібліотек і обмежили розмір скриптів і стилів модуля бюджетом у 20 КБ. Рішення «показувати чи ні» за сторінкою, аудиторією та пристроєм ухвалюємо на сервері, тому сторінки лишаються кешованими.
Що буде, якщо увімкнути кілька попапів одночасно? На екрані завжди не більше одного. Черга керується пріоритетом і паузою між попапами з вкладки «Загальні».
Чи можна показати стрічку лише на певних сторінках? Так: оберіть «За маскою адреси» і вкажіть маску, наприклад /catalog/* або конкретну адресу акції.
Чи побачать віджети пошукові роботи? Роботи бачать лише бігучу стрічку. Попапи, банер cookie й кнопки ми від них ховаємо.
Які дані зберігають віджети? Лише службові cookie про те, що показано й закрито, рішення щодо cookie та обрану мову. Персональних даних у них немає — ми перевіряли це окремо.
Підсумок
Модулем «Віджети» ми закрили цілий клас дрібних, але щоденних задач: повідомити про акцію, дати зручний канал зв’язку, коректно запитати згоду на аналітику, підказати мову. Кожен елемент вмикається перемикачем, має чіткі правила показу і перевіряється в попередньому перегляді до того, як його побачать покупці. Наша порада — почніть із двох речей: увімкніть бігучу стрічку з поточною акцією та плаваючі контакти з вашим месенджером; ефект видно вже за перший тиждень. Про кожен віджет окремо, включно з поверненням покупців через промокоди, ми розповідаємо в наступних статтях серії, а всі нові можливості платформи збираємо в рубриці «Можливості».