Як додати AI-чатбота на сайт без програмування

Ви можете додати AI-чатбота на свій сайт, надавши Агенту знання про бізнес, налаштувавши його відповіді та встановивши віджет чату за допомогою плагіна або готового скрипту. Чатбот для сайту від Quickchat AI об’єднує знання, налаштування розмов і командну скриньку Inbox в одному місці. Відвідувачі ставлять запитання на вашому сайті без створення облікового запису.

У цьому посібнику ми створимо чатбота для Kestrel Kitchens, вигаданої компанії з проєктування кухонь. Відвідувач запитує, скільки триває ремонт, уточнює ймовірну вартість кухні розміром 3 на 4 метри, а потім просить розрахунок вартості. Агент відповідає на основі інформації компанії, збирає відомості про проєкт і дає дизайнеру змогу продовжити розмову.

Основне налаштування не потребує програмування. Виконайте кроки для знань та інструкцій, збирання заявок і передавання розмови людині, а потім установіть віджет. Необов’язкова API Action надсилає заповнені заявки до іншої системи.

Завантажте комплект налаштування Kestrel Kitchens, що містить приклад сайту, знання, Main Prompt, налаштування та тестові повідомлення. Це редаговані файли для відтворення налаштувань у панелі, а не імпорт Агента одним натисканням.

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

Що робитиме чатбот на сайті?

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

Кожен із цих результатів потребує окремого підтвердження. Правильний діапазон цін надходить із Knowledge Base. Для заявки на розрахунок потрібні контактні дані й відомості про проєкт в Inbox. Для передавання розмови людина має взяти її на себе й надіслати відповідь, яка дійде до відвідувача.

Шлях відвідувача в прикладі. Заявка на розрахунок фіксує зацікавленість; ціну й доступність усе одно підтверджує дизайнер.

Що потрібно перед додаванням чатбота?

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

1. Створіть обліковий запис Quickchat AI і завершіть реєстрацію. Для цієї вправи використовуйте окремого Агента, щоб вигадані відомості не вплинули на чинну службу підтримки клієнтів.
2. Підготуйте сторінки послуг, відповіді на поширені запитання й правила або скористайтеся вигаданими знаннями з комплекту. Замініть вигадані ціни й територію обслуговування перед запуском для справжнього бізнесу.
3. Перевірте, чи дозволяє тариф вашого сайту відповідний спосіб установлення. WordPress потребує доступу до плагінів; деякі хостингові конструктори вимагають платного тарифу для додавання власного коду на весь сайт.
4. Домовтеся, щоб хтось стежив за тестовою скринькою Inbox під час перевірки передавання розмови людині. Для завершальних перевірок сайту підготуйте настільний браузер і телефон.

Free призначений для особистого некомерційного навчання. Тариф Free містить 50 AI-кредитів на місяць. Для бізнес-впровадження потрібен комерційний тариф, а тестування витрачає той самий ліміт відповідей, що й інші розмови з AI. Передплати конструкторів сайтів і витрати на зовнішні API оплачуються окремо. Розділ про вартість пояснює ці складові витрат.

Крок 1: Як навчити чатбота на матеріалах вашого сайту?

Додайте сторінки з відповідями вашого бізнесу до Knowledge Base, а потім перевірте імпортований вміст перед тестуванням. Так Агент отримає довідкові матеріали для відповідей.

Створіть Агента для навчання

1. На першому екрані налаштування виберіть Set up manually. У наявній панелі скористайтеся кнопкою + поруч з AI Agent (Add new AI Agent), щоб створити окремого Агента, а потім виберіть Set up manually.
2. У Identity введіть Kestrel Kitchens у полі Name your AI Agent. Вставте вміст main-prompt.txt із комплекту в Describe what you want your agent to do. Він стане Main Prompt Агента, описаним у кроці 2. Виберіть Next.
3. Поки залиште Knowledge Base порожньою та виберіть Next. Пройдіть External apps, не вибираючи підключення. У Deployment виберіть Chat widget, а потім Next.
4. На екрані Choose your plan скористайтеся Skip for now, щоб продовжити особисту навчальну вправу, або виберіть відповідний комерційний тариф для бізнесу. Прийміть або закрийте необов’язкову пропозицію, якщо вона з’явиться далі.
5. У панелі перевірте ім’я Агента в Identity, а потім відкрийте Knowledge Base. Виберіть власні сторінки або надану нижче статтю прикладу.

Імпортуйте власні сторінки

1. У Knowledge Base виберіть Add Website. Виберіть окрему сторінку або імпорт сайту залежно від потрібного обсягу.
2. Введіть публічну URL-адресу. Для імпорту сайту перегляньте знайдені сторінки й виберіть сторінки послуг, цін, процесів і поширених запитань, які мають бути джерелами відповідей.
3. Перевірте імпортований текст. Переконайтеся, що для цін правильно вказані валюта й податки, а застарілі акції чи сторонні сторінки не потрапили до джерел.
4. Дочекайтеся завершення обробки. Перед тестуванням установленого віджета застосуйте або опублікуйте всі незастосовані зміни знань, показані в панелі.

Почніть із кількох зрозумілих сторінок. Сайт може показувати привабливу картку ціни, а умови розміщувати деінде; Агенту потрібне і те, й інше. Імпорт лише головної сторінки може пропустити умови монтажу, географічні обмеження або правила повернення коштів, які роблять відповідь корисною.

Використайте джерело Kestrel Kitchens

Щоб відтворити приклад без попереднього розміщення сайту, додайте відомості безпосередньо:

1. У Knowledge Base виберіть Add Article. Це створить статтю Untitled і відкриє Edit Article.
2. Введіть Kestrel Kitchens: services, prices and process у Title. У Content виберіть Plain Text і вставте вміст knowledge.txt із комплекту.
3. Виберіть Save і дочекайтеся стану Ready. Переконайтеся, що назва статті з’явилася в списку Knowledge Base.

Збережена стаття містить умови щодо цін і строків. Її вигадані відомості відповідають прикладу сайту.

Kestrel Kitchens is a fictional kitchen design and renovation business used in this tutorial. It serves Bristol, Bath and addresses within 25 miles of central Bristol.

Services: kitchen design, supply and full installation. A full kitchen renovation typically costs £18,000 to £45,000 including VAT. This is a planning range, not a quote. The final price depends on the survey, layout, cabinetry, appliances and building work. Room dimensions alone are not enough to calculate a firm price.

Timelines: survey and design normally take 2 to 3 weeks. Installation usually takes 4 to 8 weeks after all materials are available. These are typical durations, not a promised start date or completion date.

Process: discuss the project, arrange a site survey, agree the design and receive a written quote, then schedule work once the quote is accepted and materials are available. The chatbot cannot book a survey or confirm availability.

The design team works Monday to Friday, 09:00 to 17:00, Europe/London. Quote enquiries need the visitor's full name, email, postcode and project type. A preferred timeline is helpful but optional. The team follows up by email. Do not promise a response deadline.

Джерело навмисно не уточнює умови фінансування. Це дає змогу перевірити, як Агент опрацьовує справжню прогалину в знаннях. Для реального сайту підтримуйте актуальність сторінок-джерел і використовуйте підтримувані налаштування оновлення, де вони доступні; посібник із Knowledge Base пояснює, як упорядковувати й перевіряти ці джерела.

Крок 2: Що чатбот має говорити й чого ніколи не обіцяти?

Використовуйте Main Prompt, щоб визначити, як Агент застосовує знання: спочатку відповідає на запитання, надає корисну відповідь і залишає команді рішення на кшталт остаточного кошторису.

Для Kestrel розміри приміщення визначають масштаб проєкту. Вони не визначають меблі, техніку чи будівельні роботи. Агент має пояснити наведений у джерелі орієнтовний діапазон від £18,000 до £45,000 з ПДВ, не розраховуючи точнішу ціну за площею підлоги.

Ці ціни є вигаданими навчальними даними. Важливо зберігати різницю між фактами з джерела й рішенням, яке ще має ухвалити ваша команда.

1. У Identity виберіть Edit на картці Main Prompt.
2. Вставте повний промпт нижче. Дочекайтеся збереження, а потім знову відкрийте редактор, щоб перевірити збережений текст.
3. Зберігайте відомості про бізнес у Knowledge Base. Використовуйте промпт для стилю відповідей, поведінки під час збирання даних і рішень, що потребують людини.

Main Prompt є полем інструкцій. Повний текст нижче та в комплекті призначений для копіювання.

You are the website assistant for Kestrel Kitchens. Help visitors understand our services, indicative prices and process using the Knowledge Base.

Answer the visitor's question before asking for contact details. Keep replies concise, usually two to four sentences. Use the visitor's language.

Treat prices as planning ranges. Never calculate a firm quote from room dimensions, invent a discount, promise a start date, confirm a survey booking or claim financing is available. If the Knowledge Base does not answer a question, say that a designer must confirm it.

