Вигляд віджета

Налаштуйте, як чат-віджет виглядає на вашому сайті: колір, фон, шапку вікна, плаваючу кнопку, вікно вибору месенджерів, власні кнопки на сторінках і CSS.

Усе це — в Налаштуваннях сайту → AI-асистент → Кнопка та Стиль. Вкладка має чотири розділи: Тема віджета, Плаваюча кнопка, Вбудована кнопка і Власні CSS стилі. Налаштування діють для одного сайту: якщо у вас кілька сайтів, кожен оформлюється окремо.

Тема віджета

Тема задає основний колір віджета. Він потрапляє на кнопку надсилання, повідомлення відвідувача, значок-іскру в шапці, підпис «Працює на Looma», а також на плаваючу кнопку й вікно вибору месенджерів, якщо для них не задано окремий колір. Той самий колір використовує і Швидкий пошук.

Праворуч від налаштувань — Попередній перегляд: маленьке вікно чату, яке одразу перефарбовується, коли ви щось змінюєте.

Готові теми

Відкрийте список тем і оберіть одну з 14: Indigo Calm, Ocean Blue, Purple Sunset, Night Sky, Emerald Wave, Purple Dream, Emerald Fresh, Rose Soft, Amber Warm, Teal Modern, Slate Minimal, Sky Light, Coffee Brown, Pure Black. Три з них — Purple Sunset, Night Sky і Emerald Wave — градієнтні, решта однотонні. Нові сайти стартують з Ocean Blue (синій #1D4ED8).

Тема зберігається одразу після вибору — кнопку «Зберегти зміни» натискати не треба. Вибір готової теми скидає ваші власні кольори й фоновий візерунок.

Власні кольори

Натисніть квадрат Основний поруч зі списком тем. Відкриється палітра з двома вкладками:

• Однотонний — один колір. Оберіть його в палітрі або введіть hex-код, наприклад #0d9488.
• Градієнт — Колір 1 і Колір 2, змішані по діагоналі. Під полями видно смужку з результатом.

Щойно ви змінили колір, у списку тем з'являється Кастом: це ваша тема, побудована на основі тієї, з якої ви почали. Зміни зберігаються самі за мить після вибору. Кнопка зі стрілками поруч (Скинути до теми) повертає кольори вихідної теми.

Порада: беріть колір із логотипу чи кнопок «Купити» на вашому сайті. Дуже світлі кольори (жовтий, світло-сірий) погано читаються з білим текстом на кнопці надсилання й у повідомленнях відвідувача.

Фоновий візерунок

Під кольором — ряд квадратиків із візерунками для фону переписки: Без (перший, перекреслене коло), крапки, сітка, діагональ, хвилі, кола, топографія, конфеті, шестикутники, зигзаг і ромби.

• Коли візерунок вибрано, з'являється повзунок Прозорість від 5% до 100% із кроком 5%. Що менше значення, то блідіший візерунок. Для більшості сайтів досить 20–40%.
• Візерунок лягає лише на область повідомлень. Шапка, вкладки й поле введення лишаються однотонними.
• Як і власні кольори, візерунок зберігається сам і перетворює тему на Кастом.

Тема шапки

Перемикач Шапка вирішує, як виглядає верхня смуга вікна чату.

• Світла (за замовчуванням) — біла шапка. Колір теми лише підкреслює: плитка з іскрою, кнопка надсилання, повідомлення відвідувача.
• Темна — шапку заливає колір теми (однотонний або градієнт), а логотип, заголовок, рядок статусу й кнопки стають білими.

Решта вікна в обох випадках однакова й світла: вкладки Чат і Товари (поруч — скільки товарів знайдено), переписка, поле введення з меню, вкладенням і голосовим введенням, підпис «Працює на Looma». Шапка поєднується з будь-якою темою, готовою чи власною, і сама не змінює ваш колір. Вона теж зберігається одразу.

Якщо на сайті вже багато яскравих блоків, світла шапка виглядає спокійніше. Темна краще помітна на білих мінімалістичних сайтах.

Рядок статусу

Під заголовком у шапці віджет показує, хто відповідає просто зараз:

• AI онлайн — доступний лише AI.
• AI та команда на зв’язку — з'являється разом із кількома маленькими фото ваших операторів, коли онлайн хоча б один. Кількість операторів не показується, тож невеликий магазин не виглядає меншим, ніж є. Поки сторінка відкрита, рядок оновлюється приблизно раз на хвилину.
• Оператор онлайн — щойно оператор долучився до цієї розмови, шапка говорить уже про цю людину.

Мультиканальне вікно (див. нижче) показує той самий рядок статусу під підзаголовком.

Плаваюча кнопка

Плаваюча кнопка висить у кутку кожної сторінки поверх вмісту. Відвідувач натискає її, щоб відкрити чат. Усе налаштовується в розділі Плаваюча кнопка.

Увімкнути плаваючу кнопку — головний перемикач. Вимкніть його, якщо чат відкривається лише вашими власними кнопками (див. Вбудована кнопка).

Десктоп і мобільний

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

Ширина для мобільних налаштувань — ширина екрана, нижче якої діють мобільні налаштування. За замовчуванням 768 px. Це значення спільне для кнопки чату й кнопки Швидкого пошуку.

Що налаштовується

Налаштування	Варіанти
Іконка кнопки	Перемикач показує чи ховає іконку. Варіанти: Бульбашка чату (за замовчуванням), Повідомлення, Kakao.
Форма кнопки	Коло, Закруглена (за замовчуванням, квадрат зі скругленими кутами або «таблетка», якщо є текст), Прикріплена — кнопка притиснута до нижнього (або верхнього) краю екрана, скруглена лише з одного боку.
Текст кнопки	Перемикач показує чи ховає підпис. Текст вводите самі або берете зі Швидкого вибору: «Чат», «Маєте питання?», «Потрібна допомога?», «Запитайте нас», «Підтримка».
Колір кнопки	За замовчуванням — колір теми. Можна задати окремий; Повернути колір теми скидає його.
Позиція кнопки	Внизу справа (за замовчуванням), Внизу зліва, Вгорі справа, Вгорі зліва.

Іконку й текст не можна вимкнути обидва: якщо вимкнути одне, інше вмикається само. Попередній перегляд унизу розділу показує кнопку на тлі-«шахівниці» в обраному куті.

Нові сайти отримують кнопку лише з іконкою, форми Закруглена, внизу справа — і на десктопі, і на мобільному.

Типовий підхід: на десктопі кнопка з текстом («Маєте питання?» помітніше за саму іконку), на мобільному — кругла іконка, щоб не перекривати товари та кнопку кошика. Якщо внизу справа на вашому сайті вже є інша кнопка (наприклад, «нагору»), перенесіть кнопку чату вліво або зсуньте її через Конструктор CSS.

У цьому ж розділі є перемикач Проактивне повідомлення з кнопкою Налаштування — AI сам вітає відвідувача й пропонує допомогу. Детально — у Проактивних повідомленнях.

Режим відкриття

• Звичайне відкриття (за замовчуванням) — кнопка одразу відкриває чат Looma.
• Мультиканальний — кнопка спершу відкриває невелике вікно з вибором, де поспілкуватися: в чаті на сайті або у вашому месенджері.

Що бачить відвідувач

Після натискання плаваюча кнопка перетворюється на кнопку закриття, а над нею з'являється вікно:

1. Привітання і Підзаголовок. Якщо підзаголовок не заповнено, показується стандартний: «Як вам зручніше поспілкуватися?». Під ним — рядок статусу (хто зараз на зв'язку).
2. Головні кнопки в кольорі плаваючої кнопки: Чат відкриває чат Looma. Якщо на сайті увімкнено дзвінки з віджета, поруч є кнопка Дзвінок. Без дзвінків лишається одна широка кнопка Онлайн чат.
3. Круглі іконки ваших каналів із підписом «або в месенджері» (якщо всі канали — месенджери) або «інші способи зв’язку». Назва каналу видна при наведенні. Переходи йдуть через посилання з відстеженням, тож Looma бачить, які канали обирають.

Налаштування вікна

Кнопка Налаштувати біля режиму відкриває вікно з двома колонками:

• Тексти — Привітання та Підзаголовок. Біля кожного поля є готові Варіанти, але можна написати свій текст.
• Канали — список доданих каналів. Кожен можна перейменувати, перевірити (відкриває посилання), підняти чи опустити в списку або видалити. Порядок у списку — це порядок іконок у вікні.
• Підключені канали — месенджери, уже підключені до Looma в розділі Канали; їх додають одним кліком.
• Додати вручну — оберіть тип (Telegram, Viber, WhatsApp, Instagram, Messenger або Власний канал), назву і ім'я користувача, номер телефону чи посилання. Для власного каналу вказується повна адреса, наприклад https://your-store.com/contact.

Зміни у вікні зберігаються кнопкою Зберегти в ньому, а потім — Зберегти зміни вгорі вкладки.

Вбудована кнопка

Окрім плаваючої кнопки, чат можна відкривати з будь-якого місця сторінки. Додайте клас looma-inline-button до будь-якої кнопки чи посилання. Оформлюйте її як завгодно — клік обробить віджет. У розділі Вбудована кнопка є три готові приклади з кнопкою Копіювати:

1. Відкрити віджет — працює за вашим режимом відкриття: чат або вікно вибору каналів.

<button class="looma-inline-button">Напишіть нам</button>

2. Завжди відкривати чат — відкриває AI-чат напряму, навіть коли увімкнено мультиканальний режим.

<button class="looma-inline-button" data-looma-open="chat">Напишіть нам</button>

3. Відкрити із запитанням — відкриває чат і одразу надсилає текст із data-looma-message. Впишіть назву товару чи будь-яке запитання — характеристики, кому підійде, порівняння. AI знайде товар і відповість.

<button class="looma-inline-button" data-looma-message="Розкажіть про товар «Назва товару»: характеристики та кому підійде">Напишіть нам</button>

Під прикладами — Готові запитання, які копіюються кліком: «Розкажіть про цей товар: характеристики та кому підійде», «Чи є в наявності, які розміри та кольори?», «Які способи оплати та доставки?», «Допоможіть підібрати товар під мої потреби».

Де це корисно:

• кнопка «Запитати про товар» на сторінці товару (третій варіант, з назвою товару в запитанні);
• посилання «Потрібна допомога?» у шапці чи футері сайту;
• кнопки на лендингах і в розділах доставки та оплати.

Власні CSS стилі

Для тонкого налаштування, якого немає серед візуальних параметрів, додайте власний CSS у поле розділу Власні CSS стилі. Ці стилі підключаються на сторінки вашого сайту, де стоїть віджет. До кожного правила автоматично додається !important, щоб воно переважило стилі віджета й теми сайту.

Найчастіші цілі — .looma-floating-button (плаваюча кнопка) і .looma-inline-button (ваші вбудовані кнопки). Приклад у підказці поля показує, як змінити тінь плаваючої кнопки чи фон вбудованої.

Конструктор

Кнопка Конструктор відкриває вікно, де стилі збираються без написання коду:

• Елемент — Плаваюча кнопка або Вбудована кнопка.
• Відступи — зверху, справа, знизу, зліва (px). Наприклад, підняти кнопку над банером cookies.
• Внутрішні відступи — зверху, справа, знизу, зліва (px).
• Розмір — ширина, висота, радіус скруглення (px).
• Z-Index — шар, якщо кнопку перекривають інші елементи сайту (чат-кнопки інших сервісів, банери).
• Застосувати для — Всіх пристроїв, лише десктопу (ширше 768 px) або лише мобільних.

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

Збереження і перевірка

• Тема, власні кольори, візерунок і шапка зберігаються одразу.
• Плаваюча кнопка, режим відкриття, вбудована кнопка й CSS — кнопкою Зберегти зміни вгорі вкладки.

Перевірити результат можна у вкладці Віджет того ж розділу (живий віджет вашого сайту) або за прямими посиланнями:

• Чат-віджет — https://widget.looma.chat/chat.html?token=YOUR_TOKEN
• Віджет пошуку — https://widget.looma.chat/search.html?token=YOUR_TOKEN

На самому сайті оновіть сторінку. Якщо змін не видно, це може бути кеш браузера або сайту — відкрийте сторінку в приватному вікні.

Наступні кроки

• Огляд AI-асистента — основні налаштування чату
• Проактивні повідомлення — автоматичне привітання відвідувачів
• Швидкий пошук — вигляд віджета пошуку
• Канали — підключення месенджерів, які можна показати в мультиканальному вікні