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"vaaria-modal="true"Barcha interaktiv tugmalarda
aria-labelFloating button’da
aria-haspopup="dialog"Klaviatura orqali to‘liq boshqarish imkoniyati