Настройка виджета
Всё необходимое для встраивания, настройки и кастомизации чат-виджета Paralect AI.
Быстрый старт
<script src="https://paralect.ai/loader.js" data-bot-id="YOUR_BOT_ID"></script>Создайте бота
Зарегистрируйтесь, создайте бота и загрузите документы. Система обработает их автоматически.
Получите код
Скопируйте JavaScript-код из настроек бота.
Встройте на сайт
Вставьте код перед </body>. Виджет появится мгновенно.
Справочник data-атрибутов
| Attribute | Required | Default | Description |
|---|---|---|---|
| data-bot-id | Required | Уникальный ID вашего бота. | |
| data-theme | Optional | light | Тема: 'light' (по умолчанию) или 'dark'. |
| data-position | Optional | right | Позиция: 'right' (по умолчанию) или 'left'. |
| data-color | Optional | Основной цвет в hex. Переопределяет настройки. |
Full example:
<script
src="https://paralect.ai/loader.js"
data-bot-id="bot_abc123"
data-position="bottom-right"
data-theme="auto"
data-primary-color="#0055ff"
></script>JavaScript API
Methods
| Method | Description |
|---|---|
| widget.open() | Открыть виджет программно. |
| widget.close() | Закрыть виджет. |
| widget.toggle() | Переключить состояние виджета. |
| widget.sendMessage(text) | Отправить сообщение боту от имени пользователя. |
| widget.setBotId(id) | Переключиться на другого бота во время работы. |
Events
| Event | Payload | Description |
|---|---|---|
| paralect:ready | {} | Виджет загружен и готов к работе. |
| paralect:open | {} | Виджет открыт. |
| paralect:close | {} | Виджет закрыт. |
| paralect:message | { text } | Отправка или получение сообщения. Включает текст. |
| paralect:error | { code } | Ошибка. Включает код ошибки. |
// Listen for widget events
document.addEventListener('widget-ready', () => {
console.log('Widget is ready');
});
document.addEventListener('widget-open', () => {
console.log('Widget opened');
});
document.addEventListener('widget-close', () => {
console.log('Widget closed');
});
document.addEventListener('widget-messageCount', (e) => {
console.log('Unread messages:', e.detail.count);
});// Programmatic control
// Open the widget
ParalectWidget.open();
// Close the widget
ParalectWidget.close();
// Toggle open/closed
ParalectWidget.toggle();
// Check if widget is open
const isOpen = ParalectWidget.isOpen();postMessage Protocol
Parent → Iframe
| Type | Payload | Description |
|---|---|---|
| paralect:open | {} | Открывает виджет. |
| paralect:close | {} | Закрывает виджет. |
| paralect:setBotId | { botId: string } | Переключает виджет на другого бота. |
| paralect:sendMessage | { text: string } | Отправляет сообщение боту от имени пользователя. |
| paralect:setTheme | { theme: 'light' | 'dark' } | Меняет тему виджета. |
Iframe → Parent
| Type | Payload | Description |
|---|---|---|
| paralect:ready | {} | Виджет загружен и готов к приёму сообщений. |
| paralect:messageSent | { text: string } | Пользователь отправил сообщение. |
| paralect:messageReceived | { text: string, sources: [] } | Получен ответ от бота. |
| paralect:error | { code: string } | Произошла ошибка в виджете. |
Security
Всегда проверяйте origin входящих postMessage-событий в вашем обработчике. Виджет Paralect отправляет сообщения только из своего iframe, но ваш сайт может получать сообщения из других источников.
Example:
// Send message to iframe
const iframe = document.getElementById('paralect-chat');
iframe.contentWindow.postMessage(
{ type: 'paralect:open' },
'https://paralect.ai'
);
// Listen for messages from iframe
window.addEventListener('message', (event) => {
// Always validate origin!
if (event.origin !== 'https://paralect.ai') return;
const { type, ...data } = event.data;
switch (type) {
case 'paralect:ready':
console.log('Widget iframe ready');
break;
case 'paralect:messageCount':
console.log('Messages:', data.count);
break;
case 'paralect:navigate':
console.log('Navigate to:', data.url);
break;
}
});White-Label и брендинг
Цвета
Настройте все цвета виджета под ваш бренд — шапка, сообщения, кнопки и текст.
Логотип
Замените аватар бота на логотип вашей компании. Настройте favicon для iframe виджета.
Шрифты
Выберите шрифты для интерфейса чата. Поддержка Google Fonts.
Убрать брендинг
Удалите надпись «Powered by Paralect AI» на тарифах Pro и Business.
Приветствие
Настройте персональное приветствие и аватар для новых посетителей.
Язык интерфейса
Задайте язык интерфейса виджета независимо от настроек браузера.
Платформы
WordPress
Установите официальный плагин Paralect AI из каталога WordPress.
Shopify
Добавьте код виджета в файл theme.liquid вашей темы Shopify.
Webflow
Встройте виджет через embed-элемент Webflow или глобально.
Wix
Используйте HTML-элемент iframe в Wix или добавьте код через tracking tools.
Squarespace
Добавьте код через Code Injection в продвинутых настройках.
Любой HTML
Вставьте код перед закрывающим тегом </body> на любой HTML-странице.