When a visitor wants a quote or follow-up, collect their full name, email, postcode and project type in conversation. Ask one or two relevant questions at a time. Ask about their preferred timeline only after the required details, and accept a refusal without pressure. Do not ask for payment information.

Offer Human Handoff when the visitor asks for a designer or needs information you cannot confirm. Respect the configured working hours. Never claim that a designer is connected or a quote is booked. If the team is unavailable, offer an email follow-up.

Acknowledge the details the visitor has provided. Do not claim CRM delivery or a confirmed booking. The design team reviews enquiries in the Inbox.

Відкрийте AI Preview і запитайте How long does a full kitchen renovation take?. У локальному контрольному тесті Агент відповів: від 2 до 3 тижнів на обстеження та проєктування, потім від 4 до 8 тижнів на монтаж після надходження всіх матеріалів. Важливі як строки, так і умови.

Почніть нову розмову й запитайте Do you offer financing?. Правильна відповідь визнає, що джерело не підтверджує такої пропозиції, і скеровує запитання до дизайнера. Упевненіше формулювання промпту не додасть відсутнього факту про бізнес.

Крок 3: Як збирати заявки на розрахунок у чаті?

Smart Data Gathering запитує вибрану інформацію під час розмови й зберігає надані відвідувачем дані. Для заявки на розрахунок збирайте лише те, що потрібне дизайнеру для подальшого зв’язку.

1. Відкрийте Actions & MCPs, увімкніть Smart Data Gathering і виберіть Edit Action. Установіть Name на Quote enquiries, а Description на Capture contact and project details for a kitchen design enquiry. Збережена назва стане заголовком картки.
2. У Data to collect додайте наведені нижче рядки. Під час відтворення прикладу зберігайте ці англійські назви Data point; назви контактних даних мають спеціальні відповідності полям відвідувача в Inbox.
3. Установіть Reason for collecting information на So a Kestrel Kitchens designer can assess your project and follow up by email.
4. Установіть When to ask for data на After exchanging a few messages, а How to ask for data на Subtle.
5. Збережіть дію. В AI Preview поставте змістовне запитання про послугу перед запитом на розрахунок і перевірте збережені дані в Inbox.

Запитання описують інформацію, яку потрібно зібрати. Налаштування моменту й стилю визначають, коли запитувати; також перевірте саму розмову.

Ім’я, електронна пошта, поштовий індекс і тип проєкту є обов’язковими даними для заповненої заявки в цьому прикладі. Бажаний строк необов’язковий, як пояснює Main Prompt. Ця вимога бізнесу відокремлена від налаштувань збирання даних у розмові; крок 8 перевіряє обов’язкові поля перед надсиланням запиту до CRM.

Агент має відповідати на загальне запитання про вартість, не вимагаючи електронної адреси як умови отримання відповіді. Відвідувач також може відмовитися від збирання даних. Використайте I am only researching. I do not want to leave contact details., щоб перевірити, чи розмова залишається корисною без повторних запитів.

Куди потрапляють зібрані дані?

Відкрийте розмову в Inbox. Стандартні контактні дані відображаються в полях відвідувача; решта зібраних значень залишаються прикріпленими до розмови, і їх можна експортувати через Export Gathered Data.

У Where to send data параметр Email new leads сповіщає кожного адміністратора Агента, коли вперше зібрано електронну адресу або номер телефону. Самого імені недостатньо для надсилання листа. Preview і Simulation не надсилають цих сповіщень, тому перевірте власну поштову скриньку адміністратора контрольним тестом в установленому віджеті, перш ніж покладатися на доставку листів. У локальному прикладі надсилання зовнішніх листів вимкнено.

Документація Smart Data Gathering описує збирання даних, сповіщення й експорт. На власному сайті поясніть, навіщо запитуєте інформацію, і додайте у віджет посилання на повідомлення про конфіденційність. Посібник із захисту даних у чатботі допоможе перевірити загальний потік даних.

Крок 4: Як дати людині змогу продовжити чат?

Human Handoff передає розмову вашій команді; потім людина бере її на себе в Inbox і відповідає тому самому відвідувачу.

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

1. У Actions & MCPs увімкніть Human Handoff і відкрийте Edit Action.
2. Залиште стандартні правила Media Message, User Frustration, Customer Support Suggestion і Lack Of Knowledge увімкненими; Irrelevant Advice залиште вимкненим. Main Prompt уже пояснює, коли пропонувати дизайнера. Перевірений приклад використовує ці стандартні правила без додавання власних.
3. Налаштуйте наведені нижче повідомлення й доступність, а потім збережіть. Для навчальної вправи залиште Email notifications вимкненим і перевіряйте передавання безпосередньо в Inbox.

