Вебсайт

Є три способи розмістити AI-агента Quickchat у вебі. Оберіть формат, що відповідає вашому завданню:

• Widget: плаваюча кнопка чату в кутку сайту. Найкраще підходить для загальної підтримки.
• Embed: вбудоване вікно чату саме в потрібному місці сторінки. Зручно для окремого екрана застосунку, сторінки довідкового центру або товару.
• Chat Page: повноекранний чат, розміщений на Quickchat, без установлення й коду. Підходить, коли потрібно поділитися посиланням, наприклад у листі підтримки, внутрішньому Slack або з бета-тестувальниками, нічого не змінюючи в їхньому браузері.

Установіть обраний формат у Channels → Your Website → Install. Сторінка має три вкладки: Install для вибору способу додавання агента, Appearance для оформлення та Text Content для текстів і підписів, які бачать відвідувачі. На вкладці Install спочатку пропонується вибір способу, доступність і доступ винесено в окремий розділ, а Scenario ID, потрібний плагінам і API, можна скопіювати.

Додаткові інструменти налаштування

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

• Порівняйте HTML і Markdown зразкової сторінки. Отримайте початковий HTML, Markdown-вміст і посилання на інструменти з фіксованого прикладу Quickchat AI. Інструмент не виконує JavaScript і не перевіряє довільні сайти.

Widget

Widget дає змогу додати AI-агента Quickchat безпосередньо на сайт, щоб відвідувачам було зручно спілкуватися з AI. Зазвичай це кнопка чату в правому нижньому кутку. Після натискання вона відкриває вікно, де можна ставити запитання, отримувати допомогу та шукати інформацію.

Як додати Widget на сайт

Відкрийте Channels → Your Website → Install. Вкладка починається із запитання «How do you want to add your AI Agent?» і переліку способів установлення, починаючи з найпростіших. Оберіть відповідний для вашого сайту:

• WordPress: установіть безкоштовний плагін Quickchat AI Agent і вставте Scenario ID. Widget з’явиться автоматично, без редагування коду теми.
• Shopify: додайте Widget через Theme Editor магазину. Дивіться інструкцію для Shopify.
• Webflow, Wix & others: скопіюйте один фрагмент і вставте його в налаштування власного коду для всього сайту, застосувавши до всіх сторінок. Не використовуйте елемент Embed або HTML на окремій сторінці. Дивіться Конструктори сайтів.
• Share a link instead: нічого не встановлюйте, а поділіться посиланням на Chat Page.
• Install manually with code: скопіюйте код Widget або Embed і самостійно вставте його в HTML.

Кожен спосіб відкриває окрему покрокову панель лише з потрібним кодом або ідентифікатором.

Ваш Scenario ID розташований угорі вкладки Install у полі для копіювання. Це ідентифікатор для плагінів і API. Копіюйте його звідси, коли він потрібен на кроці налаштування.

Установлення вручну за допомогою коду

Якщо ви самі керуєте HTML, розгорніть Install manually with code на вкладці Install і виконайте такі дії:

1. Скопіюйте фрагмент Widget.
2. Відкрийте HTML-файл сторінки. У конструкторі використовуйте налаштування коду для всього сайту, як описано в розділі Конструктори сайтів.
3. Вставте фрагмент безпосередньо перед закривальним тегом </body> на кожній сторінці, де потрібен Widget.

Перевірте фрагмент Widget на відповідність указаному Scenario ID. Перевірка читає вставлений код, але не завантажує ваш сайт.

Конструктори сайтів

У Webflow, Wix, Squarespace, Hostinger та подібних конструкторах додайте Widget один раз через налаштування коду для всього сайту:

1. Відкрийте налаштування, яке додає код на кожну сторінку. Воно може називатися Custom code, Code injection, Footer code або Body end.
2. Вставте фрагмент Widget і застосуйте його до всіх сторінок. Якщо можна обрати розташування, вкажіть нижній колонтитул або кінець body. Фрагмент не працює в head.
3. Опублікуйте сайт. Кнопка чату з’явиться на кожній сторінці.

Обережно

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

Де знайти налаштування для всього сайту:

Конструктор	Налаштування коду для всього сайту
Webflow	Site settings → Custom code → Footer code
Wix	Settings → Custom Code, потім All pages і Body - end. Потрібен підключений домен.
Squarespace	Custom Code → Code Injection → Footer. Плани Core, Plus, Advanced і деякі попередні плани.
Hostinger Website Builder	More (⋯) → Integrations → Custom code. Скрипти автоматично завантажуються в кінці сторінки.

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

Потрібна допомога?

Ви не розробник? На вкладці Install у розділі Need a hand? є два варіанти:

