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

Внешний вид

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

• Цвет — основной акцентный цвет (кнопка, заголовок чата, пузыри пользователя).
• Заголовок — название чата в шапке (например, «Поддержка», «Алиса»).
• Тема — авто (по системной), светлая или тёмная.
• 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).

Передать данные о пользователе (identify)

Если посетитель уже залогинен на вашем сайте, вы можете сразу сказать боту-оператору, кто это — чтобы в диалогах было видно имя/email/ваш ID, а не «Посетитель · a1b2c3d4». Оператор перестаёт гадать, кто написал.

Вызовите window.FramixChat.identify(...) после того, как виджет подключён и вы знаете пользователя:

<script>
  window.FramixChat && window.FramixChat.identify({
    userId: '12345',                     // ваш внутренний ID пользователя
    email: 'ivan@example.com',
    name: 'Иван Петров',
    profileUrl: 'https://мой-сайт.ru/admin/users/12345', // ссылка, которую откроет оператор
    fields: {                            // любые доп-поля — покажутся списком
      'Тариф': 'Про',
      'Город': 'Москва',
      'Регистрация': '2024-01-15'
    }
  })
</script>

Всё в объекте — необязательное, передавайте что есть. Оператор увидит эти данные карточкой «Данные с сайта» в диалоге.

Как правильно вызывать:

• Обычный сайт (HTML/WordPress/Tilda): поставьте вызов ниже сниппета виджета, подставив данные пользователя (обычно сервер вписывает их в шаблон при рендере страницы).
• SPA (React/Vue/Nuxt и т.п.): вызывайте после того, как пользователь авторизован. Виджет грузится асинхронно, поэтому либо проверяйте window.FramixChat && ... (как выше), либо вызовите ещё раз после логина — новые данные подхватятся со следующим сообщением.
• Обновить данные / выход: повторный identify(...) перезаписывает данные; window.FramixChat.clearIdentity() очищает их (вызовите при логауте, чтобы следующий аноним не унаследовал чужой профиль).

Важно:

• Данные видит только оператор в CRM Framix — бот их НЕ получает и в ответах не использует.
• Ограничения: строки режутся по длине, доп-полей (fields) — до 12, profileUrl принимается только с http/https. Лишние ключи отбрасываются.
• Это данные «со слов вашего сайта» — Framix их не проверяет, поэтому не полагайтесь на них как на доказанную личность.