Укажіть години, коли людина справді стежить за Inbox. Вигаданий графік не є обіцянкою негайної відповіді.

У робочий час команди запитайте на сайті Can I speak to a designer?. Підтвердьте передавання, якщо Агент цього попросить. В Inbox відкрийте розмову та виберіть Assign to me, якщо вона не призначена нікому, або Take over, коли показано цю кнопку. Надішліть відповідь від людини й переконайтеся, що відвідувач її отримав. Скористайтеся Reassign to AI, коли AI має знову відповідати.

Перевірте відповідального й доставлену відповідь людини, а не лише пропозицію Агента передати розмову.

Повторіть перевірку в новій розмові поза налаштованими годинами. Агент має пояснити доступність і запропонувати вказаний спосіб подальшого зв’язку. Якщо ви тимчасово змінюєте графік для цієї перевірки, потім відновіть справжній. Документація Human Handoff пояснює налаштування й роботу з Inbox.

У покроковому посібнику з передавання діалогу від чатбота людині окремо перевіряються призначення відповідального за розмову, повернення до ШІ та збої поза робочими годинами.

Крок 5: Як узгодити віджет із виглядом сайту?

Налаштуйте зовнішній вигляд і фіксований текст у Channels → Your Website. Привітання має достатньо конкретно пояснювати, про що відвідувач може запитати.

Зовнішній вигляд

1. Відкрийте Appearance. Для Kestrel виберіть тему Custom з білим тлом, темно-зеленими заголовком і акцентом (#315448) та білим текстом заголовка. Залиште стандартний розмір тексту й заокруглені елементи керування.
2. У Branding → AI Agent Avatar натисніть значок завантаження аватара, виберіть website/kestrel-avatar.png із комплекту та натисніть Upload у діалозі кадрування.
3. Установіть Widget window max width на 400px, а Widget window max height на 520px. Виберіть Small для розміру кнопки відкриття, розташуйте її праворуч і задайте напис Ask about your kitchen. Напис доступний для малої кнопки. Перевірте її положення відносно банера cookie та інших плавучих елементів керування на сайті.
4. Залиште Auto-open Widget вимкненим. Відкриття віджета під час кожного завантаження сторінки перериває перегляд, особливо на телефоні.

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

Текстовий вміст

Відкрийте Text Content і використайте такі значення:

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

Агент може відповідати мовою відвідувача. Переклад фіксованого привітання й написів віджета є окремим налаштуванням у Other languages, доступним на платних тарифах. Для багатомовного сайту перевіряйте і відповідь, і фіксований текст інтерфейсу; посібник із багатомовних чатботів пояснює цю різницю.

Зміни зовнішнього вигляду можуть з’являтися в кешованих сеансах відвідувачів через кілька хвилин. Перезавантажте сторінку, перш ніж робити висновок, що збереження не спрацювало. Hide Quickchat AI Branding потребує тарифу Professional або вищого; посібник із власного брендування описує інші місця, які слід перевірити.

Крок 6: Як установити чатбота на сайт?

Установіть Widget у спільний шаблон сайту або скористайтеся підтримуваною інтеграцією платформи. Плавучий Widget має працювати на сторінці, яку переглядає відвідувач.

1. Відкрийте Channels → Your Website → Install.
2. Увімкніть Widget & Embed access для публічного віджета.
3. Виберіть спосіб установлення для свого сайту та скопіюйте фрагмент коду або Scenario ID, показаний для цього Агента.
4. Опублікуйте зміну, відкрийте публічний сайт і поставте запитання, відповідь на яке точно є в Knowledge Base.

Копіюйте з екрана Install саме цього Агента. Його Scenario ID є публічним ідентифікатором віджета, а не приватним API-ключем.

Будь-який сайт: вставте код Widget перед закривальним тегом body

Виберіть Install manually with code і скопіюйте код Widget. Поточний завантажувач має такий вигляд:

<script>
  (function(e,a,d,i,c,t=a.createElement(d)){e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},t.src=i,t.async=1,a.body.insertAdjacentElement("beforeend",t)})(window,document,"script","https://bubble.quickchat.ai/chat.js","_quickchat");
  _quickchat("init", "YOUR_SCENARIO_ID");
</script>

