Встраивание виджета

Подробное руководство по размещению виджета чата на сайте, его кастомизации и управлению сессиями пользователей.

Минимальный код

HTML<script
  src="https://your-domain.com/js/M-TEH-widget.js"
  data-key="nxs_abc123..."
></script>

Вставьте перед закрывающим тегом </body>. Виджет появится в правом нижнем углу с настройками по умолчанию.

Полный набор параметров

HTML<script
  src="https://your-domain.com/js/M-TEH-widget.js"
  data-key="nxs_abc123..."
  data-pipeline="5"
  data-pos="bottom-right"
  data-color="#8b5cf6"
  data-label="Помощник"
  data-welcome="Привет! Чем могу помочь?"
  data-api="https://your-domain.com"
></script>

Кастомизация через CSS

Виджет использует Shadow DOM, поэтому CSS вашего сайта на него не влияет. Для кастомизации передавайте параметры через data-* атрибуты или используйте CSS Custom Properties:

CSS/* Переопределение через data-color */
/* data-color="#e11d48"  →  красный акцент */

/* Кнопка автоматически принимает указанный цвет,
   тень и hover-эффект рассчитываются автоматически */

Управление через JavaScript API

После загрузки скрипта доступен глобальный объект NexusWidget:

JS// Открыть чат программно
NexusWidget.open();

// Закрыть чат
NexusWidget.close();

// Переключить состояние
NexusWidget.toggle();

// Отправить сообщение от имени пользователя
NexusWidget.send("Хочу узнать о доставке");

// Обработчик входящего ответа
NexusWidget.onReply(function(reply, session) {
  console.log('AI ответил:', reply);
});

Множество виджетов на одной странице

Можно встраивать несколько виджетов с разными ключами и пайплайнами:

HTML<!-- Виджет продаж -->
<script src="..." data-key="nxs_sales123" data-label="Продажи" data-color="#10b981"></script>

<!-- Виджет поддержки -->
<script src="..." data-key="nxs_support456" data-label="Поддержка" data-color="#3b82f6"
        data-pos="bottom-left"></script>

Сессии и хранение истории

Session ID хранится в sessionStorage браузера под ключом nx_sid_{key_prefix}. Это означает:

• История сохраняется при навигации по сайту в рамках одной вкладки
• История сбрасывается при закрытии вкладки или браузера
• Разные вкладки имеют разные сессии

Для постоянной истории между сессиями сохраните Session ID в localStorage и передайте при инициализации:

JS// Передать постоянный session ID
document.currentScript.setAttribute('data-session',
  localStorage.getItem('my_chat_session') || ''
);

NexusWidget.onReply(function(reply, session) {
  localStorage.setItem('my_chat_session', session);
});

Встраивание в SPA (React, Vue, Angular)

Reactimport { useEffect } from 'react';

export function NexusChat() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://your-domain.com/js/M-TEH-widget.js';
    script.setAttribute('data-key', 'nxs_abc123...');
    script.setAttribute('data-color', '#8b5cf6');
    document.body.appendChild(script);

    return () => document.body.removeChild(script);
  }, []);

  return null;
}

Content Security Policy

Если на сайте настроен CSP, добавьте в заголовки:

CSPContent-Security-Policy:
  script-src 'self' https://your-domain.com;
  connect-src 'self' https://your-domain.com;
  style-src 'self' 'unsafe-inline';