ویجٹ کی اسٹائلنگ اور تخصیص

ویجٹ کی ظاہری شکل 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 کے ذریعے خودکار طور پر ویجٹ تک پہنچ جاتی ہیں۔