Як встановити чат на сайт

Що дає встановлення

• Один код на два віджети — той самий рядок підключає чат і розумний пошук.
• Налаштування без правки сайту — колір, тексти, модель AI сайт отримує під час кожного завантаження сторінки.
• Будь-яка CMS — підійде сайт, у шаблон якого можна додати свій HTML-код.
• Мова сторінки — чат сам визначає мову і бере тексти цієї мови.
• Захист від роботів — сервіси перевірки й пошукові роботи чат не завантажують.

Де це і хто має доступ

Окремого пункту меню у налаштувань віджета немає. Вони відкриваються плиткою з вікна «Категорії».

Меню

Довідники → Категорії → блок «Інструменти каталогу» → плитка «Налаштування віджету - Розумний помічник»

Право доступу

вікно «Категорії»: плитка налаштувань віджета є тільки там

Підготувати

доступ до шаблону сайту або людину, яка може вставити в нього код

У тому самому блоці стоїть плитка «Налаштування віджету - Розумний пошук». Це інший віджет, пошук по каталогу, але код для сайту в них спільний — про це в кроці 2.

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

1

Налаштування віджету - Розумний помічник

2

Налаштування віджету - Розумний пошук

1. Плитка «Налаштування віджету - Розумний помічник» — звідси відкриваються налаштування чату і код для сайту.
2. Плитка «Налаштування віджету - Розумний пошук» — інший віджет, але код для сайту в них спільний.

Крок 1. Відкрити налаштування і перевірити «Активність»

Відкрийте плитку. Якщо вікно відкривається вперше, програма в цю мить сама заводить віджет, і перемикач «Активність» у ньому вже ввімкнений. Віджет на обліковий запис один: друге відкриття показує той самий віджет, нового не створює.

Вкладка «Налаштування», рядок перемикачів угорі. Для встановлення важливі два:

• «Активність» — вимкнений віджет не потрапляє в код для сайту взагалі, а якщо код уже стоїть на сайті, чат перестає з'являтися.
• «Відображати чат AI» — вимкнений прибирає кнопку чату зі сторінок, хоча сам віджет на сайті завантажується. За замовчуванням увімкнений.

Кнопки «Зберегти» у вікні немає, і вона не потрібна. Будь-яка зміна поля одразу зберігає всю форму, а під час закриття вікна форма зберігається ще раз.

1

Активність

2

Відображати чат AI

1. Активність — вимкнений віджет зникає з коду для сайту і з самого сайту.
2. Відображати чат AI — вимкнений прибирає кнопку чату, віджет при цьому вантажиться.

Крок 2. Скопіювати код

На тій самій вкладці «Налаштування» прокрутіть донизу, до розділу «Код інтеграції». У полі «Для віджету» лежить готовий код. Поле тільки для читання. Кнопка біля назви поля (підказка «Копіювати») забирає код цілком, після цього з'являється повідомлення «Текст скопійовано в буфер обміну».

1

Кнопка копіювання

2

Поле «Для віджету»

1. Кнопка копіювання забирає код цілком — вручну виділяти його не потрібно.
2. Цей рядок вставляють у шаблон сайту один раз, перед закриваючим тегом body.

Що варто знати про цей код:

• Ваших налаштувань у ньому немає. Тільки адреса сервісу, ідентифікатор облікового запису і номер віджета. Колір кнопки, тексти, модель AI сайт отримує заново під час кожного завантаження сторінки, тому після зміни налаштувань код на сайті міняти не треба.
• Код один на два віджети. Якщо ввімкнений ще й «Розумний пошук», той самий рядок підключає обидва. У налаштуваннях розумного пошуку показаний саме цей код. На сайті має стояти один такий рядок, не два.
• Поле оновлюється тільки під час відкриття вікна. Ввімкнули «Активність» у вже відкритому вікні — у полі досі старий код, без чату. Закрийте вікно, відкрийте знову і тоді копіюйте.

