Як зробити AI chatbot для сайту безкоштовно: покроковий туторіал 2026 - Aitematic

Якщо відвідувачі твого сайту йдуть без відповіді на свої питання — ти втрачаєш клієнтів. AI chatbot вирішує цю проблему: відповідає 24/7, розвантажує підтримку і підвищує конверсію. У цьому туторіалі ми зберемо повноцінного чатбота на базі Botpress та OpenAI API і вбудуємо його на сайт — безкоштовно, без знань програмування. Весь процес займе близько 40–60 хвилин.

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

Botpress (botpress.com) — платформа для створення чатботів з безкоштовним планом до 2000 повідомлень на місяць; саме тут будемо будувати логіку бота
OpenAI API ключ — для підключення ChatGPT-моделі; новий акаунт отримує $5 кредитів безкоштовно, яких вистачить на старт
Будь-який сайт — WordPress, Wix, Webflow, або просто HTML-файл; нам потрібен доступ до коду сторінки щоб вставити скрипт
Браузер Chrome або Firefox — для роботи з інтерфейсом Botpress; мобільна версія не підходить

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

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

Перейди на botpress.com, натисни кнопку “Get Started Free” у правому верхньому куті. Зареєструйся через Google-акаунт — це найшвидший варіант, підтвердження пошти не потрібно. Після входу ти потрапиш у дашборд: натисни велику кнопку “Create Bot”, введи назву (наприклад, “Підтримка сайту”), обери шаблон “Empty Bot” і натисни “Create Bot”. Botpress відкриє візуальний редактор потоків — відтепер це твоє головне робоче середовище.

Крок 2: Підключення OpenAI до Botpress

У лівому меню редактора знайди іконку ⚙️ (Integrations) → натисни “AI / LLM” → вибери “OpenAI”. Botpress попросить API ключ. Щоб отримати його: відкрий нову вкладку, зайди на platform.openai.com, зліва натисни “API Keys” → “Create new secret key” → скопіюй ключ (він показується лише один раз!). Поверніться в Botpress, встав ключ у поле “API Key”, у полі “Model” вибери “gpt-4o-mini” — вона найдешевша і достатньо розумна для підтримки. Натисни “Save”.

Крок 3: Налаштування особистості та знань бота

У лівому меню перейди в розділ “AI Agent” → вкладка “Personality”. У полі “System Prompt” напиши інструкцію для бота — наприклад: “Ти помічник інтернет-магазину ‘Квіти UA’. Відповідай лише українською. Будь ввічливим і коротким. Якщо не знаєш відповіді — запропонуй зв’язатися з оператором за номером 0800-123-456.” Далі перейди у вкладку “Knowledge Base” → натисни “Add Content” → вибери “Text” і встав FAQ свого бізнесу: години роботи, умови доставки, популярні питання. Натисни “Save & Train” — навчання займе 1–2 хвилини.

Крок 4: Побудова діалогового потоку

Натисни на вкладку “Flows” у верхньому меню — відкриється канвас з вузлами. За замовчуванням є вузол “Start”. Клікни на нього і в правій панелі у полі “Bot says” введи привітання: “Привіт! 👋 Я AI-помічник. Чим можу допомогти?” Потягни стрілку від вузла Start і додай новий вузол — натисни “+” → вибери “AI Task”. У полі “Instructions” напиши: “Обробляй запит користувача та відповідай на основі бази знань.” Потягни стрілку від AI Task до вузла “End”. Натисни “Publish” у правому верхньому куті — бот стає активним.

Крок 5: Вбудовування чатбота на сайт

У лівому меню натисни “Integrations” → вибери “Web Chat” → натисни “Enable”. Botpress згенерує готовий HTML-скрипт — скопіюй його повністю. Якщо у тебе WordPress: зайди в адмін-панель → Зовнішній вигляд → Редактор тем → header.php, встав скрипт перед тегом </body>, натисни “Оновити файл”. Якщо простий HTML-сайт: відкрий файл index.html у будь-якому текстовому редакторі, встав скрипт перед закриваючим тегом </body> і збережи. Після оновлення сторінки в правому нижньому куті сайту з’явиться іконка чату — твій бот готовий до роботи!

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

