Chat Widget’ni sozlash va style berish qo‘llanmasi

Ushbu hujjat chat widget’ning tashqi ko‘rinishi va xatti-harakatlarini sozlashni tushuntiradi. Widget Shadow DOM’dan foydalanadi va CSS o‘zgaruvchilari hamda ::part() selektorlari orqali moslashtiriladi. Shuningdek, accessibility, print va reduced-motion qo‘llab-quvvatlanadi.

🎨 Customization

Widget Shadow DOM yordamida stillarni izolyatsiya qiladi.
Uni CSS custom properties va ::part() selektorlari orqali sozlash mumkin.

🎯 CSS Variables

Quyidagi o‘zgaruvchilarni .chat-widget klassida override qiling:

.chat-widget {
  /* Ranglar (HSL, hsl()siz) */
  --cw-primary: 221 83% 53%;
  --cw-secondary: 258 83% 66%;
  --cw-background: 0 0% 100%;
  --cw-foreground: 222.2 84% 4.9%;

  /* Joylashuv */
  --cw-z-index: 50;
  --cw-button-bottom: 20px;
  --cw-button-right: 20px;
  --cw-window-bottom: 20px;
  --cw-window-right: 20px;

  /* Burchak radiusi */
  --cw-radius: 1rem;
}

🧩 `::part()` Selectors

Ichki elementlarga style berish:

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

🖨️ Print Behavior

Widget chop etish vaqtida avtomatik yashiriladi.
Qo‘shimcha sozlama talab qilinmaydi.

🎞️ Reduced Motion

Agar foydalanuvchida prefers-reduced-motion: reduce yoqilgan bo‘lsa,
animatsiyalar o‘chiriladi.

💡 Misollar

📍 Widget joylashuvini o‘zgartirish

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

🔝 Yuqori z-index (modal oynalardan ustida)

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

🚫 Muayyan sahifalarda yashirish

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

♿ Accessibility

Widget accessibility imkoniyatlariga ega:

Chat oynasida role="dialog" va aria-modal="true"
Barcha interaktiv tugmalarda aria-label
Floating button’da aria-haspopup="dialog"
Klaviatura orqali to‘liq boshqarish imkoniyati