Перевірити, що в скопійованому коді є чат, можна на око: у ньому має бути адреса widget-esa.elbuz.com. Якщо є тільки widget-ess.elbuz.com, це код одного лише розумного пошуку.

Крок 3. Вставити код у шаблон сайту

Код — звичайний блок <script>. Спеціального модуля для CMS тут немає: підійде будь-який сайт, у шаблон якого можна додати власний HTML-код.

1. Відкрийте загальний шаблон, який виводиться на всіх сторінках: зазвичай це підвал сайту.
2. Вставте код перед закриваючим тегом </body>. Якщо CMS має окреме поле для сторонніх скриптів у підвалі чи в шапці, можна туди.
3. Збережіть шаблон.

В OpenCart 3 загальний підвал — файл catalog/view/theme/<ваша тема>/template/common/footer.twig.

Чат з'являється тільки на тих сторінках, де завантажився код. Вставили його в шаблон картки товару, а не в загальний — на головній і в кошику чату не буде. Іноді так і треба (див. типові ситуації).

Крок 4. Перевірити, що чат працює

1. Відкрийте сайт у звичайному браузері, не в сервісі перевірки швидкості.
2. Поворушіть мишею, прокрутіть сторінку або натисніть будь-що. Кнопка чату з'являється тільки після першої дії відвідувача (про це нижче).
3. Знайдіть кнопку. Без змін у налаштуваннях вона стоїть внизу зліва.
4. Відкрийте чат і напишіть тестове повідомлення. Розмова з'явиться у вікні «Чат діалоги» (Органайзер → Чат діалоги), як звичайне звернення. Як з ним працювати, розказує стаття про вікно «Чат діалоги».

Тестове повідомлення — справжнє звернення, і відповідь робота на нього — такий самий виклик моделі AI, як для будь-якого відвідувача.

Браузер запам'ятовує розмову: відкриєте сайт завтра в тому самому браузері — продовжиться той самий чат. Для чистої перевірки відкрийте сайт у приватному вікні.

Якщо кнопки немає, відкрийте консоль браузера (F12, вкладка Console) і знайдіть рядки віджета:

Чому кнопки чату може не бути

Віджет проходить кілька перевірок, і кожна може зупинити його мовчки, без помилки на сторінці.

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

• Немає жодної дії за 30 секунд — на цьому перегляді сторінки чату не буде, з'явиться він після перезавантаження і дії.
• Браузери, які представляються роботами (PageSpeed, Lighthouse, headless-браузери, пошукові роботи), чат не бачать ніколи. Тому звіт сервісу перевірки швидкості без чату — норма.

Як чат вибирає мову сторінки

Віджет визначає мову сторінки сам, по черзі:

1. атрибут lang тегу <html>, частина до дефіса (uk-UA → uk);
2. мета-тег content-language;
3. мета-тег og:locale;
4. мова браузера відвідувача.

Останній пункт і є пасткою. Якщо в шаблоні немає lang і мета-тегів мови, відвідувач з англійським браузером отримає чат англійською навіть на українській сторінці. Перевірте, що кожна мовна версія сайту має правильний lang.

Код мови з сайту програма шукає серед мов у вікні «Мова» (Довідники → Мова): за колонкою «Код мови», за колонкою «Код мови на сайті» або за першими літерами коду.

Сайтний uk сам зіставляється з мовою ua, а ru, en, pl збігаються як є. «Код мови на сайті» заповнюють, лише коли сайт позначає мову інакше, ніж програма; вписуйте частину до дефіса, бо віджет передає тільки її.

1

Код мови на сайті

2

Код мови

1. Колонку «Код мови на сайті» заповнюють, коли сайт позначає мову інакше, ніж програма.
2. У колонці «Код мови» сайтний код uk сам зіставляється з мовою ua, en, ru, pl — як є.

Що залежить від знайденої мови:

