Товари на будь-якому лендингу — у його ж дизайні
Блок товарів сам знаходить місце на сторінці, вирівнюється по сітці сайту й бере його шрифти, кольори та кнопки. «Купити» відкриває чат, де бот оформлює замовлення з доставкою й оплатою. Без конструктора магазину й без кошика на сайті.
Один блок — чотири різні сайти
Перемикайте сайти: блок щоразу читає сторінку заново й підлаштовується. Праворуч — що саме він узяв із дизайну.
Сайти й товари — умовні; блок вставляє справжній скрипт LEO Chat. Натисніть «Купити», щоб побачити, що станеться.
Що блок читає з вашого сайту
Місце на сторінці
Знаходить перший екран і стає одразу під ним, пропускаючи меню й шапку. Або перед підвалом, біля потрібної секції чи там, де ви вставили рядок коду.
Сітку сайту
Бере ширину й відступи контейнера сусідньої секції, тож лівий край карток збігається з краєм вашого тексту. Ритм секцій теж свій.
Шрифти
Шрифт тексту, шрифт, розмір і регістр заголовків — ті самі, що на сторінці, разом із підключеними веб-шрифтами.
Кнопки й кольори
Знаходить головну кнопку сайту й повторює її колір, текст, форму, регістр і висоту. Світлий сайт — світлий блок, темний — темний.
Телефон
На телефоні — дві картки в ряд або каруселька з краєм наступної картки. Без горизонтального скролу сторінки.
Перехід між сторінками
На сайтах на React чи Vue блок сам зʼявляється чи зникає під час переходів — за правилом «на яких сторінках показувати».
Покупку завершує бот у чаті
Три кроки — і на сайті є магазин
Вставте віджет
Один рядок коду перед </body> — той самий, що й для чату на сайті. Окремо для магазину нічого ставити не треба.
Оберіть товари й місце
У кабінеті: популярні, нові, зі знижкою, категорія або вибрані вручну; після першого екрана, перед підвалом чи біля секції. Є попередній перегляд.
Продавайте в чаті
«Купити» відкриває чат із товаром у кошику. Бот питає ім'я й телефон, пропонує доставку Новою Поштою та оплату — і замовлення у вас.
<!-- віджет LEO Chat: чат + блок товарів -->
<script src="https://chat.lionex.com.ua/w.js" data-key="ваш-ключ" async></script>
<!-- необовʼязково: блок рівно в цьому місці -->
<div data-leo-shop></div>
<!-- необовʼязково: ваша кнопка «Купити» -->
<button data-leo-buy="ID-товару">Купити</button>- Показуємо лише товари в наявності, з фото — першими.
- Зміни в кабінеті зʼявляються на сайті протягом 2 хвилин.
- Продажі з блоку рахуються окремо: покази, кліки, замовлення й сума.
Часті питання
Мені потрібен інтернет-магазин, щоб це працювало?
Ні. Достатньо будь-якого сайту чи лендингу — на Tilda, WordPress, Webflow, власній верстці. Товари беруться з каталогу LEO Chat: фід Prom.ua чи Horoshop, мікророзмітка сайту або додані вручну.
Блок зламає мій дизайн?
Блок живе в ізольованому Shadow DOM: стилі сайту не ламають його, а його стилі — сайт. Від сайту він лише читає шрифти, кольори й розміри, щоб виглядати рідним.
А якщо автоматичний вигляд мені не підходить?
Увімкніть «Власний» стиль — задайте колір кнопок і заокруглення. Заголовок, підпис і текст кнопки теж змінюються в кабінеті.
Можна зробити кнопкою покупки свою кнопку на сайті?
Так. Додайте до будь-якої кнопки чи посилання атрибут data-leo-buy з ID товару — клік відкриє чат із цим товаром у кошику. У кабінеті є пошук товару, що генерує готовий код.
Як я побачу, скільки це продає?
У розділі «Магазин на сайті» — скільки відвідувачів побачили блок за 30 днів, скільки натиснули «Купити», скільки замовлень і на яку суму. Ці продажі видно й на Дашборді.