Замініть YOUR_SCENARIO_ID значенням з Install. Вставте повний фрагмент коду один раз, безпосередньо перед </body> у спільному шаблоні або використайте загальне для всього сайту поле коду футера в конструкторі. Цей завантажувач вставляє скрипт у тіло сторінки, тому розміщення в head до появи body може завадити завантаженню.

Місце розміщення має значення. HTML-блок на основі iframe є окремою сторінкою й не підходить для цього плавучого Widget.

Окремий варіант Embed розміщує чат усередині контейнера сторінки. Використовуйте згенерований для нього код, якщо потрібен вбудований розділ чату. HTML-блок, що вставляє код безпосередньо в сторінку, може підтримувати такий підхід; блок конструктора, що ізолює код в iframe, є іншим випадком. Дивіться документацію каналу Website.

WordPress: установіть офіційний плагін

1. У WordPress відкрийте Plugins → Add New, знайдіть Quickchat AI Agent, а потім виберіть Install Now і Activate.
2. Відкрийте Settings → Quickchat AI Agent.
3. Вставте Scenario ID з екрана Install у Quickchat AI й виберіть Save Changes.
4. Відкрийте публічну сторінку й перевірте віджет. Використовуйте або плагін, або ручний фрагмент коду, щоб не встановити завантажувач двічі.

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

Squarespace: додайте код у футер через Code Injection

1. Відкрийте панель Code Injection сайту. Скористайтеся пошуком налаштувань у панелі, якщо навігація у вашому обліковому записі відрізняється.
2. Вставте повний код Widget у Footer і збережіть.
3. Відкрийте опубліковану сторінку в окремій вкладці браузера й перевірте відповідь.

Squarespace надає Code Injection на тарифах Core, Plus, Advanced і деяких старих тарифах. Вставлення у Footer розміщує код перед </body> на всьому сайті. Для плавучого віджета використовуйте саме це місце; iframe-блок окремої сторінки не є рівноцінним. Цей власний код не поширюється на сторінки оформлення замовлення Squarespace.

Wix: додайте власний код у Body - end

1. У панелі сайту відкрийте Settings → Custom Code, а потім + Add Custom Code.
2. Вставте код Widget і назвіть його Quickchat AI widget.
3. Застосуйте його до All pages, виберіть Body - end, а потім Apply.
4. Перевірте опублікований сайт, зокрема перехід на іншу сторінку.

Wix вимагає опублікованого сайту з підключеним доменом для власного коду. Для цього плавучого віджета використовуйте налаштування Custom Code для всього сайту.

Webflow: додайте код у футер і опублікуйте сайт

1. Відкрийте Site settings → Custom code.
2. Вставте код Widget у Footer code і виберіть Save changes.
3. Натисніть Publish, вибравши потрібний домен, а потім перевірте опубліковану URL-адресу.

Налаштування власного коду Webflow потребують відповідного платного Workspace або активного тарифу Site. Саме збереження налаштування не публікує його.

Shopify: виберіть код наявного Агента або застосунок Shopify

Для вже створеного Агента Kestrel додайте його код Widget безпосередньо перед </body> у Online Store → Themes → Edit code → layout/theme.liquid, потім збережіть і перевірте вітрину магазину. Перед редагуванням створіть резервну копію теми й повторно перевіряйте встановлення після зміни теми. Цей спосіб показує вибраного вами Агента; він не налаштовує дії для товарів чи замовлень.

Для Агента, орієнтованого на магазин, налаштування застосунку Quickchat AI для Shopify підключає магазин через власний процес початкового налаштування. Після підключення скористайтеся Enable Widget in Shopify Theme Editor або відкрийте Online Store → Themes → Edit theme → App embeds. Увімкніть Quickchat AI Widget і збережіть. Документація Shopify щодо вбудовування застосунків пояснює елементи керування темою; повторно вмикайте вбудовування застосунку після зміни опублікованої теми.

Наведені вище шляхи в конструкторах перевірено за офіційною документацією. Знімки екрана прикладу показують сайт Kestrel і справжній локальний віджет; це не знімки авторизованих облікових записів у кожному конструкторі.

Перевірте код перед пошуком проблем в Агенті

Ці необов’язкові перевірки працюють із наданими вами значеннями:

• Перевірка коду Widget. Зіставте вставлений код із наданим Scenario ID. Ця перевірка не завантажує ваш сайт.
• Порівняння способів розгортання. Зіставте вказані канали, доступ до сайту й потрібні функції з варіантами налаштування Quickchat AI. Ця перевірка не досліджує ваш сайт чи обліковий запис.

У сумісному браузері ці перевірки також доступні як інструменти сайту. Посилання відкривають стандартні форми.