• Ask AI for help: відкриває помічника в застосунку з уже підготовленим запитанням про додавання агента на сайт.
• Email instructions to a developer: надсилає колезі все потрібне, зокрема код Widget, Scenario ID та посилання на цю інструкцію, щоб він міг виконати встановлення.

По додаткову допомогу звертайтеся на contact@quickchat.ai.

Chat Page

Chat Page є повноекранною версією AI-агента за URL Quickchat. Нічого встановлювати не потрібно: поділіться посиланням, і відвідувачі зможуть спілкуватися з агентом у браузері. Використовуйте цей формат, якщо:

• Вам потрібен чат, але немає сайту або ви не хочете змінювати його код.
• Ви ділитеся AI з невеликою групою, наприклад бета-тестувальниками, командою підтримки чи потенційними клієнтами, і потрібне посилання з контролем доступу замість публічного віджета.
• Ви хочете надіслати AI як додатковий канал спілкування електронною поштою, у Slack або CRM.

Налаштуйте, хто може відкривати Chat Page, у Install → Chat Page Access. Дивіться Контроль доступу нижче.

Початок нової розмови

Щоб почати чат із чистого аркуша:

• Widget або Embed: Відкрийте чат і натисніть кнопку з олівцем у квадраті у правому верхньому кутку вікна.
• Chat Page: Оберіть New chat на бічній панелі або скористайтеся кнопкою з олівцем у квадраті в заголовку.

Це починає нову розмову з AI-агентом. Попередня залишається в Inbox. Закриття й повторне відкриття Widget або оновлення сторінки може продовжити поточну розмову. Прохання до AI «скинути» чи «очистити чат» не створює нової розмови. Очищати cookies браузера не потрібно.

Контроль доступу

На вкладці Install налаштування доступу містяться в розгортному розділі Availability and access. У ньому є два елементи керування розгортанням:

Widget & Embed access

Перемикач угорі Availability and access. Коли він увімкнений, скрипти Widget і Embed працюють у браузерах відвідувачів. Коли вимкнений, Widget і Embed недоступні на сайті, навіть якщо код залишається вставленим. Це дає змогу тимчасово вимкнути AI без видалення коду або обмежити публічний доступ, залишивши Chat Page для запрошених користувачів.

Chat Page Access

Незалежно від перемикача Widget і Embed ви можете обмежити доступ до Chat Page:

• Anyone: URL Chat Page публічний. Ним може користуватися кожен, хто має посилання.
• Invited users only: Chat Page доступна лише Chat Users, запрошеним електронною поштою. Їм потрібно пройти автентифікацію.
• Nobody: Chat Page повністю вимкнена.

Посилання Invite Chat Users відкриває Settings → Organization → Team Members. Поточна форма запрошення пропонує командні ролі з правами доступу до панелі керування. Вона не має окремої ролі лише для чату чи розділу Chat Users. Перед запрошенням перегляньте Учасники команди та ролі.

Налаштування вигляду

Вкладки Appearance і Text Content дають змогу змінювати вигляд Widget, Embed і Chat Page та тексти для відвідувачів. Усі три формати використовують спільні налаштування: достатньо змінити їх один раз, і вони застосуються всюди, де розгорнуто агента.

Права панель вкладок Install, Appearance і Text Content має власне керування попереднім переглядом. Перемикайтеся між Widget, Embed і Chat Page, а також між Desktop і Mobile, щоб побачити зміни перед публікацією.

Appearance

Візуальні налаштування згруповані в Branding, Size & Position, Theme та Other Settings.

Branding

• AI Agent Avatar: зображення профілю або логотип агента. Одне зображення розміром до 5 MB використовується в заголовку чату й на кнопці запуску. Це одне налаштування, а не два: завантажте зображення один раз, і воно з’явиться в обох місцях замість колишніх окремих логотипа заголовка й іконки запуску. Кожен агент має вбудований стандартний аватар. Reset to default відновлює його, а видалення прибирає аватар зовсім. Доступно на всіх планах, включно з Free.

AI Agent Avatar застосовується до Widget, Embed і Chat Page, але не до Discord: там аватар бота береться з його Discord-застосунку. Дивіться Discord.

Size & Position

• Launcher size: Classic, Input Only або Small. Визначає вигляд елемента запуску до відкриття чату.
• Закриття елемента запуску: варіант Classic має маленьку кнопку закриття справа вгорі. На комп’ютері вона з’являється при наведенні, на сенсорному пристрої видима завжди. Вона приховує віджет лише для поточного перегляду сторінки; після наступного завантаження він повертається. Інші розміри не мають кнопки закриття.
• Launcher label: показується лише для Small. Це власний текст на маленькій кнопці, до 25 символів, наприклад «Запитати AI» або «Чат». Залиште порожнім, щоб показувати лише іконку.
• Widget position: знизу ліворуч, посередині або праворуч.
• Chat window dimensions: ширина 300–700px і висота 400–1200px.
• Draggable launcher: дозволяє відвідувачам перетягувати кнопку запуску. Корисно, коли вона перекриває важливий вміст.

