Як додати ШІ-асистента на сайт: покрокова інструкція
Як додати ШІ-асистента на сайт: покрокова інструкція
Уявіть: відвідувач заходить на ваш сайт о другій ночі з питанням про умови доставки. Менеджер спить — а ШІ-асистент вже відповідає, консультує та веде до покупки. Саме для цього і варто додати ШІ-асистента на сайт. У цій інструкції ми покажемо, як зробити це швидко, без програміста і без зайвих витрат.
Що потрібно перед початком
Перш ніж вставляти будь-який код, переконайтеся, що у вас є доступ до кількох речей. Це заощадить час і уникне непорозумінь на пізніших кроках.
Доступ до коду сайту або до адмін-панелі CMS. Вам потрібно вміти редагувати шаблон сторінки або вставляти довільний HTML у «підвал» сайту. В WordPress це робиться через плагін Insert Headers and Footers або напряму в footer.php; у Tilda — через «Налаштування сайту → HTML-код у
»; у Shopify — через theme.liquid.
Аккаунт на нашій платформі. Зареєструйтесь на aiagents.com.ua та створіть свого першого агента. Процес займає близько 3 хвилин.
Базова інформація про вашу компанію. Підготуйте короткий опис того, чим займається бізнес, — він стане основою для системного промпту агента.
Тестове середовище (бажано). Якщо маєте staging-версію сайту — спочатку перевірте на ній. Якщо ні — нічого страшного, скрипт безпечний для продакшну.
«Інтеграція ШІ-асистента — це не IT-проєкт на місяці. Це 20 хвилин роботи, після яких ваш сайт починає розмовляти з клієнтами 24/7.»
Крок за кроком: отримати код і вставити перед </body>
Нижче — детальна послідовність дій. Дотримуйтесь її, і все запрацює з першого разу.
Крок 1. Зайдіть у кабінет і створіть агента
Після реєстрації на платформі натисніть «Створити агента». Задайте ім'я (наприклад, «Консультант магазину»), оберіть мову спілкування та вкажіть коротку роль: «Ти — ввічливий помічник інтернет-магазину, відповідаєш на питання про товари та доставку.»
Крок 2. Перейдіть до розділу «Інтеграція» та скопіюйте скрипт
У лівому меню кабінету оберіть вашого агента → вкладка «Інтеграція». Там ви побачите готовий рядок HTML-скрипта. Він виглядає приблизно так:
Натисніть кнопку «Копіювати» — рядок потрапить у буфер обміну.
Крок 3. Знайдіть місце вставки у вашому сайті
Скрипт потрібно вставити якомога ближче до закриваючого тега </body>. Ось найпоширеніші варіанти залежно від платформи:
WordPress: Зайдіть у Зовнішній вигляд → Редактор → footer.php або скористайтеся плагіном Insert Headers and Footers (поле «Scripts in Footer»).
Tilda: Налаштування сайту → Ще → HTML у кінці <body>.
Shopify:Онлайн-магазин → Теми → Редагувати код → Layout/theme.liquid. Вставте рядок перед </body>.
Власний HTML-сайт: Відкрийте файл шаблону (зазвичай index.html або layout.html) і вставте скрипт перед останнім тегом </body>.
Крок 4. Вставте скопійований рядок і збережіть зміни
Вставте скрипт у потрібне місце й збережіть файл або натисніть «Опублікувати» у вашій CMS. Зміни набудуть чинності одразу або після кешування (зазвичай до 1 хвилини).
Перевірка: що робити, щоб переконатись, що віджет працює
Після збереження змін потрібно перевірити, що все підключилося коректно. Ось простий чек-лист:
Відкрийте ваш сайт у браузері в режимі інкогніто (Ctrl+Shift+N у Chrome) — це уникне кешованих версій.
Зачекайте 3–5 секунд. У кутку екрана (зазвичай внизу праворуч) має з'явитися іконка чату або спливаюче привітальне повідомлення.
Натисніть на іконку і поставте тестове питання — наприклад, «Привіт, що ви продаєте?» Асистент має відповісти протягом кількох секунд.
Перевірте консоль браузера (F12 → Console): помилок типу 404 або CORS бути не повинно.
Зайдіть у кабінет платформи → Діалоги і переконайтесь, що ваш тестовий діалог там зафіксований.
Якщо іконка не з'явилася — ще раз перевірте, чи скрипт справді вставлено перед</body>, а не після нього або всередині тегу <head>.
Оформлення під ваш бренд
Технічне підключення — лише половина роботи. Щоб асистент виглядав як рідна частина вашого сайту, а не сторонній віджет, налаштуйте його зовнішній вигляд у кабінеті платформи.
Що можна змінити
Кольори кнопки та чат-вікна — оберіть кольори, що збігаються з вашим брендбуком.
Аватар асистента — завантажте логотип або фото персонажа-помічника.
Ім'я та привітальне повідомлення — «Привіт! Я Оля, консультант магазину. Чим можу допомогти?» звучить набагато тепліше, ніж «Бот».
Позиція на екрані — лівий або правий нижній кут, відступи від країв.
Мобільна адаптація — перевірте, як виглядає чат на смартфоні, і при потребі зменшіть розмір кнопки.
Після кожної зміни в кабінеті вона застосовується автоматично — оновлення сторінки або зміни коду не потрібно.
Що робити далі: база знань і тонкі налаштування
Базово підключений асистент вже вміє відповідати на загальні питання. Але його справжня сила розкривається, коли ви наповнюєте його базою знань — конкретними даними вашого бізнесу.
Наповнення бази знань
У розділі «База знань» ви можете:
Завантажити PDF-файли (прайс, каталог, умови гарантії, FAQ).
Додати текстові сторінки з описами послуг або товарів.
Вставити URL ваших сторінок — асистент автоматично проіндексує їхній вміст.
Додаткові налаштування, що варто зробити одразу
Системний промпт. Чітко опишіть роль асистента, що він повинен і чого не повинен відповідати, якою мовою спілкуватись.
Сценарії ескалації. Налаштуйте, що відповісти, коли асистент не знає відповіді: запропонувати залишити email або зателефонувати менеджеру.
Аналітика діалогів. Щотижня переглядайте розмови — це найкраще джерело інформації про те, що хвилює ваших клієнтів.
Детальніше про всі можливості платформи читайте в нашому блозі — там регулярно з'являються нові гайди та кейси.
Поширені запитання
Чи потрібен програміст, щоб додати ШІ-асистента на сайт?
Ні. Достатньо вміти вставляти HTML-код у шаблон сайту. Більшість популярних CMS (WordPress, Tilda, Shopify) мають поле для довільного коду в підвалі — саме туди вставляється однорядковий скрипт. Якщо ви раніше вставляли код Google Analytics або пікселя Facebook — процес ідентичний.
Скільки часу займає підключення?
Від 5 до 30 хвилин залежно від вашої CMS і рівня підготовки. Реєстрація і створення агента — 3 хвилини. Вставка скрипта — 2–5 хвилин. Базове налаштування бренду — ще 10–15 хвилин. Більшість користувачів завершують базове підключення за 10 хвилин.
Чи вплине ШІ-асистент на швидкість сайту?
Скрипт завантажується асинхронно (атрибут async), тому він не блокує рендеринг сторінки і не погіршує показники Core Web Vitals. Вага скрипта мінімальна, а чат-вікно завантажується лише тоді, коли користувач натискає на іконку.
Чи можна налаштувати зовнішній вигляд асистента?
Так. У особистому кабінеті нашої платформи можна змінити кольори, аватар, привітальне повідомлення та позицію віджета на екрані. Всі зміни застосовуються миттєво без оновлення коду на сайті.
Що робити, якщо асистент дає неправильні відповіді?
Наповніть базу знань точними даними: FAQ, каталог товарів, умови доставки. Що більше релевантної інформації ви додасте, то точнішими будуть відповіді асистента. Також перегляньте та уточніть системний промпт — він задає межі і стиль спілкування агента.
Якщо у вас залишились питання або ви хочете дізнатись, яке рішення найкраще підійде для вашого бізнесу, — перейдіть на головну сторінку і ознайомтесь із доступними планами. Ми також регулярно публікуємо нові інструкції та кейси в нашому блозі.
Продовжити через Google