Поставити на сайт

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

Це найчастіший сценарій: у кутку сторінки з'являється кругла кнопка, відвідувач її натискає — і говорить із вашим агентом.

Крок 1. Узяти код

1. Відкрийте агента → Підключення.
2. Перший блок зверху називається Код для сайту.
3. Натисніть Копіювати — код опиниться в буфері обміну.

Виглядає він приблизно так:

<script src="https://youselfbot.com/widget.js" data-bot-key="pk_ваш_ключ"></script>

Цей код вставляють один раз і назавжди

Усе, що ви потім зміните в кабінеті — заголовок, привітання, кольори, — вікно підхопить саме. Перевставляти код не треба ніколи.

Крок 2. Вставити на сайт

Код треба вставити перед закриттям тега </body> — тобто в самий низ сторінки. І на кожній сторінці, де має з'являтися вікно.

Звичайний сайт

Якщо ви редагуєте HTML-файли самі, відкрийте шаблон сторінки, знайдіть у кінці рядок </body> і вставте код безпосередньо перед ним. Якщо шаблон один на весь сайт — цього достатньо.

WordPress

Найпростіше — через налаштування теми або плагін для вставки коду:

1. У панелі WordPress знайдіть місце, де тема дозволяє додати власний код у підвал сторінки. У багатьох тем це Зовнішній вигляд → Налаштування теми → Додатковий код або окремий пункт із назвою на кшталт «Footer scripts».
2. Якщо такого пункту немає, встановіть будь-який плагін для вставки коду в шапку/підвал.
3. Вставте код у поле для підвалу (footer), а не для шапки.
4. Збережіть і оновіть головну сторінку сайту.

Не редагуйте файли теми напряму

Правки у файлах теми зникнуть під час її наступного оновлення. Використовуйте налаштування теми або плагін.

Tilda

1. Відкрийте потрібний проєкт → Налаштування сайту.
2. Розділ Ще → HTML-код для вставки всередину head і body.
3. Вставте код у поле для кінця body.
4. Збережіть і опублікуйте сайт — на Tilda зміни з'являються лише після повторної публікації всіх сторінок.

Інші конструктори

Принцип скрізь однаковий: шукайте налаштування з назвою «власний код», «код у підвалі», «footer code», «код перед </body>». Вставляйте туди.

Крок 3. Обмежити, де вікно працює

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

1. Підключення → блок Дозволені сайти.

2. Впишіть адреси свого сайту — по одній на рядок:

   https://my-shop.com
   https://www.my-shop.com

3. Натисніть Зберегти перелік.

Домен із «www» і без нього — це різні адреси

Якщо ваш сайт відкривається і як my-shop.com, і як www.my-shop.com, впишіть обидва рядки. Інакше на одному з них вікно не з'явиться.

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

Крок 4. Налаштувати вигляд вікна

Блок Вигляд вікна на тій же сторінці. Праворуч — живий зразок: усе, що ви міняєте зліва, одразу видно справа.

Текст

Заголовок вікна — те, що написано вгорі вікна. Наприклад, «Помічник» або «Магазин світла».

Привітання — перша фраза, яку бачить відвідувач: «Вітаю! Чим можу допомогти?».

Підказки під привітанням — до чотирьох готових питань, які відвідувач може натиснути замість того, щоб думати, з чого почати. Натисніть + підказка, впишіть питання, наприклад «Які у вас ціни?». Зайву приберіть хрестиком.

Підказки помітно піднімають кількість розмов

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

Розташування й тема

Розташування — Праворуч унизу або Ліворуч унизу.

Тема — три варіанти:

• Як на сайті — вікно стежить за темою сторінки й перемикається разом із нею;
• Світла — завжди світле;
• Темна — завжди темне.

Кольори

Колір бренду — головний акцент вікна: кнопка, активні елементи. Оберіть колір, близький до кольорів сайту.

Не підлаштовуватись під сайт — за замовчуванням у темі «Як на сайті» вікно бере фон і текст зі стилю сторінки, щоб виглядати рідним. Увімкніть цей перемикач, якщо хочете, щоб воно всюди виглядало однаково.

Свої кольори — точне налаштування для світлої й темної тем: Фон, Поверхня, Текст. Порожнє значення означає стандартний колір вікна — так і написано в рядку: «стандарт». Кнопка Скинути всі кольори повертає все до стандартних.

Контакти

Просити контакт — коли перемикач увімкнено, у вікні з'являється кнопка «Залишити контакт». Те, що відвідувач залишить, ви побачите у зверненнях.

Коли все налаштовано, натисніть Зберегти вигляд. Поруч видно нагадування: «Зміни ще не застосовано на сайті» — доки ви не збережете.

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

1. Відкрийте свій сайт у звичайному вікні браузера (не в кабінеті).
2. У кутку має з'явитись кругла кнопка. Натисніть її.
3. У вікні має бути ваш Заголовок вікна, ваше Привітання й ваші підказки.
4. Поставте питання, відповідь на яке точно є у знаннях.
5. Натисніть у вікні кнопку виклику оператора — розмова має з'явитися в розділі Розмови вашого агента.

Якщо на якомусь із кроків щось пішло не так — див. Якщо щось не працює.

Ключі агента

Блок Ключі на тій самій сторінці містить три ключі. У повсякденній роботі вам потрібен лише перший.

Публічний — той, що вже стоїть у коді для сайту. Він не секретний: його видно кожному відвідувачу, і це нормально. Саме тому важливо заповнити Дозволені сайти.

Серверний — потрібен, лише якщо ваш програміст вбудовує агента у власну систему. Тримайте його подалі від сторінок сайту.

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

Новий ключ показується рівно один раз

Кнопка Створити новий біля серверного ключа або ключа підтвердження робить дві речі: старий ключ перестає працювати одразу, а новий з'являється в плашці «Новий серверний ключ — скопіюйте зараз». Після оновлення сторінки він зникне назавжди. Якщо не зберегли — доведеться створювати ще один.

---

Для розробника

Далі — тільки для тих, хто редагує код сторінки самостійно.

Що робить сніпет

Тег <script> завантажує widget.js і читає з нього налаштування, які кабінет дописує в атрибути. Мінімально обов'язковий атрибут один — data-bot-key із публічним ключем агента (pk_…).

Кабінет може додати ще кілька, якщо ви їх налаштували:

Атрибут	Що задає
data-bot-key	публічний ключ агента — обов'язковий
data-api	адреса сервера, якщо кабінет і сервер на різних доменах
data-title	заголовок вікна
data-greeting	привітання
data-accent	колір бренду
data-position	left, якщо вікно ліворуч унизу

Ці ж значення живуть у налаштуваннях агента, тож дублювати їх в атрибутах не обов'язково — сніпет із самим data-bot-key працює повністю.

Додаткові атрибути

Атрибут	Що робить
data-theme	примусова тема вікна замість налаштованої
data-fit-site	вимкнути підлаштування під стилі сторінки
data-page-context	передавати агентові, яку сторінку зараз читає відвідувач
data-user-token	підтвердження особи відвідувача, видане вашим сервером
data-user-token-cookie	ім'я cookie, з якої брати таке підтвердження

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

Свій інтерфейс замість вікна

Якщо ви хочете власний чат, а не наше вікно, агент доступний напряму — див. Для розробника.

Далі

Щоб міг відповісти живий оператор — щоб клієнт міг покликати людину, а ви побачили це вчасно.