Сайт

Разместить AI-агента Quickchat AI в интернете можно тремя способами. Выберите подходящий формат:

• Widget: плавающий значок чата в углу сайта. Подходит для поддержки общего назначения.
• Embed: встроенное окно чата именно в том месте страницы, которое вы выберете. Подходит для размещения AI на определённом экране приложения, странице справочного центра или странице товара.
• 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 непосредственно в сайт, чтобы пользователям было удобно общаться с AI. Обычно Widget отображается значком чата в правом нижнем углу страницы. При нажатии открывается окно чата, где можно задать вопрос, получить помощь или найти информацию.

Как добавить Widget на сайт

Откройте Channels → Your Website → Install. Вкладка начинается с вопроса “How do you want to add your AI Agent?” и перечисляет способы установки от самых простых. Выберите подходящий вашему сайту:

• WordPress: установите бесплатный плагин Quickchat AI Agent, вставьте Scenario ID, и Widget появится автоматически, без редактирования кода темы.
• Shopify: добавьте Widget через редактор темы магазина. См. руководство 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-агента, размещённую по адресу Quickchat. Устанавливать ничего не нужно: поделитесь ссылкой, и посетители смогут общаться с агентом прямо в браузере. Используйте её, когда:

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

Настройте, кто может открывать Chat Page, в Install → Chat Page Access. См. Контроль доступа ниже.

Начало новой беседы

Чтобы сбросить чат и начать заново:

• Widget или Embed: откройте чат и нажмите кнопку с ручкой в квадрате в правом верхнем углу окна.
• Chat Page: выберите New chat в боковом меню или нажмите кнопку с ручкой в квадрате в заголовке.

Так начинается новая беседа с AI-агентом. Предыдущая остаётся в Inbox. Закрытие и повторное открытие Widget или обновление страницы может возобновить текущую беседу. Просьба к AI «сбросить» или «очистить чат» не создаёт новую беседу. Удалять cookie в браузере не нужно.

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

На вкладке Install настройки доступа находятся в сворачиваемом разделе Availability and access. Разверните его, чтобы увидеть два элемента управления развёртыванием:

Доступ к Widget и Embed

Переключатель вверху 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 Users могут пользоваться Chat Page. Им потребуется авторизация.
• 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, чтобы увидеть изменения до публикации.

Внешний вид

Оформление чата сгруппировано в Branding, Size & Position, Theme и Other Settings.

Branding

• AI Agent Avatar: изображение профиля или логотип агента. Один файл используется и в заголовке чата, и на кнопке запуска, максимум 5 MB. Это одна настройка, а не две: загрузите изображение, и оно появится в обоих местах, заменяя прежние отдельные “header logo” и “launcher icon”. Каждый агент начинает со встроенного стандартного аватара. 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 символов, например “Ask AI” или “Chat”. Оставьте пустым, чтобы показывать только значок.
• Widget position: внизу слева, внизу по центру или внизу справа.
• Размеры окна чата: ширина (300–700px) и высота (400–1200px).
• Draggable launcher: позволяет посетителям перетаскивать кнопку запуска по странице. Полезно, если она закрывает важное содержимое.

Theme

Выберите цвета интерфейса чата:

• Light и Dark являются фиксированными вариантами, одинаковыми для всех аккаунтов.
• Custom позволяет использовать собственную палитру. При выборе Custom появляются настройки цвета фона, заголовка и его текста, акцента для кнопок, например начала чата на предварительном экране, подсказок и оценок, пузырька сообщения и его текста, текста AI, цвета ссылок, поля ввода, границ и других элементов. Каждый цвет проверяется на контраст 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 всегда имеет непрозрачный фон. Посетители, включившие на устройстве “Reduce transparency”, видят Solid в Chrome и Edge, которые передают эту настройку сайтам. В браузере без размытия Glass остаётся почти непрозрачным, чтобы текст был читаемым.

При выборе Custom у Chat Page появляются собственные цвета бокового меню: Sidebar background, Sidebar text, Sidebar hover и Sidebar hover text. Они относятся только к полноэкранной Chat Page, а не к Widget или Embed. Если не задавать цвета текста, Chat Page автоматически выберет читаемый цвет для выбранного фона.

Также можно настроить радиус углов, то есть скругление пузырьков, полей и кнопок, и размер текста. Обе настройки действуют во всех темах.

Other Settings

• Voice Input: посетители могут записывать голосовое сообщение через микрофон в чате. Запись преобразуется в текст в поле ввода, который можно отредактировать перед отправкой. Запись автоматически прекращается через две минуты. Доступно на платных тарифах.
• File Attachments: разрешает прикреплять изображение или документ к сообщению. Включено по умолчанию; отключение убирает кнопку вложения из чата.
• Auto-open Widget: автоматически открывает Widget при загрузке страницы.
• Hide Quickchat AI Branding: скрывает подпись “Powered by Quickchat AI” для полностью фирменного оформления. Доступно на тарифах с удалением брендинга.

Чтобы разрешить посетителям оценивать беседы, откройте Conversations → Insights → Conversation Rating. На этой вкладке находятся и настройки, и результаты. См. Оценка бесед.

Текстовое содержимое

Откройте Channels → Your Website → Text Content, чтобы изменить приветствие и другие тексты для посетителей:

• Header text: текст вверху окна чата.
• Welcome message: первое сообщение AI-агента в начале каждой беседы, например «Привет, нужна помощь?».
• Show as a pop-up: показывает приветствие в плавающем облачке рядом с кнопкой запуска, чтобы привлечь внимание до нажатия. Его также называют “teaser” или “launcher message”. Облачко использует сам текст 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.

Пример скрипта:

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 AI непосредственно внутри страницы как встроенное окно чата вместо плавающего значка. Используйте его, если чат должен находиться в определённом месте: колонке справочного центра, странице контактов, боковой панели приложения и так далее.

Как добавить Embed

1. Получите код Embed

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

2. Откройте HTML-файл сайта или страницу в конструкторе.

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

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

Заметка

Embed работает только тогда, когда конструктор помещает код непосредственно в страницу. Некоторые конструкторы, например Wix, показывают HTML-элементы в отдельном фрейме, где Embed не загружается. Если чат не появился на опубликованной странице, добавьте Widget через общую настройку кода сайта либо поделитесь ссылкой на Chat Page.