עיצוב והתאמה של הווידג׳ט

שלטו במראה הווידג׳ט דרך אפשרויות ה-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.