Щоб на сайті магазину з'явився онлайн консультант на сайт Elbuz, потрібен один рядок коду. Програма складає його сама, ви копіюєте його з налаштувань віджета і один раз вставляєте в загальний шаблон сторінок. Далі кольори, тексти і поведінку чату ви змінюєте в програмі, а сайт більше не чіпаєте.
Нижче — чотири кроки встановлення, перевірка, мова чату і розбір випадків, коли код вставили, а кнопки на сайті немає. Як налаштувати вигляд і тексти, звідки AI бере відповіді і як працюють оператори, розказують окремі статті, посилання на них — по ходу тексту.
- Вікно
- «Налаштування віджету - Розумний помічник»
- Право доступу
- доступ до вікна «Категорії»: плитка налаштувань віджета є тільки там
- Підготувати
- доступ до шаблону сайту або людину, яка може вставити в нього код
Де взяти код
Окремого пункту меню у налаштувань віджета немає. Вони відкриваються плиткою з вікна «Категорії».
- Меню
- Довідники → Категорії → блок «Інструменти каталогу» → плитка «Налаштування віджету - Розумний помічник»
У тому самому блоці стоїть плитка «Налаштування віджету - Розумний пошук». Це інший віджет, пошук по каталогу, але код для сайту в них спільний — про це в кроці 2.
В офлайн-установці програми плиток віджетів у блоці «Інструменти каталогу» немає: чат для сайту працює тільки з хмарною версією.
1
Налаштування віджету - Розумний помічник2
Налаштування віджету - Розумний пошук- Плитка «Налаштування віджету - Розумний помічник» — звідси відкриваються налаштування чату і код для сайту.
- Плитка «Налаштування віджету - Розумний пошук» — інший віджет, але код для сайту в них спільний.
Крок 1. Відкрити налаштування і перевірити «Активність»
Відкрийте плитку. Якщо вікно відкривається вперше, програма в цю мить сама заводить віджет, і перемикач «Активність» у ньому вже ввімкнений. Віджет на обліковий запис один: друге відкриття показує той самий віджет, нового не створює.
Вкладка «Налаштування», рядок перемикачів угорі. Для встановлення важливі два:
- «Активність» — вимкнений віджет не потрапляє в код для сайту взагалі, а якщо код уже стоїть на сайті, чат перестає з'являтися.
- «Відображати чат AI» — вимкнений прибирає кнопку чату зі сторінок, хоча сам віджет на сайті завантажується. За замовчуванням увімкнений.
Кнопки «Зберегти» у вікні немає, і вона не потрібна. Будь-яка зміна поля одразу зберігає всю форму, а під час закриття вікна форма зберігається ще раз.
1
Активність2
Відображати чат AI- Активність — вимкнений віджет зникає з коду для сайту і з самого сайту.
- Відображати чат AI — вимкнений прибирає кнопку чату, віджет при цьому вантажиться.
Крок 2. Скопіювати код
На тій самій вкладці «Налаштування» прокрутіть донизу, до розділу «Код інтеграції». У полі «Для віджету» лежить готовий код. Поле тільки для читання. Кнопка біля назви поля (підказка «Копіювати») забирає код цілком, після цього з'являється повідомлення «Текст скопійовано в буфер обміну».
1
Кнопка копіювання2
Поле «Для віджету»- Кнопка копіювання забирає код цілком — вручну виділяти його не потрібно.
- Цей рядок вставляють у шаблон сайту один раз, перед закриваючим тегом body.
Що варто знати про цей код:
- Ваших налаштувань у ньому немає. Тільки адреса сервісу, ідентифікатор облікового запису і номер віджета. Колір кнопки, тексти, модель AI сайт отримує заново під час кожного завантаження сторінки, тому після зміни налаштувань код на сайті міняти не треба.
- Код один на два віджети. Якщо ввімкнений ще й «Розумний пошук», той самий рядок підключає обидва. У налаштуваннях розумного пошуку показаний саме цей код. На сайті має стояти один такий рядок, не два.
- Поле оновлюється тільки під час відкриття вікна. Ввімкнули «Активність» у вже відкритому вікні — у полі досі старий код, без чату. Закрийте вікно, відкрийте знову і тоді копіюйте.
Перевірити, що в скопійованому коді є чат, можна на око: у ньому має бути адреса widget-esa.elbuz.com. Якщо є тільки widget-ess.elbuz.com, це код одного лише розумного пошуку.
Крок 3. Вставити код у шаблон сайту
Код — звичайний блок <script>. Спеціального модуля для CMS тут немає: підійде будь-який сайт, у шаблон якого можна додати власний HTML-код.
- Відкрийте загальний шаблон, який виводиться на всіх сторінках: зазвичай це підвал сайту.
- Вставте код перед закриваючим тегом
</body>. Якщо CMS має окреме поле для сторонніх скриптів у підвалі чи в шапці, можна туди. - Збережіть шаблон.
В OpenCart 3 загальний підвал — файл catalog/view/theme/<ваша тема>/template/common/footer.twig.
Чат з'являється тільки на тих сторінках, де завантажився код. Вставили його в шаблон картки товару, а не в загальний — на головній і в кошику чату не буде. Іноді так і треба (див. типові ситуації).
Випадково вставили код двічі — другого чату не буде: віджет запускається на сторінці один раз. Але зайвий рядок краще прибрати, щоб потім не шукати, котрий із них справжній.
Крок 4. Перевірити, що чат працює
- Відкрийте сайт у звичайному браузері, не в сервісі перевірки швидкості.
- Поворушіть мишею, прокрутіть сторінку або натисніть будь-що. Кнопка чату з'являється тільки після першої дії відвідувача (про це нижче).
- Знайдіть кнопку. Без змін у налаштуваннях вона стоїть внизу зліва.
- Відкрийте чат і напишіть тестове повідомлення. Розмова з'явиться у вікні «Чат діалоги» (Органайзер → Чат діалоги), як звичайне звернення. Як з ним працювати, розказує стаття про вікно «Чат діалоги».
Тестове повідомлення — справжнє звернення, і відповідь робота на нього — такий самий виклик моделі AI, як для будь-якого відвідувача.
Браузер запам'ятовує розмову: відкриєте сайт завтра в тому самому браузері — продовжиться той самий чат. Для чистої перевірки відкрийте сайт у приватному вікні.
Якщо кнопки немає, відкрийте консоль браузера (F12, вкладка Console) і знайдіть рядки віджета:
| Рядок у консолі | Що означає |
|---|---|
Smart Assistant: Initializing widget... | Перевірку пройдено, віджет запитує налаштування |
Elbuz widget meta not loaded! | Браузер не завантажив службовий файл віджета: блокувальник реклами, політика безпеки сайту або мережа |
Smart Assistant: Bot detected or timeout, widget not initialized | За 30 секунд не було жодної дії на сторінці, або браузер схожий на робота |
Shopping Assistant: Error loading configuration | Сервіс не віддав налаштувань — найчастіше знято «Активність» |
Рядок Smart Assistant Widget initialized successfully друкується навіть тоді, коли налаштування не завантажилися. Сам по собі він нічого не підтверджує — дивіться, чи немає вище за нього рядків з таблиці.
Чому кнопки чату може не бути
Віджет проходить кілька перевірок, і кожна може зупинити його мовчки, без помилки на сторінці.
Найбільше питань викликає перевірка на робота. Щоб не витрачати ресурси на пошукових роботів і сервіси перевірки сайтів, віджет чекає першої дії людини: руху миші хоча б на 10 пікселів, кліку, прокрутки, натискання клавіші, дотику до екрана або фокусу в полі введення. Немає жодної дії за 30 секунд — на цьому перегляді сторінки чату не буде, з'явиться він після перезавантаження і дії. Браузери, які представляються роботами (PageSpeed, Lighthouse, headless-браузери, пошукові роботи), чат не бачать ніколи. Тому звіт сервісу перевірки швидкості без чату — норма.
Мова чату
Віджет визначає мову сторінки сам, по черзі:
- атрибут
langтегу<html>, частина до дефіса (uk-UA→uk); - мета-тег
content-language; - мета-тег
og:locale; - мова браузера відвідувача.
Останній пункт і є пасткою. Якщо в шаблоні немає lang і мета-тегів мови, відвідувач з англійським браузером отримає чат англійською навіть на українській сторінці. Перевірте, що кожна мовна версія сайту має правильний lang.
Код мови з сайту програма шукає серед мов у вікні «Мова» (Довідники → Мова): за колонкою «Код мови», за колонкою «Код мови на сайті» або за першими літерами коду. Сайтний uk сам зіставляється з мовою ua, а ru, en, pl збігаються як є. «Код мови на сайті» заповнюють, лише коли сайт позначає мову інакше, ніж програма; вписуйте частину до дефіса, бо віджет передає тільки її.
1
Код мови на сайті2
Код мови- Колонку «Код мови на сайті» заповнюють, коли сайт позначає мову інакше, ніж програма.
- У колонці «Код мови» сайтний код uk сам зіставляється з мовою ua, en, ru, pl — як є.
Що залежить від знайденої мови:
- Тексти чату — заголовок, привітання, підпис біля кнопки — беруться з мовної вкладки на вкладці «Інформація» налаштувань віджета. Мову, якої серед вкладок немає, чат показує текстами першої мови. Що саме там заповнювати, розказує стаття про налаштування вигляду і текстів чату.
- Службові написи самого вікна чату є українською, російською, англійською і польською; для інших мов — англійською.
- Посилання на товари, які чат дає відвідувачу, складаються з поля «Посилання на сайт» мовної вкладки і адреси товару. Поле порожнє — посилання ведуть на поточний сайт. Якщо мовні версії живуть на різних адресах (наприклад, з префіксом
/en/), впишіть на вкладці кожної мови її адресу.
На яких доменах працює код
Білого списку доменів у віджета немає, і сервіс не перевіряє, з якого сайту прийшов запит. Код працює на будь-якій сторінці, куди його вставили. Що з цього випливає:
- Тестова копія сайту, локальна версія чи другий домен магазину — чат там запрацює так само. Звернення з них потрапляють у те саме вікно «Чат діалоги», і AI відповідає на них так само, як на основному сайті.
- Поле «Адреса сайту» на вкладці «Налаштування» доступ не обмежує.
- Щоб чату не було на тестовому сайті, приберіть код із шаблону саме цього сайту. Перемикач «Активність» вимкне чат одразу на всіх сайтах.
Як тимчасово прибрати чат із сайту
| Що зробити | Що буде на сайті | Як повернути |
|---|---|---|
| Зняти «Активність» | Чату немає з наступного завантаження сторінки. Код на сайті можна не чіпати | Ввімкнути «Активність»: чат повернеться з усіма налаштуваннями |
| Зняти «Відображати чат AI» | Віджет завантажується, але кнопки чату немає | Ввімкнути перемикач |
| Прибрати код із шаблону | Немає ні чату, ні розумного пошуку, якщо той був підключений цим самим кодом | Вставити код знову |
Поки «Активність» знята, скопійований з поля «Для віджету» код не містить частини про чат. Не вставляйте на сайт код, скопійований у цей час, — після ввімкнення чату він не з'явиться.
Типові ситуації
Перше встановлення
Відкрийте плитку, переконайтеся, що «Активність» увімкнена, скопіюйте код з поля «Для віджету» і вставте перед </body> у загальному підвалі. Відкрийте сайт, поворушіть мишею — кнопка з'явиться внизу зліва. Далі налаштовуйте вигляд і тексти та джерела відповідей AI.
На сайті вже стоїть розумний пошук
Старий код підключає тільки пошук. Відкрийте налаштування чату, скопіюйте код заново і замініть ним старий рядок — не додавайте другий поруч. Новий код підключає обидва віджети. Про сам пошук — у статті про розумний пошук.
Чат потрібен не завжди
Наприклад, на час, коли нікому відповідати. Зніміть «Активність», код на сайті залиште. Ввімкнете — чат повернеться з тими самими налаштуваннями, нічого вставляти не треба.
Магазин двома мовами
Перевірте lang у тегу <html> на кожній мовній версії. Заповніть тексти і «Посилання на сайт» на вкладці кожної мови. Якщо сайт позначає мову кодом, якого немає в колонці «Код мови», впишіть його в «Код мови на сайті».
Чат лише на окремих сторінках
Вставте код тільки в шаблони цих сторінок, наприклад у картку товару. Щоб чат відкривався не плаваючою кнопкою, а власними кнопками на сторінці або був вбудований у її вміст, є позиція «Прихована» і режим вбудовування — вони описані в статті про налаштування віджета.
Чого встановлення не робить
- Не вставляє код на сайт саме. Модулів чи автоматичного підключення до CMS немає: код вставляє людина, яка має доступ до шаблону.
- Не обмежує домени. Код працює на будь-якому сайті, куди його вставили, і звернення звідти потрапляють у ваш список чатів (докладніше).
- Не дає кількох різних чатів. Віджет на обліковий запис один, з одним набором налаштувань; різний вигляд для різних сайтів одного облікового запису не задається.
- Не показує чат роботам. Сервіси перевірки сайтів і пошукові роботи чату не бачать, людина бачить його після першої дії на сторінці.
- Не навчає AI. Після встановлення робот знає про магазин тільки те, що ви йому дали. Що і де заповнити — у статті про джерела відповідей AI.
Розбір частих проблем
| Що ви бачите | Чому так | Що зробити |
|---|---|---|
| Кнопки немає, у консолі немає жодного рядка віджета | Код не потрапив у шаблон цієї сторінки | Відкрийте код сторінки (Ctrl+U) і пошукайте widget-esa. Немає — вставте код у загальний шаблон (крок 3) |
У коді сторінки є widget-ess, але немає widget-esa |
Код скопійовано, коли чат був вимкнений, — у ньому тільки розумний пошук | Ввімкніть «Активність», перевідкрийте вікно, скопіюйте код заново і замініть старий (крок 2) |
| «Elbuz widget meta not loaded!» | Браузер не завантажив файл з widget-esa.elbuz.com |
Вимкніть блокувальник реклами для перевірки. Якщо сайт має політику безпеки (CSP), дозвольте в ній https://widget-esa.elbuz.com і wss://rt-messaging.elbuz.com |
| «Smart Assistant: Bot detected or timeout, widget not initialized» | 30 секунд без жодної дії на сторінці або браузер схожий на робота | Перезавантажте сторінку і одразу поворушіть мишею (чому так) |
| «Shopping Assistant: Error loading configuration» | Знято «Активність» віджета | Ввімкніть «Активність» (крок 1); код на сайті міняти не треба |
| Помилок у консолі немає, а кнопки немає | Знято «Відображати чат AI» або вибрана позиція кнопки «Прихована» | Ввімкніть перемикач (крок 1) або змініть позицію на вкладці «Вигляд» |
| Чат говорить не тією мовою, що сторінка | У шаблоні немає lang, і віджет узяв мову браузера відвідувача |
Додайте lang у тег <html> кожної мовної версії (мова чату) |
| Посилання на товари в чаті ведуть на неіснуючу сторінку | Порожнє або неправильне «Посилання на сайт» на мовній вкладці | Впишіть адресу мовної версії сайту на вкладці цієї мови (мова чату) |
Часті запитання
Чи треба міняти код на сайті після зміни налаштувань чату?
Ні. У коді немає ваших налаштувань, тільки адреса сервісу та ідентифікатори. Колір, тексти й модель AI сайт отримує заново під час кожного завантаження сторінки.
На сайті вже стоїть код розумного пошуку. Додати ще один?
Ні, замініть. Код один на обидва віджети: той, що в полі «Для віджету», підключає і пошук, і чат, якщо обидва ввімкнені.
Чи можна дозволити чат тільки на моєму домені?
Ні, білого списку доменів немає. Код працює на будь-якому сайті, куди його вставили, і звернення звідти потрапляють у ваше вікно «Чат діалоги». Щоб чату не було на певному сайті, приберіть код із його шаблону.
Чому PageSpeed і сервіси перевірки не бачать чату?
Віджет не запускається для браузерів, які представляються роботами, і чекає першої дії людини на сторінці. Для сервісів перевірки це означає, що чат не з'явиться. Для людей — що кнопка з'являється після руху мишею чи прокрутки.
Чи можна поставити чат лише на деяких сторінках?
Так. Чат є тільки там, де завантажився код, тому вставте його в шаблони потрібних сторінок, а не в загальний підвал.
Чи можна мати два різні чати для двох сайтів?
В одному обліковому записі віджет один. Код можна вставити на обидва сайти, але вигляд, тексти й налаштування AI в них будуть однакові.