Крок 7: Як перевірити чатбота до приходу відвідувачів?

Окремо перевірте відповідь, збережені дані й доставлену відповідь. AI Preview і Simulation Testing допомагають оцінити поведінку; опублікований сайт підтверджує, що відвідувач може користуватися встановленим віджетом.

Перевірте незалежні запитання в Simulation Testing

Відкрийте Testing → Create Dataset, назвіть набір Kestrel Kitchens: website launch checks і виберіть Paste messages. Додайте наведені нижче запитання про строки, ціну й фінансування, розділяючи їх рядком із ---. Самого перенесення рядка недостатньо: текст залишиться одним тестовим повідомленням. Установіть Evaluation criteria для перевірки фактів і стислості відповідей, а потім виберіть Run → Start Run. Комплект містить точні повідомлення й критерії.

Кожен рядок набору даних починає окрему розмову. Використовуйте Simulation для цих незалежних запитань; багатокрокові перевірки заявки й переходу до людини виконуйте в одній розмові AI Preview або на сайті. Окремо перевіряйте журнал дії та приймальний сервіс, оскільки оцінювач тексту розмови не може підтвердити зовнішню доставку.

Відкрийте завершений запуск і перевірте відповіді. Ця відповідь про ціну зберігає орієнтовний діапазон; її оцінка не підтверджує доставку до іншої системи.

Між незалежними випадками починайте нову розмову. Перезавантаження сторінки може відновити наявну розмову, тому для нового тесту скористайтеся елементом створення нового чату у віджеті.

Перевірте сайт на телефоні

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

Завершіть перевірку відповіддю справжньої людини з Inbox. Якісна відповідь AI не доводить, що шлях до підтримки людиною працює. Повторюйте невеликий набір цих перевірок після змін джерел, промптів, дій або теми сайту.

Крок 8: Як надіслати заповнену заявку до CRM?

Необов’язкова API Action може надіслати збережені поля HTTP-приймальному сервісу, коли розмова містить усю обов’язкову інформацію. Основний чатбот сайту вже придатний до використання без цього розширення.

Важливо розрізняти збирання контактних даних і повністю заповнену заявку. Quickchat AI встановлює lead_captured, коли вперше збирає стандартне контактне поле, зокрема ім’я. Сам прапорець не підтверджує наявність електронної адреси, поштового індексу чи типу проєкту.

Платформа перевіряє кожну умову. Модель збирає інформацію; умови визначають, коли запит дозволено виконати.

Підготуйте приймальний сервіс

Використовуйте кінцеву точку CRM або автоматизації, якою ви керуєте та яка приймає наведене нижче тіло JSON. Комплект містить невеликий локальний демонстраційний приймальний сервіс для читачів, які хочуть перевірити запит перед підключенням CRM. Інструкції з налаштування передбачають створення приватного токена й пояснюють, як надати тимчасову кінцеву точку HTTPS. Надсилайте демонстраційному сервісу лише вигадані тестові дані.

Для керованої інтеграції натомість скористайтеся посібником зі звітності в Google Sheets або посібником із підключення власної CRM. Не вмикайте два процеси, які створюють одну й ту саму заявку.

Налаштуйте одну автоматичну API Action

1. Відкрийте Actions & MCPs → Custom Actions → Add Action → API Action. Виберіть Create manually, якщо відкриється конструктор на основі опису.
2. Установіть API Action Name на Send quote enquiry.
3. Залиште What to ask the user first порожнім. Ця дія читає поля, вже збережені Smart Data Gathering; вона не просить модель заповнювати другий набір параметрів.
4. У API Endpoint виберіть POST і введіть HTTPS-адресу /enquiries вашого приймального сервісу.
5. Додайте наведені нижче заголовки, тіло й умови, а потім збережіть і активуйте дію.

Вводьте токен лише в налаштуванні заголовка дії. Не додавайте його до промпту, коду сайту чи розмови з відвідувачем. README демонстраційного сервісу пояснює, як його згенерувати; для справжньої інтеграції використовуйте автентифікацію, описану в документації вашої CRM.

На вкладці Body виберіть JSON і введіть:

{
  "conversation_id": "{{conversation_id}}",
  "name": "{{metadata_visitor_name}}",
  "email": "{{metadata_visitor_email}}",
  "postcode": "{{metadata_postcode}}",
  "project_type": "{{metadata_project_type}}"
}

