Стилизация и настройка виджета

Управляйте внешним видом виджета через параметры инициализации или интерфейс панели управления.

Готовые размеры#

Выберите один из трёх встроенных размеров через chatSize и launcherSize:

chatSize	Окно чата
compact	340 x 460 px
default	380 x 520 px
large	420 x 600 px

launcherSize управляет плавающей кнопкой независимо от chatSize:

launcherSize	Кнопка-лаунчер	Иконка
small	48 px	22 px
default	60 px	28 px
large	68 px	32 px

Respondo.init({
  agentId: 'YOUR_AGENT_ID',
  chatSize: 'large',        // шире и выше окно чата
  launcherSize: 'small'     // меньше плавающая кнопка
});

Позиционирование#

Точно настройте положение виджета с помощью offsetBottom и offsetSide (в пикселях). В сочетании с position (bottom-right или bottom-left) это даёт полный контроль над размещением.

Respondo.init({
  agentId: 'YOUR_AGENT_ID',
  position: 'bottom-left',
  offsetBottom: 40,          // 40px от низа (по умолчанию: 20)
  offsetSide: 30             // 30px от левого края (по умолчанию: 20)
});

Скругление углов и z-index#

borderRadius управляет скруглением углов окна чата (по умолчанию: 20px).zIndex задаёт порядок наложения (по умолчанию: 999999).

Respondo.init({
  agentId: 'YOUR_AGENT_ID',
  borderRadius: 12,    // более острые углы
  zIndex: 100000       // более низкий z-index, чтобы избежать конфликтов
});

Пользовательский CSS#

Для продвинутой стилизации сверх встроенных параметров передайте строку customCSS. Она внедряется в Shadow DOM виджета — может переопределить любой стиль виджета, но не влияет на вашу страницу.

Respondo.init({
  agentId: 'YOUR_AGENT_ID',
  customCSS: `
    .respondoai-chat {
      border-radius: 24px;
      box-shadow: 0 12px 48px rgba(0,0,0,0.2);
    }
    .respondoai-launcher {
      box-shadow: none;
      border: 2px solid #e5e7eb;
    }
    .respondoai-header {
      backdrop-filter: blur(10px);
    }
    .respondoai-message.assistant {
      background: #f0f9ff;
    }
    /* Стилизация CTA-кнопки внутри карточек-анонсов */
    .respondoai-announcement-cta-button {
      border-radius: 999px;
      font-weight: 600;
      letter-spacing: 0.2px;
    }
    /* Располагаем CTA-кнопки анонса в ряд вместо стандартного стека */
    .respondoai-announcement-ctas {
      flex-direction: row;
    }
  `
});

Пользовательский CSS работает внутри Shadow DOM — он полностью изолирован от стилей вашей страницы. Вы можете безопасно переопределять любой класс виджета без побочных эффектов.

Доступные CSS-классы:

Класс	Элемент
.respondoai-widget	Корневой контейнер (position, z-index)
.respondoai-launcher	Плавающая кнопка
.respondoai-chat	Окно чата
.respondoai-header	Шапка чата
.respondoai-messages	Контейнер списка сообщений
.respondoai-message.user	Пузырь сообщения пользователя
.respondoai-message.assistant	Пузырь сообщения бота
.respondoai-input-area	Контейнер строки ввода
.respondoai-input	Поле текстового ввода
.respondoai-send	Кнопка отправки
.respondoai-suggestion-btn	Кнопки быстрых вопросов
.respondoai-announcement-cta-button	CTA-кнопка внутри карточки-анонса
.respondoai-announcement-ctas	Обёртка вокруг CTA-кнопок в карточке-анонсе (для управления раскладкой)

Все параметры стилизации также можно настроить в панели управления — перейдите в Каналы → Виджет → Внешний вид. Изменения, сделанные в панели, автоматически передаются виджету через config API.