Настройка виджета
Всё необходимое для встраивания, настройки и кастомизации чат-виджета Pravia.
Быстрый старт
<script src="https://pravia.avpdev.com/loader.js" data-bot-id="YOUR_BOT_ID"></script>Создайте бота
Зарегистрируйтесь, создайте бота и загрузите документы. Система обработает их автоматически.
Получите код
Скопируйте JavaScript-код из настроек бота.
Встройте на сайт
Вставьте код перед </body>. Виджет появится мгновенно.
Справочник data-атрибутов
| Attribute | Required | Default | Description |
|---|---|---|---|
| data-bot-id | Required | Уникальный ID вашего бота. | |
| data-theme | Optional | auto | Тема: 'auto' (по умолчанию), 'light' или 'dark'. 'auto' следует системным настройкам пользователя. |
| data-position | Optional | bottom-right | Позиция: 'bottom-right' (по умолчанию) или 'bottom-left'. |
| data-primary-color | Optional | Основной цвет в hex (например '#2563eb'). Переопределяет настройки. |
Full example:
<script
src="https://pravia.avpdev.com/loader.js"
data-bot-id="bot_abc123"
data-position="bottom-right"
data-theme="auto"
data-primary-color="#0055ff"
></script>JavaScript API
Methods
| Method | Description |
|---|---|
| PraviaWidget.open() | Открыть виджет программно. |
| PraviaWidget.close() | Закрыть виджет. |
| PraviaWidget.toggle() | Переключить состояние виджета. |
Events
| Event | Payload | Description |
|---|---|---|
| widget-ready | { botId } | Виджет загружен и готов к работе. |
| widget-open | {} | Виджет открыт. |
| widget-close | {} | Виджет закрыт. |
| widget-messageCount | { count } | Обновлено количество сообщений. |
// 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
PraviaWidget.open();
// Close the widget
PraviaWidget.close();
// Toggle open/closed
PraviaWidget.toggle();postMessage Protocol
Parent → Iframe
| Type | Payload | Description |
|---|---|---|
| open | {} | Открывает виджет. |
| close | {} | Закрывает виджет. |
Iframe → Parent
| Type | Payload | Description |
|---|---|---|
| ready | { botId: string } | Виджет загружен и готов к приёму сообщений. |
| open | {} | Виджет был открыт. |
| close | {} | Виджет был закрыт. |
| messageCount | { count: number } | Обновлено количество сообщений. |
Security
Всегда проверяйте origin входящих postMessage-событий в вашем обработчике. Лоадер сохраняет origin iframe при первом сообщении 'ready' и принимает сообщения только от этого origin.
Example:
// Send message to iframe
const iframe = document.getElementById('pravia-chat');
iframe.contentWindow.postMessage(
{ type: 'open' },
'*'
);
// Listen for messages from iframe
window.addEventListener('message', (event) => {
// Always validate origin against the widget's origin!
const { type, ...data } = event.data;
switch (type) {
case 'ready':
console.log('Widget iframe ready');
break;
case 'open':
console.log('Widget opened');
break;
case 'close':
console.log('Widget closed');
break;
case 'messageCount':
console.log('Messages:', data.count);
break;
}
});White-Label и брендинг
Цвета
Настройте все цвета виджета под ваш бренд — шапка, сообщения, кнопки и текст.
Логотип
Замените аватар бота на логотип вашей компании. Настройте favicon для iframe виджета.
Шрифты
Выберите шрифты для интерфейса чата. Поддержка Google Fonts.
Убрать брендинг
Удалите надпись «Powered by Pravia» на тарифах Pro и Business.
Приветствие
Настройте персональное приветствие и аватар для новых посетителей.
Язык интерфейса
Задайте язык интерфейса виджета независимо от настроек браузера.
Платформы
WordPress
Добавьте виджет «Custom HTML» в Внешний вид → Виджеты или вставьте код в footer.php перед </body>.
Shopify
Добавьте код виджета в файл theme.liquid вашей темы Shopify.
Webflow
Встройте виджет через embed-элемент Webflow или глобально.
Wix
Используйте HTML-элемент iframe в Wix или добавьте код через tracking tools.
Squarespace
Добавьте код через Code Injection в продвинутых настройках.
Любой HTML
Вставьте код перед закрывающим тегом </body> на любой HTML-странице.