ਵਿਜੇਟ ਦਾ ਸਟਾਈਲ ਤੇ ਆਪਣੀ ਮਰਜ਼ੀ ਦੀ ਦਿੱਖ

ਵਿਜੇਟ ਦੀ ਦਿੱਖ 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',        // wider & taller chat window
  launcherSize: 'small'     // smaller floating button
});

ਥਾਂ ਤੈਅ ਕਰਨਾ#

ਵਿਜੇਟ ਦੀ ਥਾਂ ਬਾਰੀਕੀ ਨਾਲ ਸੈੱਟ ਕਰਨ ਲਈ offsetBottom ਅਤੇ offsetSide (ਪਿਕਸਲਾਂ ਵਿੱਚ) ਵਰਤੋ। position (bottom-right ਜਾਂ bottom-left) ਨਾਲ ਮਿਲ ਕੇ ਇਹ ਥਾਂ ਉੱਤੇ ਪੂਰਾ ਕਾਬੂ ਦਿੰਦੇ ਹਨ।

Respondo.init({
  agentId: 'YOUR_AGENT_ID',
  position: 'bottom-left',
  offsetBottom: 40,          // 40px from bottom (default: 20)
  offsetSide: 30             // 30px from left edge (default: 20)
});

ਗੋਲ ਕੋਨੇ ਤੇ Z-Index#

borderRadius ਚੈਟ ਵਿੰਡੋ ਦੇ ਕੋਨਿਆਂ ਦੀ ਗੋਲਾਈ ਤੈਅ ਕਰਦਾ ਹੈ (ਮੂਲ: 20px)।zIndex ਪਰਤਾਂ ਦਾ ਕ੍ਰਮ ਤੈਅ ਕਰਦਾ ਹੈ (ਮੂਲ: 999999)।

Respondo.init({
  agentId: 'YOUR_AGENT_ID',
  borderRadius: 12,    // sharper corners
  zIndex: 100000       // lower z-index to avoid conflicts
});

ਆਪਣੀ 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;
    }
    /* Style the CTA button inside announcement cards */
    .respondoai-announcement-cta-button {
      border-radius: 999px;
      font-weight: 600;
      letter-spacing: 0.2px;
    }
    /* Lay out announcement CTA buttons in a row instead of the default stack */
    .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 ਰਾਹੀਂ ਆਪੇ ਵਿਜੇਟ ਤੱਕ ਪਹੁੰਚ ਜਾਂਦੀਆਂ ਹਨ।