Як зробити чат-бота для сайту через ШІ: покроковий туторіал

Q: Що робити, якщо бот дає неправильні відповіді?

Відкрий вкладку Analytics → Chat History, знайди некоректну розмову і визнач, чого не вистачало в базі знань. Додай точну інформацію у вкладці Sources і натисни Retrain Chatbot. Зазвичай після 2–3 ітерацій точність виходить на рівень 85–90%.

Якщо відвідувачі твого сайту не отримують відповідей миттєво — вони йдуть до конкурентів. ШІ-чат-бот вирішує цю проблему: він працює 24/7, відповідає на типові запитання та збирає ліди без твоєї участі. На весь процес — від реєстрації до встановлення на сайт — піде 1–2 години, а для старту не потрібні навички програмування. Єдине, що знадобиться — доступ до інтернету та текстовий опис твого бізнесу.

🛠️ Що знадобиться

Tidio або Chatbase — основна платформа для створення ШІ-бота; обидві мають безкоштовний тариф із базовим функціоналом
OpenAI API ключ — потрібен якщо хочеш підключити GPT-4o як мозок бота; перші $5 кредитів безкоштовно після реєстрації
Сайт на будь-якій платформі — WordPress, Tilda, Wix, чистий HTML — не має значення, всюди вставляється один рядок коду
Текстовий файл із FAQ або описом бізнесу — це “база знань” бота; достатньо 10–20 запитань і відповідей у форматі .txt або .pdf
Google Chrome або Firefox — для роботи з адмін-панеллю платформи

📋 Покрокова інструкція

Крок 1: Реєстрація та створення бота на Chatbase

Відкрий chatbase.co і натисни Get Started Free у правому верхньому куті. Зареєструйся через Google-акаунт — це найшвидше. Після входу ти потрапиш на дашборд: натисни велику кнопку + New Chatbot посередині екрану. Платформа одразу запропонує вибрати джерело даних — це і є “пам’ять” твого бота, звідки він черпатиме відповіді. На цьому кроці просто назви бота (наприклад, “Підтримка клієнтів”) і переходь далі.

Крок 2: Завантаження бази знань

Ти побачиш чотири вкладки: Files, Text, Website, Q&A. Найпростіший старт — вкладка Files: натисни Click to upload і завантаж свій PDF або TXT-файл із описом послуг, цінами та відповідями на типові запитання. Якщо файлу немає — переходь на вкладку Website, встав URL свого сайту і натисни Fetch links: бот сам зчитає весь текст із твоїх сторінок за 1–3 хвилини. Після завантаження внизу з’явиться лічильник символів — для нормальної роботи потрібно мінімум 5 000 символів. Натисни Create Chatbot — система почне навчання, зазвичай це займає до 2 хвилин.

Крок 3: Налаштування особистості та поведінки бота

Після навчання відкрий вкладку Settings → AI у лівому меню. У полі Base Prompt (System Instructions) вкажи чіткий опис: хто цей бот, як він має спілкуватися і чого не повинен робити. Приклад промпту: “Ти — дружній асистент інтернет-магазину взуття BrandShoes. Відповідай виключно українською мовою. Якщо не знаєш відповіді — скажи ‘Я передам ваше питання менеджеру’ і попроси залишити email. Ніколи не вигадуй ціни чи характеристики товарів.” Далі в полі Model обери GPT-4o для найкращих відповідей або GPT-3.5 Turbo для економії токенів. Натисни Save.

Крок 4: Кастомізація зовнішнього вигляду

Перейди у вкладку Settings → Chat Interface. Тут налаштуй: Display Name — ім’я бота (наприклад, “Аліна”); Initial Message — перше повідомлення, яке побачить користувач (наприклад, “Привіт! Чим можу допомогти?”); Suggested Messages — 3 кнопки з частими запитаннями, які з’являться одразу під вітанням. У розділі Theme натисни на кольоровий квадрат біля Primary Color і встанови колір, що відповідає твоєму брендингу. Завантаж аватар бота через кнопку Upload Image — фото або іконка розміром мінімум 100×100 пікселів. Усі зміни видно в реальному часі у вікні попереднього перегляду справа. Натисни Save Changes.

Крок 5: Встановлення бота на сайт

