विजेटची शैली आणि सानुकूलन

विजेटचे रूप 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',        // अधिक रुंद आणि उंच चॅट विंडो
  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-button	announcement कार्डमधले CTA बटण
.respondoai-announcement-ctas	announcement कार्डमधल्या CTA बटणांभोवतीचा रॅपर (मांडणी बदलण्यासाठी)

सर्व शैली-पर्याय डॅशबोर्डमधूनही ठरवता येतात — Channels → Widget → Appearance येथे जा. डॅशबोर्डमध्ये केलेले बदल config API द्वारे आपोआप विजेटपर्यंत पोहोचतात.