Подключить виджет на сайт

Виджет на сайт — это окно чата с AI-сотрудником, встраиваемое во внешний сайт через iframe или прямую ссылку. Подключение занимает 5–10 минут и не требует разработчика, кроме шага вставки скрипта.

Что такое виджет

Виджет — это окно чата с AI-сотрудником, которое живёт на странице вашего сайта. Когда посетитель открывает его, он попадает в чат, отвечающий по вашим документам.

Преимущества против готовых чатов (JivoSite, LiveChat, Intercom):

• Работает 24/7, не нужны операторы ночью
• Отвечает по вашим документам, а не «по общим знаниям»
• Интегрируется с операторами, когда AI не справляется
• Стоимость — абонентка AG0NTS вместо $39–99/мес за seat

Быстрый старт за 5 минут

Код для встраивания — как выглядит

Iframe (доступно сейчас)

В Настройки → Встраивание выберите AI-сотрудника, скопируйте готовый сниппет:

<iframe
  id="agonts-chat-iframe"
  src="https://app.ag0nts.xyz/chat/embed?agentId=ag_..."
  width="100%"
  height="700"
  style="border:0;"
  loading="lazy"
  referrerpolicy="strict-origin-when-cross-origin"
  sandbox="allow-same-origin allow-scripts allow-forms allow-downloads"
  allow="clipboard-write; microphone"
></iframe>

Iframe общается с родительской страницей через postMessage: умеет автоматически менять высоту под содержимое и принимать команды от хоста (например, focus-composer). Полный пример скрипта-обработчика — там же в мастере.

Прямая ссылка (доступно сейчас)

https://app.ag0nts.xyz/widget?key=wsk_AbCdEf1234567890&flowId=fl_...&lang=ru

Параметры: key — API-ключ, flowId — конкретный сценарий (опционально), ctx — URL-encoded JSON c начальным контекстом до 4 КБ, lang — ru или en.

Скрипт-пузырёк (в работе)

После релиза мастера вы получите примерно такой код:

<script>
  (function(a,g,s,k,y){a.AGONTSWidget={apiKey:k,config:y};
  var f=g.createElement('script');f.async=1;
  f.src='https://widget.ag0nts.xyz/v1/widget.js';
  var h=g.getElementsByTagName('script')[0];
  h.parentNode.insertBefore(f,h);})(window,document,0,
  'wsk_AbCdEf1234567890',{position:'bottom-right'});
</script>

Сейчас этот сниппет даём вручную — напишите нам, соберём бандл под ваше пространство.

Настройка внешнего вида

Открывается в Каналы → Виджет на сайт → ваш виджет → Внешний вид.

Цвета

• Цвет кнопки — фоновый цвет плавающей кнопки-пузырька. По умолчанию тёмно-бирюзовый, рекомендуем выбрать близко к основному цвету сайта
• Цвет заголовка окна — шапка чата. Обычно берётся из брендбука
• Цвет сообщений бота — фон реплик AI-сотрудника
• Цвет сообщений клиента — фон реплик посетителя (обычно нейтрально-серый)

Аватар и имя

• Аватар — квадратная картинка 200×200, PNG с прозрачностью
• Имя в шапке — «Анна из такой-то компании», «Техподдержка», «Консультант по оборудованию»
• Подпись — одна строчка про статус: «обычно отвечает за 30 секунд», «онлайн 24/7»

Позиция и размер

• Позиция кнопки — правый нижний угол (классика), левый нижний (реже), правый верхний (для dashboard-приложений)
• Отступ от края — 20–40 пикселей, чтобы кнопка не перекрывала важные UI-элементы
• Размер окна чата — по умолчанию 380×600, можно сделать уже/шире

Приветствие

• Текст приветствия — первое сообщение, которое посетитель видит в чате: «Здравствуйте! Я Анна, помогу с выбором курса. Что интересует?»
• Быстрые кнопки — 2–4 популярных запроса: «Как оплатить», «Расписание занятий», «Получить сертификат». Клик = готовый вопрос в чат.

Тихий режим

Тихий режим — это когда виджет сначала не показывает плавающую кнопку, а ждёт триггера.

Когда включать

• Сайт уже перегружен UI-элементами, и кнопка чата мешает
• Вы хотите запускать чат только на конкретных страницах (цена, корзина, форма заявки)
• A/B тест: хотите сравнить конверсию с виджетом и без

Как включить

В Каналы → Виджет → Поведение:

• Тихий старт — виджет не появляется сразу при загрузке страницы
• Триггер появления:
  • через N секунд после открытия страницы
  • при скролле до определённой глубины (например 50% страницы)
  • при попытке закрыть вкладку (exit-intent)
  • только на страницах с URL, подходящим под паттерн (например /price/*)
• Триггер открытия чата — кнопка всегда появляется, но чат сам не раскрывается (не навязывается)

Замена существующего чата

Типичная история: у клиента уже стоит JivoSite / Bitrix24 / LiveChat с операторами. Хотят перевести основной поток на AI-сотрудника, операторов оставить как fallback. Вот как это сделать без потери диалогов.

Подключение через GTM (Google Tag Manager)

Если на сайте уже GTM — можно добавить виджет через него, без правки кода сайта.

1. Откройте GTM → Tags → New
2. Tag Type: Custom HTML
3. Вставьте скрипт виджета
4. Triggering: All Pages (или конкретные страницы)
5. Save → Submit

Плюс: можно выключить виджет на определённых страницах (например, кассовой форме), не трогая код.

Виджет на SPA (React / Vue / Next.js)

Для SPA-сайтов скрипт добавляется так же — в конец <body> глобального шаблона (_document.tsx в Next.js, index.html в Vite). Виджет сам следит за изменением URL и работает с React-навигацией.

// Next.js App Router: app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script src="https://widget.ag0nts.xyz/v1/widget.js"
                data-key="wsk_AbCdEf1234567890"
                strategy="afterInteractive" />
      </body>
    </html>
  );
}

Частые ошибки

Виджет не появляется после вставки кода

Проверьте в консоли браузера (F12 → Console): нет ли ошибок CORS или 403. Если Content Security Policy (CSP) вашего сайта блокирует внешние скрипты — добавьте widget.ag0nts.xyz в script-src и *.ag0nts.xyz в connect-src.

Виджет ломает вёрстку

Проверьте z-index основных блоков. Виджет живёт на z-index: 999999, но на некоторых темах Tilda и Wix есть элементы с z-index: 9999999. В настройках виджета можно задать z-index: 2000000000 (значение до 2^31−1).

Кнопка видна, но чат не открывается

Часто blockируется расширением браузера (adblocker). Проверьте в режиме инкогнито без расширений. Если работает — добавьте ag0nts.xyz в белый список.

Клиент не видит ответы, хотя AI-сотрудник их отправляет

Проверьте webhook Events в Каналы → Виджет → Логи. Если события идут, но окно чата пустое — обычно это конфликт JS на сайте. Проверьте, не перезаписывает ли какой-то скрипт переменную window.AGONTSWidget.

Что дальше