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

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

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

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

Где найти

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

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

Готовые эффекты кнопки

Над редактором доступны Без эффекта, Пульсация, Парение, Покачивание и Свечение. Выбор добавляет четко обозначенный управляемый блок. Смена эффекта заменяет только этот блок, а Без эффекта удаляет его. Ручные правила и загруженные изображения сохраняются; лимит в 20 000 символов проверяется до вставки.

Для эффектов действует тот же доступ с тарифа Стандартный, что и для пользовательского CSS. Также добавляется prefers-reduced-motion, чтобы показывать статическую кнопку посетителям с уменьшенной анимацией.

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

Ваш 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% {
    transform: scale(1);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--bubble-color, #2563eb) 70%, transparent);
  }
  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 15px color-mix(in srgb, var(--bubble-color, #2563eb) 0%, transparent);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--bubble-color, #2563eb) 0%, transparent);
  }
}

.wca-bubble {
  animation: wca-pulse 2s infinite ease-in-out;
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform;
}

.wca-speech-bubble {
  border-radius: 16px !important;
}

.wca-speech-bubble::before,
.wca-speech-bubble::after {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .wca-bubble {
    animation: none !important;
  }
}

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

.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() разрешены, но учитываются в лимите символов и увеличивают время загрузки