Poisk AI Widget

AI-виджет для интеграции на ваш сайт

vDNKn1RdT

🚀 Быстрый старт

Добавьте эти строки в ваш HTML:

<!-- Настройки + загрузка виджета -->
<script>
  window.PoiskAiConfig = {
    partner: 'vn1',
    mainColor: '#328a27',
    fontFamily: 'Arial, sans-serif' // кастомный шрифт (опционально)
  };
  (function() {
    if (document.getElementById('poisk-ai-loader')) return;
    var s = document.createElement('script');
    s.id = 'poisk-ai-loader';
    s.src = 'https://widget.dev.poisk.ai/poisk-ai-loader.js';
    document.head.appendChild(s);
  })();
</script>

<!-- Кнопка открытия (price и old-price в копейках, show-buy-button — показать кнопку «Купить») -->
<poisk-ai-button product-id="123" price="46750" old-price="51200" show-buy-button></poisk-ai-button>

🎨 Глобальные настройки

Настройки задаются через window.PoiskAiConfig:

window.PoiskAiConfig = {
  partner: 'vn1',           // идентификатор партнёра
  mainColor: '#007bff',      // основной цвет (кнопка, заголовок)
  fontFamily: 'Arial, sans-serif' // кастомный шрифт (опционально)
};

🎮 Программное управление

Глобальный объект window.PoiskAi для управления виджетом из JavaScript:

// Инициализация с конфигом (создаёт модалку в DOM)
window.PoiskAi.init({ partner: 'vn1', mainColor: '#328a27' });

// Открыть модалку
window.PoiskAi.open();
window.PoiskAi.open({ productId: '12345' });

// Закрыть
window.PoiskAi.close();

// Проверить состояние
window.PoiskAi.isOpen(); // true | false

// Изменить конфиг
window.PoiskAi.setConfig({ mainColor: '#ff0000' });

// Получить текущий конфиг
window.PoiskAi.getConfig();

// Подписка на события
window.PoiskAi.on('cart-update', ({ productId, quantity, type }) => {
  console.log('Корзина обновлена:', productId, quantity, type);
});

// Отписка от события
window.PoiskAi.off('cart-update', handler);

// Показать/скрыть лоадер корзины
window.PoiskAi.setLoadingCart(true);  // показать
window.PoiskAi.setLoadingCart(false); // скрыть

Ожидание загрузки

Виджет загружается асинхронно (loader → widget). Чтобы безопасно использовать window.PoiskAi:

// Способ 1: Событие poisk-ai-ready (рекомендуется)
window.addEventListener('poisk-ai-ready', function(e) {
  console.log('Виджет готов!', e.detail.api);
  window.PoiskAi.on('cart-update', function(detail) { ... });
});

// Способ 2: Очередь (работает даже если виджет ещё не загружен)
window.__poiskAiQueue__ = window.__poiskAiQueue__ || [];
window.__poiskAiQueue__.push(function(api) {
  api.on('cart-update', function(detail) { ... });
});

🎯 Кастомная кнопка

Если вам нужна своя кнопка, используйте window.PoiskAi.open():

<!-- 1. Ваша кастомная кнопка -->
<button id="my-ai-button">🔍 Узнать о препарате</button>

<!-- 2. Скрытая кнопка виджета с атрибутами товара -->
<poisk-ai-button id="hidden-btn" style="display:none"
  product-id="123" price="46750" old-price="51200" show-buy-button
  cart-options='{"sku":"ABC-123"}'></poisk-ai-button>

<!-- 3. Открытие по клику -->
<script>
  document.getElementById('my-ai-button').addEventListener('click', function() {
    document.getElementById('hidden-btn').click();
  });
</script>

Скрытая <poisk-ai-button> хранит атрибуты товара (цена, ID, опции корзины). Кликом по вашей кнопке вызывается .click() на ней.

📡 События

Модальное окно генерирует события:

open            — модалка открылась { productId }
close           — модалка закрылась { productId }
cart-update     — изменение корзины { productId, quantity, type, cartOptions? }
                  type: 'increment' | 'decrement'
input-focus     — фокус на поле ввода { productId }
message-send    — пользователь отправил сообщение { productId, message }
message-receive — получен ответ от AI { productId, message }

// Пример: подписка на изменение корзины
window.PoiskAi.on('cart-update', ({ productId, quantity, type }) => {
  console.log('Корзина обновлена:', productId, quantity, type);
});

🛒 Корзина

При нажатии «В корзину» кнопка заменяется на счётчик [- N шт. +]. Все изменения количества генерируют событие cart-update:

<!-- Атрибуты: price, old-price (в копейках), show-buy-button, cart-quantity, max-quantity, cart-options (JSON) -->
<poisk-ai-button product-id="123" price="46750" old-price="51200" show-buy-button
  cart-quantity="2" max-quantity="10"
  cart-options='{"sku":"ABC-123","warehouse":"msk"}'></poisk-ai-button>

<script>
  // Подписка на изменение корзины (cartOptions — данные из атрибута)
  window.PoiskAi.on('cart-update', async ({ productId, quantity, type, cartOptions }) => {
    // type: 'increment' | 'decrement'
    // cartOptions: { sku: 'ABC-123', warehouse: 'msk' }
    window.PoiskAi.setLoadingCart(true);
    try {
      await fetch('/api/cart', {
        method: 'POST',
        body: JSON.stringify({ productId, quantity, type, cartOptions })
      });
    } finally {
      window.PoiskAi.setLoadingCart(false);
    }
  });
</script>

📦 Файлы

poisk-ai-loader.js — loader (подключайте этот файл)
Скачать
poisk-ai-widget.DNKn1RdT.js — виджет (загружается автоматически)
Скачать
manifest.json — информация о версии
Открыть

Демо

Нажмите на кнопку ниже, чтобы открыть модальное окно: