Виджет на сайте

Внешний вид

Все настройки внешнего вида — на вкладке «Настройки» → блок «Внешний вид виджета»:

• Цвет — основной акцентный цвет (кнопка, заголовок чата, пузыри пользователя).
• Заголовок — название чата в шапке (например, «Поддержка», «Алиса»).
• Тема — авто (по системной), светлая или тёмная.
• Auto-open — секунды до автоматического открытия чата (только для плавающего режима). Открывается один раз за сессию.
• Звук — пикать ли при получении ответа.

Режимы отображения

Один из ключевых параметров — «Режим отображения». Меняет, как виджет показывается на странице:

Плавающий (Floating)

Стандартный режим. На странице висит круглая кнопка в углу. По клику разворачивается панель чата (380×540 или 440×620 px в зависимости от размера). Закрывается крестиком.

Когда выбирать:

• На любых сайтах, где чат — дополнительная функция (не главная).
• Хотите, чтобы виджет не мешал основному контенту.
• Это сайт-витрина, лендинг, корпоративный сайт.

Дополнительные параметры режима:

• Позиция — правый или левый нижний угол.
• Размер — Compact (380×540) или Full (440×620).

Блок (Inline)

Чат встраивается прямо в страницу как обычный элемент. Заполняет контейнер на 100% ширины и высоты. Всегда открыт, без кнопки.

Когда выбирать:

• Делаете отдельную страницу-чат («Помощь», «Спросить ИИ»).
• Чат — главный элемент страницы.
• Хотите контролировать размер и позицию средствами CSS / билдера.

Все параметры позиции/размера в этом режиме игнорируются.

Способы встраивания

Есть три способа поставить виджет на сайт.

1. На сайт, сделанный в Framix

В билдере добавьте блок «AI Chat» (раздел «AI» в палитре блоков).

• В свойствах блока выберите вашего агента.
• Режим (плавающий/блок) берётся из настроек агента автоматически.
• Для inline-режима размер чата = размер блока на канвасе. Растяните блок до нужных габаритов.
• Для floating — блок на канвасе показывается как маленький плейсхолдер 60×60 (служебный), а сам виджет на опубликованной странице рендерится в углу.

2. На любой внешний сайт через <script>

На странице агента → вкладка «API» → блок «Embed» (или нажмите кнопку «Встроить на сайт» в шапке).

Скопируйте сниппет и вставьте перед закрывающим тегом </body> на любой странице:

<!-- Floating-режим -->
<script
  src="https://framix.app/chat-widget.js"
  data-agent-id="ваш-agent-id"
  data-mode="floating"
  data-theme="auto"
  data-position="bottom-right"
  async
></script>

Для inline-режима сниппет автоматически включает <div>-контейнер:

<!-- Inline-режим -->
<div id="framix-chat" style="width: 100%; height: 600px;"></div>

<script
  src="https://framix.app/chat-widget.js"
  data-agent-id="ваш-agent-id"
  data-mode="inline"
  data-target="#framix-chat"
  async
></script>

Скрипт работает на любом сайте, в том числе на WordPress, Tilda, Bitrix, статическом HTML — изолирован через Shadow DOM, не конфликтует со стилями вашего сайта.

3. Через API (для приложений)

См. API агента.

Атрибуты <script>-тега

Поведение

• История сохраняется в браузере посетителя (localStorage). При обновлении страницы диалог не теряется. Кнопка «New chat» в шапке начинает новый разговор.
• Drag & resize для плавающего режима — посетитель может перетащить кнопку и растянуть панель за угол.
• Мобильные — на экранах ≤640px панель раскрывается на весь экран (full-screen sheet).