Стилизация виджета чата с помощью Пользовательского CSS

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

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

Доступно на тарифах Стандартный и выше как для плавающего виджета, так и для Встроенный виджет, для каждого предусмотрено отдельное поле CSS.

Где найти

Плавающий виджет: Панель управления → ваш ассистент → Каналы → Виджет чата → Расширенные
Встроенный виджет: Панель управления → ваш ассистент → Каналы → Встроенный чат → Расширенные

Предпросмотр рядом с редактором применяет ваш CSS прямо во время ввода. Поле вмещает до 20 000 символов.

Стабильные селекторы

Ваш CSS обращается к элементам виджета через документированные классы. Они представляют собой стабильный контракт: они продолжают работать после обновлений виджета.

Селектор	Элемент	Widget
`.wca-widget`	Окно чата	Оба
`.wca-header`	Шапка / заголовок	Оба
`.wca-messages`	Список сообщений	Оба
`.wca-message`	Любое сообщение	Оба
`.wca-message--bot`	Сообщение бота	Оба
`.wca-message--user`	Сообщение пользователя	Оба
`.wca-input`	Поле ввода	Оба
`.wca-input-container`	Область ввода	Оба
`.wca-prompt-button`	Кнопки подсказок	Оба
`.wca-welcome`	Приветственная область	Оба
`.wca-action-bar`	Action Bar	Только плавающий
`.wca-bubble`	Плавающая кнопка чата	Только плавающий
`.wca-speech-bubble`	Облачко сообщения рядом с кнопкой	Только плавающий

Предупреждение: стабильны только эти селекторы. Все остальные внутренние имена классов могут измениться без предварительного уведомления при обновлении виджета, что может нарушить ваши стили. Проверяйте стили после обновлений виджета.

`!important` не требуется

Ваш CSS автоматически переопределяет встроенные стили виджета, обычных селекторов вполне достаточно:

.wca-header {
  background: #0f172a;
}
.wca-message--bot {
  border-radius: 4px;
}

С технической точки зрения виджет переносит свои встроенные стили в слой каскада CSS при наличии пользовательского CSS, поэтому ваши правила (вне слоев) всегда имеют приоритет независимо от специфичности селектора.

Примеры

Изменение стиля кнопки чата с добавлением анимации:

@keyframes wca-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
.wca-bubble {
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  animation: wca-pulse 2s ease-in-out infinite;
}

Квадратные облачка сообщений с пользовательским размером шрифта:

.wca-message--bot,
.wca-message--user {
  border-radius: 4px;
  font-size: 15px;
}

Пользовательское оформление поля ввода:

.wca-input {
  border: 2px solid #0f172a;
  border-radius: 8px;
}
.wca-input::placeholder {
  color: #94a3b8;
}

Ограничения

Положение и размер плавающего виджета (отступы, ширина, высота) управляются через настройки в панели управления, а не через CSS, так как они применяются в виде инлайн-стилей
Другие внутренние классы, помимо документированных селекторов .wca-*, не являются стабильными
Директивы @import и внешние ссылки url() разрешены, но учитываются в лимите символов и увеличивают время загрузки