تنسيق الأداة وتخصيصها

تحكّم في مظهر الأداة عبر خيارات init أو واجهة لوحة التحكّم.

إعدادات الحجم المسبقة#

اختر من بين ثلاثة إعدادات حجم جاهزة مدمجة عبر chatSize و launcherSize:

chatSize	نافذة الدردشة
compact	340 x 460 بكسل
default	380 x 520 بكسل
large	420 x 600 بكسل

يتحكم launcherSize في الزر العائم بشكل مستقل عن chatSize:

launcherSize	الزر العائم	الأيقونة
small	48 بكسل	22 بكسل
default	60 بكسل	28 بكسل
large	68 بكسل	32 بكسل

Respondo.init({
  agentId: 'YOUR_AGENT_ID',
  chatSize: 'large',        // نافذة دردشة أعرض وأطول
  launcherSize: 'small'     // زر عائم أصغر
});

تحديد الموضع#

اضبط موضع الأداة بدقة باستخدام offsetBottom و offsetSide (بالبكسل). عند دمجها مع position (bottom-right أو bottom-left)، يمنحك ذلك تحكماً كاملاً في التموضع.

Respondo.init({
  agentId: 'YOUR_AGENT_ID',
  position: 'bottom-left',
  offsetBottom: 40,          // 40 بكسل من الأسفل (الافتراضي: 20)
  offsetSide: 30             // 30 بكسل من الحافة اليسرى (الافتراضي: 20)
});

استدارة الحواف وZ-Index#

borderRadius يتحكم في استدارة زوايا نافذة الدردشة (الافتراضي: 20 بكسل).zIndex يضبط ترتيب التراص (الافتراضي: 999999).

Respondo.init({
  agentId: 'YOUR_AGENT_ID',
  borderRadius: 12,    // زوايا أكثر حدّة
  zIndex: 100000       // z-index أقل لتجنب التعارضات
});

CSS مخصص#

للتنسيق المتقدم بما يتجاوز الخيارات المدمجة، مرّر سلسلة customCSS. تُحقَن في Shadow DOM الخاص بالأداة — يمكنها تجاوز أي نمط للأداة لكنها لا تستطيع التأثير على صفحتك.

Respondo.init({
  agentId: 'YOUR_AGENT_ID',
  customCSS: `
    .respondoai-chat {
      border-radius: 24px;
      box-shadow: 0 12px 48px rgba(0,0,0,0.2);
    }
    .respondoai-launcher {
      box-shadow: none;
      border: 2px solid #e5e7eb;
    }
    .respondoai-header {
      backdrop-filter: blur(10px);
    }
    .respondoai-message.assistant {
      background: #f0f9ff;
    }
    /* تنسيق زر الحث على الإجراء داخل بطاقات الإعلانات */
    .respondoai-announcement-cta-button {
      border-radius: 999px;
      font-weight: 600;
      letter-spacing: 0.2px;
    }
    /* ترتيب أزرار الحث على الإجراء في الإعلان صفاً بدلاً من التراص الافتراضي */
    .respondoai-announcement-ctas {
      flex-direction: row;
    }
  `
});

يعمل CSS المخصص داخل Shadow DOM — فهو معزول تماماً عن أنماط صفحتك. يمكنك تجاوز أي فئة (class) للأداة بأمان دون آثار جانبية.

فئات CSS المتاحة:

الفئة	العنصر
.respondoai-widget	الحاوية الجذرية (الموضع، z-index)
.respondoai-launcher	الزر العائم
.respondoai-chat	نافذة الدردشة
.respondoai-header	شريط رأس الدردشة
.respondoai-messages	حاوية قائمة الرسائل
.respondoai-message.user	فقاعة رسالة المستخدم
.respondoai-message.assistant	فقاعة رسالة البوت
.respondoai-input-area	حاوية شريط الإدخال
.respondoai-input	حقل إدخال النص
.respondoai-send	زر الإرسال
.respondoai-suggestion-btn	أزرار الأسئلة السريعة
.respondoai-announcement-cta-button	زر الحث على الإجراء داخل بطاقة إعلان
.respondoai-announcement-ctas	الغلاف حول أزرار الحث على الإجراء في بطاقة إعلان (التخطيط المستهدف)

يمكنك أيضاً ضبط جميع خيارات التنسيق من لوحة التحكّم — انتقل إلى القنوات ← الأداة ← المظهر. تُقدَّم التغييرات التي تُجريها في لوحة التحكّم إلى الأداة تلقائياً عبر واجهة إعدادات API.