दस्तावेज़

विजेट स्टाइलिंग और कस्टमाइज़ेशन

init विकल्पों या डैशबोर्ड UI के ज़रिए विजेट की दिखावट को नियंत्रित करें।

साइज़ प्रीसेट#

chatSize और launcherSize के ज़रिए तीन बिल्ट-इन साइज़ प्रीसेट में से चुनें:

chatSizeचैट विंडो
compact340 x 460 px
default380 x 520 px
large420 x 600 px

launcherSize फ़्लोटिंग बटन को chatSize से स्वतंत्र रूप से नियंत्रित करता है:

launcherSizeलॉन्चरआइकन
small48 px22 px
default60 px28 px
large68 px32 px
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,          // नीचे से 40px (डिफ़ॉल्ट: 20)
  offsetSide: 30             // बाएँ किनारे से 30px (डिफ़ॉल्ट: 20)
});

बॉर्डर रेडियस और Z-Index#

borderRadius चैट विंडो के कोनों की गोलाई को नियंत्रित करता है (डिफ़ॉल्ट: 20px)।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;
    }
    /* announcement कार्ड के अंदर CTA बटन को स्टाइल करें */
    .respondoai-announcement-cta-button {
      border-radius: 999px;
      font-weight: 600;
      letter-spacing: 0.2px;
    }
    /* announcement CTA बटन को डिफ़ॉल्ट स्टैक के बजाय एक पंक्ति में रखें */
    .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-buttonannouncement कार्ड के अंदर CTA बटन
.respondoai-announcement-ctasannouncement कार्ड में CTA बटन के चारों ओर रैपर (टारगेट लेआउट)
आप सभी स्टाइलिंग विकल्पों को डैशबोर्ड से भी कॉन्फ़िगर कर सकते हैं — जाएँ Channels → Widget → Appearance पर। डैशबोर्ड में किए गए बदलाव config API के ज़रिए अपने आप विजेट को दिए जाते हैं।