Перейди у вкладку Connect → Embed on Website. Ти побачиш два варіанти: Embedded Iframe (бот як вбудований блок на сторінці) та Chat Bubble (класна кнопка в кутку екрану) — обирай другий для більшості сайтів. Скопіюй код у форматі: <script src="https://www.chatbase.co/embed.min.js" chatbotId="ВАШ_ID" defer></script>. На WordPress: зайди в Зовнішній вигляд → Редактор → footer.php і встав код перед тегом </body>. На Tilda: відкрий Налаштування сайту → HTML-код у <head> і встав там. На чистому HTML: просто встав скрипт перед закриваючим тегом </body> у кожній сторінці. Збережи зміни, онови свій сайт у браузері — у правому нижньому куті має з’явитися кнопка чату. Протестуй кілька питань, щоб переконатися, що бот відповідає коректно.

⚠️ Типові помилки та як їх уникнути

Порожня або надто коротка база знань — якщо завантажити лише 2–3 речення, бот починає вигадувати відповіді. Завантаж мінімум повний опис послуг + 15–20 пар питання/відповідь із реальних звернень клієнтів.
Відсутність обмежень у промпті — без чітких інструкцій бот може відповідати на запитання не по темі або давати некоректну інформацію. Завжди додавай у промпт фразу типу “Відповідай лише на питання, пов’язані з [твоя сфера]”.
Неправильне місце вставки скрипту — якщо код вставити в <head> замість перед </body>, бот може не завантажитися або гальмувати рендеринг сторінки. Завжди перевіряй через DevTools (F12 → Console) — помилок не має бути.
Ігнорування мобільної версії — одразу після встановлення відкрий сайт на смартфоні і перевір, чи кнопка бота не перекриває важливі елементи. У налаштуваннях Chatbase можна змінити позицію бульбашки: ліворуч або праворуч.

💡 Поради для кращого результату

Додавай реальні питання від клієнтів: зайди в пошту або CRM, знайди 20 найчастіших звернень за останні 3 місяці і додай їх у базу знань у форматі Q&A — точність відповідей зросте вдвічі порівняно з завантаженням загального тексту.

Налаштуй “хендовер” до живого оператора: у Chatbase у розділі Settings → Leads увімкни збір email-адрес — коли бот не знає відповіді, він автоматично запитає контакт і надішле тобі сповіщення на пошту.

Оновлюй базу знань щомісяця: після кожного місяця роботи заходь у вкладку Analytics → Unanswered Questions — там видно всі питання, на які бот не зміг відповісти. Додай відповіді на ці питання в базу і перенавчи бота кнопкою Retrain.

Використовуй “Suggested Messages” стратегічно: замість загальних “Як вам допомогти?” постав конкретні кнопки з комерційним наміром: “Ціни на послуги”, “Як зробити замовлення”, “Час роботи” — конверсія в діалог зростає на 40%.

❓ Часті запитання (FAQ)

1. Чи потрібні навички програмування для створення бота?
Ні, весь процес через інтерфейс Chatbase — це кліки та заповнення текстових полів. Єдине технічне завдання — вставити один рядок коду на сайт, і з цим впорається навіть початківець за допомогою інструкції вище.

2. Скільки коштує утримання бота щомісяця?
Безкоштовний тариф Chatbase дає 20 повідомлень на день і 1 бота. Платний тариф Hobby коштує $19/місяць і дає 2 000 повідомлень + власний OpenAI ключ для необмежених запитів. Якщо підключити свій API-ключ OpenAI, вартість запиту становить близько $0.002 — тобто 1 000 розмов обійдуться менше $2.

3. Чи зможе бот спілкуватися українською мовою?
Так, GPT-4o чудово розуміє і генерує українські тексти. Головне — у System Prompt прямо вказати: “Завжди відповідай лише українською мовою, навіть якщо користувач пише іншою мовою”.

4. Що робити, якщо бот дає неправильні відповіді?
Відкрий вкладку Analytics → Chat History, знайди некоректну розмову і визнач, чого не вистачало в базі знань. Додай точну інформацію у вкладці Sources і натисни Retrain Chatbot. Зазвичай після 2–3 ітерацій точність виходить на рівень 85–90%.

5. Чи можна інтегрувати бота з Telegram або Instagram?
Так, Chatbase має вбудовані інтеграції з Telegram, WhatsApp і Slack у розділі Connect → Integrations. Для Telegram достатньо вставити токен бота з BotFather — і той самий ШІ-бот із тією самою базою знань запрацює в месенджері без додаткового налаштування.

🏁 Підсумок

Після виконання всіх кроків ти маєш повноцінного ШІ-асистента на сайті, який відповідає на питання клієнтів на основі твоїх даних, спілкується українською і збирає контакти зацікавлених відвідувачів. Весь процес займає 1–2 години і не вимагає коду чи технічних знань.

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