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>
Нажмите на кнопку ниже, чтобы открыть модальное окно: