ظاهر و سفارشی‌سازی ویجت

ظاهر ویجت را با گزینه‌های init یا از رابط داشبورد کنترل کنید.

اندازه‌های آماده#

با chatSize و launcherSize یکی از سه اندازهٔ آمادهٔ داخلی را انتخاب کنید:

chatSize	پنجرهٔ چت
compact	340 x 460 px
default	380 x 520 px
large	420 x 600 px

launcherSize دکمهٔ شناور را مستقل از chatSize کنترل می‌کند:

launcherSize	دکمهٔ شناور	آیکون
small	48 px	22 px
default	60 px	28 px
large	68 px	32 px

Respondo.init({
  agentId: 'YOUR_AGENT_ID',
  chatSize: 'large',        // wider & taller chat window
  launcherSize: 'small'     // smaller floating button
});

موقعیت‌دهی#

موقعیت ویجت را با offsetBottom و offsetSide (بر حسب پیکسل) دقیق تنظیم کنید. همراه با position (bottom-right یا bottom-left) کنترل کامل جای‌گذاری را در اختیار دارید.

Respondo.init({
  agentId: 'YOUR_AGENT_ID',
  position: 'bottom-left',
  offsetBottom: 40,          // 40px from bottom (default: 20)
  offsetSide: 30             // 30px from left edge (default: 20)
});

گردی گوشه‌ها و Z-Index#

borderRadius گردی گوشه‌های پنجرهٔ چت را تعیین می‌کند (پیش‌فرض: 20px).zIndex ترتیب لایه‌ها را مشخص می‌کند (پیش‌فرض: 999999).

Respondo.init({
  agentId: 'YOUR_AGENT_ID',
  borderRadius: 12,    // sharper corners
  zIndex: 100000       // lower z-index to avoid conflicts
});

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;
    }
    /* Style the CTA button inside announcement cards */
    .respondoai-announcement-cta-button {
      border-radius: 999px;
      font-weight: 600;
      letter-spacing: 0.2px;
    }
    /* Lay out announcement CTA buttons in a row instead of the default stack */
    .respondoai-announcement-ctas {
      flex-direction: row;
    }
  `
});

CSS سفارشی داخل Shadow DOM اجرا می‌شود — کاملاً از استایل‌های صفحهٔ شما جداست. می‌توانید بی‌خطر هر کلاس ویجت را بدون عوارض جانبی بازنویسی کنید.

کلاس‌های CSS در دسترس:

کلاس	عنصر
.respondoai-widget	ظرف ریشه (position، 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	دکمهٔ CTA داخل کارت اطلاعیه
.respondoai-announcement-ctas	پوشش دور دکمه‌های CTA در کارت اطلاعیه (برای چیدمان)

همهٔ گزینه‌های ظاهری را می‌توانید از داشبورد هم تنظیم کنید — به Channels → Widget → Appearance بروید. تغییرهای انجام‌شده در داشبورد به‌طور خودکار از راه config API به ویجت می‌رسند.