Руководство по кастомизации и стилям чат-виджета

Документ описывает способы настройки внешнего вида и поведения чат-виджета. Виджет использует Shadow DOM для изоляции стилей и поддерживает кастомизацию через CSS-переменные и селекторы ::part(). Также предусмотрены доступность, корректная печать и поддержка reduced motion.

🎨 Кастомизация

Виджет использует Shadow DOM для изоляции стилей.
Настройка выполняется с помощью CSS-переменных и селекторов ::part().

🎯 CSS-переменные

Переопределяйте переменные на классе .chat-widget:

.chat-widget {
  /* Цвета (HSL формат без hsl()) */
  --cw-primary: 221 83% 53%;
  --cw-secondary: 258 83% 66%;
  --cw-background: 0 0% 100%;
  --cw-foreground: 222.2 84% 4.9%;

  /* Расположение */
  --cw-z-index: 50;
  --cw-button-bottom: 20px;
  --cw-button-right: 20px;
  --cw-window-bottom: 20px;
  --cw-window-right: 20px;

  /* Скругление углов */
  --cw-radius: 1rem;
}

🧩 Селекторы `::part()`

Стилизация внутренних элементов:

.chat-widget::part(button) {}
.chat-widget::part(window) {}
.chat-widget::part(header) {}
.chat-widget::part(body) {}
.chat-widget::part(footer) {}

🖨️ Поведение при печати

Виджет автоматически скрывается при печати.
Дополнительная настройка не требуется.

🎞️ Reduced Motion

Анимации автоматически отключаются для пользователей с настройкой
prefers-reduced-motion: reduce.

💡 Примеры

📍 Изменение позиции виджета

.chat-widget {
  --cw-button-bottom: 100px;
  --cw-button-right: 30px;
  --cw-window-bottom: 100px;
  --cw-window-right: 30px;
}

🔝 Повышенный z-index (поверх модальных окон)

.chat-widget {
  --cw-z-index: 99999;
}

🚫 Скрытие виджета на отдельных страницах

.no-chat .chat-widget {
  display: none;
}

♿ Доступность (Accessibility)

Виджет включает встроенные функции доступности:

role="dialog" и aria-modal="true" у окна чата
aria-label у всех интерактивных кнопок
aria-haspopup="dialog" у плавающей кнопки
Полная поддержка клавиатурной навигации