విడ్జెట్ స్టైలింగ్ & కస్టమైజేషన్
init ఆప్షన్‌ల ద్వారా లేదా డ్యాష్‌బోర్డ్ UI ద్వారా విడ్జెట్ రూపాన్ని నియంత్రించండి.
సైజ్ ప్రీసెట్‌లు#
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;
}
/* అనౌన్స్‌మెంట్ కార్డ్‌లోని CTA బటన్‌కు స్టైలింగ్ */
.respondoai-announcement-cta-button {
border-radius: 999px;
font-weight: 600;
letter-spacing: 0.2px;
}
/* అనౌన్స్‌మెంట్ CTA బటన్‌లను డిఫాల్ట్ స్టాక్‌కు బదులు ఒకే వరుసలో పేర్చడం */
.respondoai-announcement-ctas {
flex-direction: row;
}
`
});అందుబాటులో ఉన్న 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 బటన్‌ల చుట్టూ ఉండే ర్యాపర్ (లేఅవుట్ కోసం లక్ష్యం) |