API ключ закрився до копіювання — OpenAI показує ключ лише один раз після створення. Одразу зберігай його в нотатках або менеджері паролів, перш ніж закрити вікно.
Бот відповідає англійською — у System Prompt обов’язково напиши “Відповідай виключно українською мовою незалежно від мови запиту”. Без цієї інструкції GPT за замовчуванням відповідає мовою запиту.
Скрипт вставлено в <head> замість </body> — чат може не відображатися або гальмувати завантаження сторінки. Завжди вставляй скрипт Botpress безпосередньо перед закриваючим тегом </body>.
Перевищено безкоштовний ліміт Botpress — на безкоштовному плані 2000 повідомлень на місяць. Підключи аналітику з першого дня: Integrations → Analytics, щоб бачити динаміку і не отримати сюрприз наприкінці місяця.

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

1. Додай кнопки швидких відповідей. У редакторі потоків після вузла привітання додай вузол типу “Choice” з варіантами: “📦 Доставка”, “💳 Оплата”, “📞 Контакти”. Це зменшує відмови і направляє користувача до потрібної інформації без зайвого тексту.

2. Завантаж PDF з документацією в Knowledge Base. У розділі Knowledge Base → Add Content → File можна завантажити прайс, FAQ або каталог у форматі PDF. Бот автоматично витягне з нього інформацію і використовуватиме у відповідях — набагато ефективніше, ніж вручну переносити текст.

3. Налаштуй передачу на оператора. Додай у System Prompt: “Якщо користувач пише ‘оператор’, ‘людина’ або ‘менеджер’ — відповідай: ‘Передаю тебе на менеджера. Напиши нам у Telegram: @yourname’”. Це знімає роздратування у складних ситуаціях.

4. Тестуй бота в режимі Preview перед публікацією. У Botpress є кнопка “Preview” у правому верхньому куті — запускай її після кожного великого оновлення і надсилай 10–15 реальних запитань від клієнтів. Так ловиш дивні відповіді до того, як їх побачать відвідувачі.

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

1. Чи дійсно це повністю безкоштовно?
Botpress безкоштовний до 2000 повідомлень на місяць. OpenAI дає $5 кредитів новому акаунту — при використанні gpt-4o-mini цього вистачить приблизно на 500 000 токенів, тобто тисячі діалогів. Для невеликого сайту першого місяця точно вистачить без жодних витрат.

2. Чи потрібні знання програмування?
Ні. Весь процес — це клікання у візуальному інтерфейсі та вставка одного рядка коду на сайт. Якщо маєш WordPress з плагіном Insert Headers and Footers — навіть у код лізти не треба, просто вставиш скрипт через плагін.

3. Що робити, якщо бот дає неправильні відповіді?
Відкрий розділ Knowledge Base і додай або виправ інформацію, потім натисни “Retrain”. Також уточни System Prompt — чим конкретніші інструкції, тим точніші відповіді. Перевіряй результат через Preview після кожного оновлення.

4. Чи можна підключити бота до Instagram або Telegram?
Так, Botpress підтримує Telegram, WhatsApp, Instagram і Facebook Messenger через розділ Integrations. Для кожного каналу є окрема інструкція з підключення — принцип той самий, що і для веб-чату.

5. Що буде, якщо я перевищу ліміт безкоштовного плану?
Botpress просто припинить обробку нових повідомлень до наступного місяця або поки не перейдеш на платний план (від $49/міс). Щоб уникнути несподіванок — увімкни сповіщення в Settings → Billing → Usage Alerts і встанови поріг на 80%.

🏁 Підсумок

За 40–60 хвилин ти створив повноцінного AI-чатбота: налаштував особистість і базу знань, побудував діалоговий потік і вбудував його на сайт — і все це без витрат і без коду. Тепер твій сайт відповідає відвідувачам цілодобово, знімаючи навантаження з тебе або твоєї команди.

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