Використовуйте Add AI Data, щоб вставити відповідні вбудовані значення й метадані. conversation_id ідентифікує розмову. Інші значення надходять зі збережених полів; англійські назви контактних полів відповідають visitor_name і visitor_email, а Project type перетворюється на project_type. Документація змінних пояснює ці відповідності.

У When to run виберіть When metadata matches. У Run when додайте всі п’ять рядків; умови метаданих поєднуються через AND:

Для цих текстових полів is true відхиляє порожні значення, а також текст, що інтерпретується як хибне значення. exists лише перевіряє наявність ключа; збережений порожній рядок може пройти таку перевірку. Наведені нижче тести показують важливість суворішої умови. Вона перевіряє наявність придатного тексту, але не підтверджує незалежно особу відвідувача чи відомості про об’єкт.

Використайте такий API Action Description:

Send a quote enquiry to the design team when the visitor has provided their full name, email, postcode and project type. This records an enquiry only; it does not book a survey or confirm a price.

Перші дві з п’яти збережених умов. Додайте кожен рядок із таблиці; When metadata matches перевіряє їх після ходу AI без вибору дії Агентом.

Спроба виконання дії відбувається один раз на розмову, коли всі умови виконано. Дія не запускається знову після надходження необов’язкового строку, а невдалий надісланий запит не повторюється автоматично в цій розмові. Зберігайте строк в Inbox для дизайнера або створіть явну інтеграцію зі створенням та оновленням, якщо CRM потребує подальших змін.

Запит виконується після ходу AI, і його відповідь не вставляється в чат. Саме тому Main Prompt підтверджує отримані від відвідувача дані, не стверджуючи, що CRM їх прийняла. Перевіряйте доставку в журналі дії та приймальному сервісі. Документація автоматичних дій описує цю поведінку виконання.

Перевірте часткові дані, а потім заповнену заявку

Перша версія використовувала exists для обов’язкових текстових полів. Sam надав ім’я, а наступним повідомленням електронну адресу. Smart Data Gathering уже створив порожні значення поштового індексу й типу проєкту, тому ці ключі існували й дія надіслала неповний запит. Це також використало її єдину спробу в розмові.

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

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

Справжній виклик дії повернув HTTP 201. Відкрийте його подробиці, щоб перевірити запит; збережений запис нижче показує, що зберіг приймальний сервіс.

Один справжній збережений запис демонстраційного сервісу з автентифікацією. Це заявка, а не підтверджений кошторис чи бронювання.

Демонстрація використовувала локальний приймальний сервіс і зафіксувала фактичну доставку HTTP. Агенту, розміщеному в Quickchat AI, потрібна загальнодоступна кінцева точка HTTPS; URL-адреса localhost на вашому комп’ютері недоступна із сервісу.

Якщо нічого не надходить, перевірте View logs дії та збережені метадані розмови. Відсутні значення, вимкнена дія й помилка HTTP потребують різних виправлень. Виправте конфігурацію та використайте нову розмову для повторної перевірки автоматичного запуску; прохання повторити запит у тому самому чаті не скидає обмеження однієї спроби на розмову.

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

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

Якщо браузер повідомляє про заблокований ресурс, перевірте точну помилку Content Security Policy або блокувальника. Не вимикайте всі засоби захисту сайту. Перевіряйте публічну сторінку через HTTPS і користуйтеся документацією каналу для потрібного налаштування.

Скільки коштує чатбот для сайту?

Передплата й ліміт використання покривають AI-сервіс; тариф сайту й необов’язкові інтеграції оплачуються окремо.

AI-кредит не дорівнює розмові. Розмова може містити кілька відповідей AI, а різні моделі можуть витрачати різну кількість кредитів. Ураховуйте Preview і Simulation у бюджеті тестування. Використовуйте актуальні ціни й ліміти та посібник із вартості чатбота, щоб оцінити свій обсяг використання.

Чи можуть ChatGPT або Claude допомогти налаштувати чатбота?

Підключення для керування обліковим записом Quickchat AI дає сумісному асистенту змогу налаштувати підтримувані параметри Агента й підготувати тести на основі цих матеріалів.

Підключіть власний обліковий запис через Quickchat AI у ChatGPT або Quickchat AI у Claude, дотримуючись посібника Manage with AI. Підтримувані інструменти охоплюють знання, Main Prompt, початкові запитання, Human Handoff, HTTP Actions, тестування й код розгортання.

Завершіть налаштування Smart Data Gathering і докладних параметрів Appearance віджета в панелі. Також потрібно авторизувати зовнішні облікові записи й установити код у налаштуваннях сайту. Підключення облікового запису призначене для керування Агентом; воно відокремлене від надання Агента як інструмента MCP.