Theme

Оберіть кольори чату:

• Light і Dark є фіксованими стилями, однаковими для всіх облікових записів.
• Custom відкриває власну палітру. Доступні кольори фону, заголовка й тексту заголовка, акценту для кнопок початку чату, підказок і оцінювання, бульбашок повідомлень та їхнього тексту, тексту AI, link color, поля введення, рамок тощо. Кожна пара кольорів перевіряється на контраст WCAG AA, а складні для читання поєднання супроводжуються попередженням.

Фірмові кольори заголовка й акцентів належать до Custom. Light і Dark залишаються нейтральними стилями, тож перемикання між ними не переносить власні кольори.

У розділі Transparency параметр Background визначає прозорість вікна. Він працює в усіх темах, а відтінок задається темою:

• Solid: суцільний непрозорий фон. Це стандартний варіант.
• Glass: вікно стає напівпрозорим, а сайт за ним розмивається, як за матовим склом. Відтінок білий у Light, темний у Dark і відповідає вашому фону в Custom. У Custom заголовок, колір якого відрізняється від фону, зберігає цей колір, щоб брендинг залишався помітним. Glass opacity задає силу перекриття сторінки: від мінімуму, що зберігає читабельність тексту на будь-якому сайті, тобто 50% у Light, 65% у Dark і залежно від кольорів у Custom, до 95%. Якщо жодне значення не забезпечує читабельність із вашими кольорами Custom, віджет використовує суцільний фон, а налаштування пояснюють причину. Glass залишається обраним і знову застосовується після зміни кольорів тексту або фону для достатнього контрасту.

Прозорість працює для Widget, зокрема на телефонах, і для Embed. Повноекранна Chat Page завжди має суцільний фон. Відвідувачі, які ввімкнули на пристрої зменшення прозорості, бачать Solid у Chrome та Edge, які передають це налаштування сайтам. У браузері без підтримки розмиття Glass залишається майже непрозорим для читабельності.

У режимі Custom Chat Page також має власні кольори бічної панелі: Sidebar background, Sidebar text, Sidebar hover і Sidebar hover text. Вони застосовуються лише до повноекранної Chat Page, а не до Widget чи Embed. Якщо не задавати кольори тексту, Chat Page автоматично підбере читабельний варіант для обраного фону.

Також можна змінити corner radius, тобто округлення повідомлень, полів і кнопок, та text size. Обидва параметри працюють у кожній темі.

Other Settings

• Voice Input: дає змогу записати голосове повідомлення через мікрофон у чаті. Запис перетворюється на текст у полі введення, який можна відредагувати перед надсиланням. Запис автоматично завершується через дві хвилини. Доступно на платних планах.
• File Attachments: дозволяє додавати до повідомлення зображення або документ. Увімкнено за замовчуванням; вимкнення прибирає кнопку вкладення.
• Auto-open Widget: автоматично відкриває Widget після завантаження сторінки.
• Hide Quickchat AI Branding: приховує підпис «Powered by Quickchat AI» для повністю власного брендингу. Доступно в планах із white-labeling.

Щоб відвідувачі могли оцінювати розмови, відкрийте Conversations → Insights → Conversation Rating. На цій вкладці є і налаштування, і результати. Дивіться Conversation Rating.

Text Content

Відкрийте Channels → Your Website → Text Content, щоб змінити привітання та інші тексти для відвідувачів:

• Header text: текст угорі вікна чату.
• Welcome message: перше повідомлення AI-агента на початку кожної розмови, наприклад «Вітаю! Вам потрібна допомога?».
• Show as a pop-up: показує привітання як плаваючу бульбашку поруч із кнопкою запуску, щоб привернути увагу до натискання. Іноді це називають тизером або повідомленням запуску. Бульбашка показує сам текст Welcome message, тож змінюйте це поле для редагування повідомлення.
• Conversation starters: до 3 прикладів повідомлень, які видно до початку введення. Натискання надсилає обраний приклад як перше повідомлення. Це допомагає спрямувати відвідувачів до сильних сторін AI, наприклад «Як установити віджет?» або «Які інтеграції ви підтримуєте?».
• Input placeholder: підказка в порожньому полі введення.
• Disclaimer text: текст на тлі розмови, зазвичай із поясненням, що користувач спілкується з AI. Радимо зробити його зрозумілим і помітним.

Розділ Pre-chat Screen розташований під цими полями на тій самій вкладці Text Content. Увімкніть його там і відредагуйте заголовок, кнопку та текст повідомлення.

Мови й переклади

