ஆவணங்கள்

விட்ஜெட் வடிவமைப்பும் தனிப்பயனாக்கமும்

init விருப்பங்கள் அல்லது டாஷ்போர்டு இடைமுகம் மூலம் விட்ஜெட்டின் தோற்றத்தைக் கட்டுப்படுத்தலாம்.

அளவு முன்னமைவுகள்#

chatSize மற்றும் launcherSize மூலம் உள்ளமைந்த மூன்று அளவு முன்னமைவுகளில் ஒன்றைத் தேர்ந்தெடுக்கலாம்:

chatSizeஅரட்டைச் சாளரம்
compact340 x 460 px
default380 x 520 px
large420 x 600 px

launcherSize, chatSize-இலிருந்து தனியாக, மிதக்கும் பொத்தானைக் கட்டுப்படுத்துகிறது:

launcherSizeLauncherஐகான்
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;
    }
    /* அறிவிப்பு அட்டைகளுக்குள் உள்ள 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-க்குள் இயங்குகிறது — உங்கள் பக்கப் பாணிகளிலிருந்து முற்றிலும் தனிமைப்படுத்தப்பட்டுள்ளது. பக்கவிளைவுகள் இல்லாமல் எந்த விட்ஜெட் class-ஐயும் பாதுகாப்பாக மேலெழுதலாம்.

கிடைக்கும் CSS class-கள்:

classஉறுப்பு
.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 வழியாகத் தானாகவே விட்ஜெட்டுக்குச் சென்றடையும்.