উইজেটের স্টাইলিং ও কাস্টমাইজেশন
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;
}
/* অ্যানাউন্সমেন্ট কার্ডের ভেতরের CTA বোতামের স্টাইল */
.respondoai-announcement-cta-button {
border-radius: 999px;
font-weight: 600;
letter-spacing: 0.2px;
}
/* অ্যানাউন্সমেন্টের 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 | অ্যানাউন্সমেন্ট কার্ডের ভেতরের CTA বোতাম |
| .respondoai-announcement-ctas | অ্যানাউন্সমেন্ট কার্ডের CTA বোতামগুলোর মোড়ক (লেআউট নিয়ন্ত্রণের জন্য) |
সব স্টাইলিং অপশন ড্যাশবোর্ড থেকেও সেট করা যায় — যান Channels → Widget → Appearance-এ। ড্যাশবোর্ডে করা পরিবর্তন config API-এর মাধ্যমে নিজে থেকেই উইজেটে পৌঁছে যায়।