За замовчуванням усі відвідувачі бачать Text Content саме так, як ви його ввели. На платних планах можна додати переклади для окремих мов, щоб віджет показувався мовою відвідувача.

1. Відкрийте Text Content і натисніть Translate у розділі Other languages. Відкриється панель Translate widget text, де початковий текст показано поруч із кожним перекладом як Default (source).
2. Натисніть Add language й оберіть мову. Quickchat AI створить переклад поточних текстів. Перегляньте й відредагуйте заголовок, привітання, початкові повідомлення, підказку введення, екран перед чатом і дисклеймер. Зміни зберігаються автоматично.
3. Порожні поля використовують стандартний текст, тож перекладайте лише те, що хочете змінити. Якщо автоматичний переклад не вдасться, текст можна ввести самостійно.

Кількість доступних мов залежить від плану.

Як обирається мова відвідувача

Для Widget і Embed Quickchat визначає мову в такому порядку:

1. Явне перевизначення в завантажувачі: _quickchat("language", "de"), викликане перед _quickchat("init", ...).
2. Атрибут <html lang> сторінки: наприклад, <html lang="de"> вмикає німецький переклад. Це рекомендований підхід: правильно задайте lang на кожній локалізованій сторінці, і віджет автоматично його використає.
3. Мова браузера відвідувача, а потім текст Default, якщо збігів немає.

Заувага

Якщо для мови відвідувача немає перекладу, він завжди бачить текст Default. Нічого не залишається порожнім.

Розширені можливості: власні параметри

Widget і Embed Quickchat AI дозволяють передавати власні параметри під час ініціалізації. Їх можна використовувати, щоб:

• розширювати аналітику; параметри доступні в CSV-експорті платформи Quickchat;
• передавати значення в API Actions і, де дозволено, персоналізувати відповіді. AI отримує відфільтровану частину, а не всі параметри. Дивіться Контекст моделі та авторизація.

Приклади корисних параметрів:

• visitor_name: Mike
• customer_tier: VIP
• order_id: ord_123

visitor_name є розпізнаваним ключем контакту. Власні ключі, наприклад customer_tier, можна зберігати та використовувати в Actions, але сама їх передача не гарантує використання AI у відповіді. Значення з браузера є неперевіреним вводом, а не дозволом на доступ до облікового запису клієнта.

Щоб додати такі параметри, вставте наведений виклик у скрипт із Your Website > Install.

Widget і Embed використовують однаковий формат виклику:

_quickchat("custom_params", {
  "visitor_name": "Mike",
  "customer_tier": "VIP",
  "order_id": "ord_123",
});

Ці атрибути додаються до кожної нової розмови. Радимо обмежитися кількома ключами.

Порада

Власні параметри з назвами у snake_case, наприклад order_id і customer_tier, можна безпосередньо підставляти в API Actions як {{metadata_order_id}}, {{metadata_customer_tier}} тощо. Докладніше в AI Action Variables.

Приклад скрипту:

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("custom_params", {"visitor_name": "Mike", "customer_tier": "VIP", "order_id": "ord_123"});
  _quickchat("init", "abcdefghij");
</script>

Embed

<div id="quickchat-embedded" style="height:600px;overflow:hidden;"></div>
<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("containerId", "quickchat-embedded");
  _quickchat("custom_params", {"visitor_name": "Mike", "customer_tier": "VIP", "order_id": "ord_123"});
  _quickchat("init", "abcdefghij");
</script>

Embed

Embed розміщує AI-агента Quickchat безпосередньо в сторінці як вбудоване вікно замість плаваючої кнопки. Використовуйте його, якщо чат має займати конкретне місце: колонку довідкового центру, контактну сторінку, бічну панель застосунку тощо.

Як додати Embed

1. Отримайте код Embed

   • Увійдіть у Quickchat AI App.
   • Перейдіть у Channels → Your Website на лівій бічній панелі.
   • Відкрийте Install, а потім розгорніть Install manually with code.
   • Скопіюйте Embed snippet, що містить контейнер <div id="quickchat-embedded"> і скрипт завантаження.

2. Відкрийте HTML-файл сайту або сторінку в конструкторі.

3. Вставте код

   • Додайте фрагмент Embed у <body> сторінки.
   • Розмістіть його саме там, де потрібне вікно чату. Розмір задає <div>: змініть style="height:600px" відповідно до місця у вашому макеті.
   • У конструкторі додайте елемент коду або HTML у потрібному місці й вставте фрагмент у нього.

Заувага

Embed працює лише тоді, коли конструктор вставляє код безпосередньо в сторінку. Деякі конструктори, зокрема Wix, показують HTML-елементи в окремому фреймі, де Embed не завантажується. Якщо чат не з’являється на опублікованій сторінці, додайте Widget через налаштування коду для всього сайту або поділіться посиланням на Chat Page.