Use the Kestrel Kitchens website-chatbot kit to prepare a separate learning Agent. Do not change existing Agents. Set its name to Kestrel Kitchens, add knowledge.txt and set main-prompt.txt as Main Prompt. Configure the supported greeting, conversation starters and Human Handoff settings from the kit. Prepare the launch-test dataset with the supplied messages and criteria. Read back the saved configuration and return this Agent's current Widget snippet.
List the remaining dashboard steps for Smart Data Gathering, Appearance and website installation. Do not invent support for those settings. Leave the optional Send quote enquiry Action inactive until I provide my receiver URL and configure its credential. Before running tests or external writes, tell me the expected credit use and effects and obtain any approval required by this client. Do not claim that a website, email or CRM delivery works until it has been tested.

Поширені запитання

Як додати AI-чатбота на свій сайт?

Створіть Агента в Quickchat AI, додайте знання про бізнес, налаштуйте Main Prompt, Smart Data Gathering і Human Handoff, а потім установіть його Widget за допомогою плагіна або наданого фрагмента коду. Перевірте на опублікованому сайті відповідь на основі джерела, збережені контактні дані й доставлену відповідь людини.

Чи можна додати власний ChatGPT на сайт?

Ви можете додати асистента на зразок ChatGPT, навченого на власних сторінках. У цьому посібнику Агент Quickchat AI розгортається через віджет сайту, тож відвідувачі можуть спілкуватися на вашому сайті без входу в ChatGPT. Його знання, інструкції та інтеграції керуються в Quickchat AI.

Чи можна безкоштовно додати AI-чатбота на сайт?

Тариф Free у Quickchat AI підтримує особисте некомерційне навчання й містить 50 AI-кредитів на місяць. Для сайту компанії або системи продажів і підтримки, доступної клієнтам, потрібен тариф, що дозволяє комерційне використання. Передплати конструкторів сайтів оплачуються окремо, а тестування також витрачає AI-кредити.

Чи потрібно програмувати або надавати API-ключ?

Основне налаштування використовує параметри панелі та плагін, вбудовування застосунку або наданий скрипт. Код сайту містить публічний Scenario ID, а не приватний API-ключ. Підключення необов’язкової дії CRM потребує відповідної кінцевої точки та її автентифікації; зберігайте ці облікові дані в налаштуваннях дії.

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

Так. Smart Data Gathering запитує вибрані поля під час розмови й зберігає їх в Inbox. Email new leads може сповіщати адміністраторів Агента після збирання електронної адреси або номера телефону. API Action може надсилати потрібні збережені поля налаштованому приймальному сервісу; саме лише зібране ім’я не означає, що заявка заповнена.

Чи може людина продовжити чат замість Агента?

Так. Налаштуйте Human Handoff із робочими годинами команди й повідомленням для неробочого часу. В Inbox виберіть Assign to me для непризначеної розмови або Take over, коли показано цю кнопку, а потім дайте відповідь відвідувачу. Reassign to AI повертає розмову Агенту.

Чи працює це на WordPress, Shopify, Squarespace, Wix і Webflow?

Для кожної платформи є спосіб установлення. Використовуйте офіційний плагін WordPress, вбудовування застосунку Shopify після підключення Агента магазину або відповідний загальний код футера чи кінця body для наявного Агента. Дозволи плагінів і вимоги тарифів до власного коду відрізняються залежно від конструктора.

Чому чатбот не з’являється на сайті?

Перевірте опубліковану сторінку, правильність Scenario ID й розміщення коду наприкінці тіла сторінки. Видаліть застарілі дублікати встановлення й уникайте блоків на основі iframe для плавучого Widget. Якщо він відкривається, але не відповідає, перевірте Widget & Embed access і доступні AI-кредити.

Чи сповільнить чатбот мій сайт?

Завантажувач віджета завантажується асинхронно, але все одно додає JavaScript і мережеві запити. Порівняйте швидкість завантаження та взаємодії до й після встановлення на типових сторінках і телефоні. Асинхронне завантаження не означає відсутності впливу на продуктивність.

Чи працює чатбот сайту на телефонах?

Відкритий віджет використовує повноекранний вигляд за ширини менш ніж 768 CSS-пікселів. Перевірте на телефоні кнопку відкриття, клавіатуру, прокручування й елемент закриття. Залиште Auto-open Widget вимкненим, якщо автоматичне відкриття перериватиме перегляд.

Чи може чатбот відповідати мовами моїх відвідувачів?

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