• Тексти чату — заголовок вікна, рядки в шапці й підвалі — беруться з мовної вкладки на вкладці «Інформація» налаштувань віджета. Мову, якої серед активних мов магазину немає, чат показує текстами іншої мови. Що саме там заповнювати, розказує стаття про налаштування віджета.
• Службові написи самого вікна чату є українською, російською, англійською і польською; для інших мов — англійською.
• Посилання на товари, які чат дає відвідувачу, складаються з поля «Посилання на сайт» мовної вкладки і адреси товару. Поле порожнє — посилання ведуть на поточний сайт. Якщо мовні версії живуть на різних адресах (наприклад, з префіксом /en/), впишіть на вкладці кожної мови її адресу.

На яких доменах працює код

Білого списку доменів у віджета немає: запити з будь-якого сайту сервіс обслуговує так само. Код працює на будь-якій сторінці, куди його вставили. Що з цього випливає:

• Тестова копія сайту, локальна версія чи другий домен магазину — чат там запрацює так само. Звернення з них потрапляють у те саме вікно «Чат діалоги», і AI відповідає на них так само, як на основному сайті.
• Поле «Адреса сайту» на вкладці «Налаштування» доступ не обмежує.
• Щоб чату не було на тестовому сайті, приберіть код із шаблону саме цього сайту. Перемикач «Активність» вимкне чат одразу на всіх сайтах.

Як тимчасово прибрати чат із сайту

Поки «Активність» знята, скопійований з поля «Для віджету» код не містить частини про чат. Не вставляйте на сайт код, скопійований у цей час, — після ввімкнення чату він не з'явиться.

Сценарії

Перше встановлення

Відкрийте плитку, переконайтеся, що «Активність» увімкнена, скопіюйте код з поля «Для віджету» і вставте перед </body> у загальному підвалі. Відкрийте сайт, поворушіть мишею — кнопка з'явиться внизу зліва. Далі налаштовуйте вигляд і тексти та джерела відповідей AI.

На сайті вже стоїть розумний пошук

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

Чат потрібен не завжди

Наприклад, на час, коли нікому відповідати. Зніміть «Активність», код на сайті залиште. Ввімкнете — чат повернеться з тими самими налаштуваннями, нічого вставляти не треба.

Магазин двома мовами

Перевірте lang у тегу <html> на кожній мовній версії. Заповніть тексти і «Посилання на сайт» на вкладці кожної мови. Якщо сайт позначає мову кодом, якого немає в колонці «Код мови», впишіть його в «Код мови на сайті».

Чат лише на окремих сторінках

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

Що робити, коли кнопки чату немає

Часті запитання

Чи треба міняти код на сайті після зміни налаштувань чату?

Ні. У коді немає ваших налаштувань, тільки адреса сервісу та ідентифікатори. Колір, тексти й модель AI сайт отримує заново під час кожного завантаження сторінки.

На сайті вже стоїть код розумного пошуку. Додати ще один?

Ні, замініть. Код один на обидва віджети: той, що в полі «Для віджету», підключає і пошук, і чат, якщо обидва ввімкнені.

Чи можна дозволити чат тільки на моєму домені?

Ні, білого списку доменів немає. Код працює на будь-якому сайті, куди його вставили, і звернення звідти потрапляють у ваше вікно «Чат діалоги». Щоб чату не було на певному сайті, приберіть код із його шаблону.

Чому PageSpeed і сервіси перевірки не бачать чату?

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

Чи можна поставити чат лише на деяких сторінках?

Так. Чат є тільки там, де завантажився код, тому вставте його в шаблони потрібних сторінок, а не в загальний підвал.

Чи можна мати два різні чати для двох сайтів?

В одному обліковому записі віджет один. Код можна вставити на обидва сайти, але вигляд, тексти й налаштування AI в них будуть однакові.

Суміжні теми

• Якщо потрібна загальна картина чату — розумний чат для сайту: з чого почати.
• Якщо кнопка з'явилася і треба підібрати вигляд і тексти — налаштування віджета чату.
• Якщо робот після встановлення нічого не знає про магазин — звідки AI в чаті бере відповіді.
• Якщо перші звернення вже прийшли — вікно «Чат діалоги».