‫Google משתמשת בטכנולוגיית AI כדי לתרגם תוכן לשפה המועדפת עליך. בתרגומים כאלו עשויות להיות שגיאות.

התאמה אישית של העיצוב

כל התאמה אישית של ממשק המשתמש של הווידג'ט של Web SDK, מעבר לאלה שמתועדות כאן, לא נתמכת ועלולה לגרום להתנהגות לא צפויה. אם אתם צריכים התאמות אישיות מתקדמות יותר, Google ממליצה להשתמש ב-Headless SDK.

כדי לוודא שההתאמות האישיות של העיצוב מופיעות כמו שצריך, Google ממליצה לבדוק את השינויים בסביבת בדיקה לפני שפורסים אותם בסביבת הייצור.

עיצוב מרכז האפליקציות

אפשר להתאים אישית את הסמל, הגודל, המיקום והצבע של מרכז האפליקציות.

הווידג'ט של עיצוב מרכז האפליקציות.

מפעיל
סמל פתיחה
סמל הסגירה

Icons

אם ממשק המשתמש של מרכז האפליקציות שמוגדר כברירת מחדל לא תואם למיתוג שלכם, אתם יכולים להתאים אישית את הסמלים של מרכז האפליקציות באמצעות קובץ SVG משלכם. אי אפשר להוסיף כתובת URL לקובץ ה-SVG, צריך להוסיף את קובץ ה-SVG עצמו.

ccaas.config({
  launcherOpenIcon: '<svg ....>',
  launcherCloseIcon: '<svg ....>',
})

דוגמה להתאמה אישית של סמל.

גודל

רוחב וגובה ברירת המחדל של מרכז האפליקציות הם 80px. אפשר לשנות אותו לגודל אחר:

#ccaas-widget {
  --launcher-size: 60px;
}

מצבי אינטראקציה

הצבעים של הגבול, הרקע והחזית של מרכז האפליקציות מוגדרים לפי מצב האינטראקציה – ברירת מחדל, העברת העכבר מעל, התמקדות ופעיל. לכל מצב יש קבוצה משלו של משתני CSS, ולכולם יש את אותה תבנית שמות: --launcher-{state}-{property}.

התאמה אישית של הגבולות של מרכז האפליקציות

אתם יכולים להתאים אישית את האפשרויות הבאות לגבול של מרכז האפליקציות:

גבול (צבע, רוחב וסגנון – מוגדרים יחד באמצעות קיצור הדרך של גבול CSS, לכל מצב אינטראקציה).
הטלת צללית (הגדלה או הקטנה).

הגבול של מרכז האפליקציות מוגדר לכל מצב אינטראקציה באמצעות קיצור הדרך של גבול CSS. אין משתנה נפרד לצבע הגבול או לרוחב הגבול.

--launcher-default-border
--launcher-hover-border
--launcher-focus-border
--launcher-active-border
--launcher-shadow

צבעים של מרכז האפליקציות

כברירת מחדל, מרכז האפליקציות משתמש בצבע המשני.

#ccaas-widget {
  --launcher-default-border: 6px solid var(--accent-9);
  --launcher-default-background: var(--accent-9);
  --launcher-default-color: var(--accent-contrast);
}

אותה תבנית חלה על המצבים "ריחוף", "מיקוד" ו"פעיל" (לכל אחד מהם יש משתנה *-border, *-background ו-*-color משלו). ארבעת המשתנים של *-border מופיעים בקטע Launcher border customization. שמונת משתני המצב הנותרים של הרקע והחזית הם:

--launcher-default-background
--launcher-default-color
--launcher-hover-background
--launcher-hover-color
--launcher-focus-background
--launcher-focus-color
--launcher-active-background
--launcher-active-color

אתם יכולים להתאים אישית את מרכז האפליקציות ולהשתמש בצבע אחר. לדוגמה:

#ccaas-widget {
  --launcher-default-border: 6px solid var(--green-10);
  --launcher-default-background: var(--blue-10);
  --launcher-default-color: white;
}

כדי לעצב את מצבי הריחוף, המיקוד והפעילות של מרכז האפליקציות, חוזרים על התבנית עם הקידומת של המצב התואם:

#ccaas-widget {
  --launcher-hover-background: var(--blue-11);
  --launcher-focus-background: var(--blue-11);
  --launcher-active-background: var(--blue-11);
}

השבתת מרכז האפליקציות

מסיבות אסתטיות, יכול להיות שתרצו להסתיר את מרכז האפליקציות של ה-SDK לאינטרנט, ובמקום זאת להשתמש בטריגר פרואקטיבי לצ'אט או להתחיל את הצ'אט באופן פרוגרמטי. אפשר להסתיר או להשבית את ממשק המשתמש של מרכז האפליקציות באמצעות disableLauncher:

ccaas.config({
  disableLauncher: true
})

כשהמפעיל מושבת, אפשר לפתוח את הווידג'ט באמצעות:

ccaas.show()

ווידג'ט
לוגו

גופנים

לבחור גופנים שונים לממשק המשתמש.

--font-en: Roboto, Verdana, Helvetica Neue

--font-zh: PingFang SC, Hiragino Sans GB, Droid Sans Fallback, Microsoft YaHei

--font-ja: Hiragino Sans, Meiryo

צבע משני

כדי להתאים אישית את צבע ההדגשה color, אפשר לבחור אפשרות צבע מוגדרת מראש באמצעות ההגדרה הבאה:

ccaas.config({
  accent: 'green',
})

הצבעים המוגדרים מראש כוללים את default,‏ blue,‏ green,‏ purple,‏ orange,‏ yellow,‏ gold,‏ red.

מוצג חלון צ'אט עם צבעים משניים.

התאמה אישית של המבטא

אם האפשרויות המוגדרות מראש לא מתאימות לצרכים של העסק, אתם יכולים להתאים אישית את הסגנון באמצעות משתני CSS.

#ccaas-widget {
  --accent-1: #fbfdff;
  --accent-2: #f4faff;
  --accent-3: #e6f4fe;
  --accent-4: #d5efff;
  --accent-5: #c2e5ff;
  --accent-6: #acd8fc;
  --accent-7: #8ec8f6;
  --accent-8: #5eb1ef;
  --accent-9: #0090ff;
  --accent-10: #0588f0;
  --accent-11: #0d74ce;
  --accent-12: #113264;
  --accent-contrast: white;
  --chat-input-selection-color: var(--accent-11);
}

‫12 השלבים של צבעי ההדגשה מבוססים על מודל הסולם של Radix UI Colors. ההדגשות המוגדרות מראש (default,‏ blue,‏ green,‏ purple,‏ orange,‏ yellow,‏ gold,‏ red) מגיעות מהסולם הזה ומוכנות לשימוש באמצעות ההגדרה accent. לכל סולם צבעים אחר עם שם באתר Radix Colors‏ (mint,‏ crimson,‏ cyan), מעתיקים את פלטת הצבעים עם 12 השלבים לערכים --accent-1 עד --accent-12.

מקום

אם נקודת העגינה היא #ccaas-widget, אפשר לעדכן את מיקום הווידג'ט באמצעות:

#ccaas-widget {
  --ujet-right: 20px;
  --ujet-bottom: 10px;
}

לוגו

בוחרים logo בהתאמה אישית שיופיע בווידג'ט.

ccaas.config({
  logo: 'https://example.com/logo.png'
})

אפשר להתאים אישית את האפשרויות הבאות לגבולות הווידג'ט:

צבע גבול
רוחב גבול
הטלת צללית (הגדלה או הקטנה)

--widget-border-color
--widget-border-width
--widget-shadow

הסתרת הגבול של לוגו הסוכן

אם נקודת הטעינה היא #ccaas-widget, אפשר להסתיר את הגבול של לוגו הסוכן באמצעות דוגמת הקוד הבאה:

#ccaas-widget {
--head-logo-shadow: none;
}

רכיבים שונים

בנוסף לצבעים המשניים ולמיקום, הווידג'ט של Web SDK מספק עוד משתני CSS להגדרת חלק מהרכיבים האחרים שמשמשים בווידג'ט.

אם נקודת הטעינה היא #ccaas-widget, אפשר להתאים אותה אישית באמצעות דוגמת הקוד הבאה:

#ccaas-widget {
  --variable-name: value;
}

בקטע הבא מפורטים משתני ה-CSS שזמינים לכל רכיב.

משתני CSS כלליים

--text-font: משפחת הגופנים של טקסט ברירת המחדל.

--text-color: צבע הטקסט שמוגדר כברירת מחדל.

--end-color: צבע ברירת המחדל של כפתורי הסיום (סיום הצ'אט, יציאה מהצ'אט, סיום הגלישה המשותפת)

סמל אישור

אפשר להתאים אישית את סמל האישור שמופיע בדפים שונים ב-SDK. אתם יכולים להחליף את סמל ברירת המחדל בסמל בהתאמה אישית, ולשלוט בגודל ובצבע שלו.

--confirmation-icon-size

--confirmation-icon-color

כפתורים

אתם יכולים לשלוט בהתאמה האישית של סוגי לחצנים שונים באופן פרטני. בטבלה הבאה מוסבר מה צפוי לקרות כשמתאימים אישית סוגים שונים של לחצנים בשילובים שונים.

ההתאמות האישיות של הכפתורים הוחלו	תוצאה
ללא	התנהגות ברירת המחדל (כל סגנונות הכפתורים מופיעים בהתאם לעיצוב הראשי).
התאמות אישיות כלליות של הכפתורים	כל הכפתורים (חוץ ממסכי תיבות הדו-שיח והצ'אט) מופיעים בהתאם להתאמות האישיות שהלקוח הגדיר. זה כולל לחצני תפריט. אם לא צוין משתנה כללי להתאמה אישית של הכפתור, המערכת תחיל את פעולת ברירת המחדל.
התאמה אישית של כפתורי התפריט התאמות אישיות של כפתורי תיבת הדו-שיח	לחצני התפריט מופיעים בהתאם למשתנה `--menu-button`. הלחצנים בתיבת הדו-שיח מופיעים בהתאם למשתנים `--dialog-primary-button` ו-`--dialog-secondary-button` אם לא צוין משתנה להתאמה אישית של כפתור בתפריט או בתיבת דו-שיח, המערכת תשתמש בפעולת ברירת המחדל.
התאמות אישיות כלליות של הכפתורים התאמה אישית של כפתור התפריט התאמות אישיות של כפתורי תיבת הדו-שיח	לחצני התפריט מופיעים בהתאם למשתנה `--menu-button` הכפתורים בתיבת הדו-שיח מופיעים בהתאם למשתנים `--dialog-primary-button` ו-`--dialog-secondary-button`. כפתורים שהם לא כפתורי תפריט או כפתורי תיבת דו-שיח מופיעים בהתאם להתאמות האישיות הכלליות. אם לא צוין משתנה התאמה אישית כללי, של תפריט או של לחצן תיבת דו-שיח, פעולת ברירת המחדל תחול על הלחצן הזה.

כפתורים כלליים

כל שאר הכפתורים ב-SDK שאין להם משתני CSS משלהם משתמשים בהגדרות ובהתאמה האישית של הכפתור הכללי.

--general-button-default-background
--general-button-default-border
--general-button-default-color
--general-button-default-outline
--general-button-hover-background
--general-button-hover-border
--general-button-hover-color
--general-button-hover-outline
--general-button-active-background
--general-button-active-border
--general-button-active-color
--general-button-active-outline
--general-button-focus-background
--general-button-focus-border
--general-button-focus-color
--general-button-focus-outline

כפתור ראשי

--primary-button-default-background
--primary-button-default-color
--primary-button-focus-background
--primary-button-focus-color
--primary-button-hover-background
--primary-button-hover-color
--primary-button-active-background
--primary-button-active-color
--primary-button-disabled-background
--primary-button-disabled-color

כפתורים משניים

--secondary-button-default-background
--secondary-button-default-border
--secondary-button-default-color
--secondary-button-hover-background
--secondary-button-hover-border
--secondary-button-hover-color
--secondary-button-active-background
--secondary-button-active-border
--secondary-button-active-color
--secondary-button-disabled-background
--secondary-button-disabled-border
--secondary-button-disabled-color
--secondary-button-focus-background
--secondary-button-focus-border
--secondary-button-focus-outline
--secondary-button-focus-color

כפתורים משניים (הפוך)

--inverse-button-default-background
--inverse-button-default-border
--inverse-button-default-outline
--inverse-button-default-color
--inverse-button-hover-background
--inverse-button-hover-border
--inverse-button-hover-outline
--inverse-button-hover-color
--inverse-button-active-background
--inverse-button-active-border
--inverse-button-active-outline
--inverse-button-active-color
  
--inverse-button-disabled-background
--inverse-button-disabled-border
--inverse-button-disabled-color
--inverse-button-focus-background
--inverse-button-focus-border
--inverse-button-focus-outline
--inverse-button-focus-color

לדוגמה, בחירת תור ובחירת ערוץ.

--menu-button-default-background
--menu-button-default-border
--menu-button-default-color
--menu-button-default-outline
--menu-button-hover-background
--menu-button-hover-border
--menu-button-hover-color
--menu-button-hover-outline
--menu-button-active-background
--menu-button-active-border
--menu-button-active-color
--menu-button-active-outline
--menu-button-focus-background
--menu-button-focus-border
--menu-button-focus-color
--menu-button-focus-outline

כפתורים בתיבת הדו-שיח

לדוגמה, חלונות מודאליים או חלונות קופצים.

--dialog-background
--dialog-color
--dialog-primary-button-default-background
--dialog-primary-button-default-border
--dialog-primary-button-default-color
--dialog-primary-button-default-outline
--dialog-primary-button-hover-background
--dialog-primary-button-hover-border
--dialog-primary-button-hover-color
--dialog-primary-button-hover-outline
--dialog-primary-button-focus-background
--dialog-primary-button-focus-border
--dialog-primary-button-focus-color
--dialog-primary-button-focus-outline
--dialog-primary-button-active-background
--dialog-primary-button-active-border
--dialog-primary-button-active-color
--dialog-primary-button-active-outline
--dialog-secondary-button-default-background
--dialog-secondary-button-default-border
--dialog-secondary-button-default-color
--dialog-secondary-button-default-outline
--dialog-secondary-button-hover-background
--dialog-secondary-button-hover-border
--dialog-secondary-button-hover-color
--dialog-secondary-button-hover-outline
--dialog-secondary-button-focus-background
--dialog-secondary-button-focus-border
--dialog-secondary-button-focus-color
--dialog-secondary-button-focus-outline
--dialog-secondary-button-active-background
--dialog-secondary-button-active-border
--dialog-secondary-button-active-color
--dialog-secondary-button-active-outline

דוגמה לתיבת דו-שיח עם כפתורים לסיום הצ'אט.

כותרת הצ'אט

--options-menu-icon-default-color
--options-menu-icon-hover-color
--options-menu-icon-active-color
--options-menu-icon-default-background
--options-menu-icon-hover-background
--options-menu-icon-active-background
--options-menu-icon-focus-background

דוגמה לחלון צ'אט עם כותרת מודגשת.

השתקת הצ'אט

ccaas.config({
  enableMuteChat: true,
})

בועת צ'אט

--chat-bubble-background
--chat-bubble-border
--chat-bubble-text
--chat-bubble-line-height
--chat-bubble-agent-background
--chat-bubble-agent-color
--chat-bubble-agent-border
--chat-bubble-agent-border-radius
--chat-bubble-user-background
--chat-bubble-user-color
--chat-bubble-user-border
--chat-bubble-user-border-radius

מוצגת דוגמה לחלון צ'אט שבו בועות ההודעות מודגשות.

התאמה אישית של בועת הצ'אט

הודעה:

--message-event-general-font
--message-event-general-font-size
--message-event-general-font-weight
--message-event-general-color
--message-event-error-font
--message-event-error-font-size
--message-event-error-font-weight
--message-event-error-color
--message-event-confirmation-font
--message-event-confirmation-font-size
--message-event-confirmation-font-weight
--message-event-confirmation-color

דוגמה לחלון צ'אט עם בועות הודעה מודגשות בהתאמה אישית.

--message-progress-color
--message-button-font-family
--message-button-font-size
--message-button-default-background
--message-button-default-border
--message-button-default-color
--message-button-default-font-style
--message-button-hover-background
--message-button-hover-border
--message-button-hover-color
--message-button-hover-font-style
--message-button-focus-background
--message-button-focus-border
--message-button-focus-color
--message-button-focus-font-style
--message-button-active-background
--message-button-active-border
--message-button-active-color
--message-button-active-font-style
--message-button-disabled-background
--message-button-disabled-border
--message-button-disabled-color
--message-button-disabled-font-style

נציג וירטואלי אחרי הסשן:

--post-session-background
--post-session-padding

דוגמה לחלון שמופיע אחרי הסשן.

קישור לטופס בהתאמה אישית:

--form-card-background
--form-card-title-color
--form-card-status-color
--form-card-subtitle-color
--form-card-image-height
--form-card-title-font-size
--form-card-title-font-weight
--form-card-border-radius
--form-card-subtitle-font-weight
--form-card-subtitle-font-size

טופס בהתאמה אישית:

--form-title-font-size
--form-title-font-weight
--form-title-color
--form-title-font-style
--form-header-font-size
--form-header-font-weight
--form-header-color
--form-header-font-style
--form-footer-font-size
--form-footer-font-weight
--form-footer-color
--form-footer-font-style
--form-field-border-radius
--form-field-cursor-color
--form-field-label-font-size
--form-field-label-font-weight
--form-field-label-color
--form-field-label-font-style
--form-field-active-border-color
--form-field-active-border-width
--form-field-inactive-border-color
--form-field-inactive-border-width
--form-field-list-selection-checkbox-color

התאמה אישית של העיצוב

עיצוב מרכז האפליקציות

Icons

גודל

מצבי אינטראקציה

התאמה אישית של הגבולות של מרכז האפליקציות

צבעים של מרכז האפליקציות

השבתת מרכז האפליקציות

עיצוב הווידג'ט

גופנים

צבע משני

התאמה אישית של המבטא

מקום

לוגו

התאמה אישית של גבולות הווידג'ט

הסתרת הגבול של לוגו הסוכן

רכיבים שונים

משתני CSS כלליים

סמל אישור

כפתורים

כפתורים כלליים

כפתור ראשי

כפתורים משניים

כפתורים משניים (הפוך)

כפתורי התפריט

כפתורים בתיבת הדו-שיח

כותרת הצ'אט

השתקת הצ'אט

בועת צ'אט

התאמה אישית של בועת הצ'אט

התאמה אישית של העיצוב קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.

עיצוב מרכז האפליקציות

Icons

גודל

מצבי אינטראקציה

התאמה אישית של הגבולות של מרכז האפליקציות

צבעים של מרכז האפליקציות

השבתת מרכז האפליקציות

עיצוב הווידג'ט

גופנים

צבע משני

התאמה אישית של המבטא

מקום

לוגו

התאמה אישית של גבולות הווידג'ט

הסתרת הגבול של לוגו הסוכן

רכיבים שונים

משתני CSS כלליים

סמל אישור

כפתורים

כפתורים כלליים

כפתור ראשי

כפתורים משניים

כפתורים משניים (הפוך)

כפתורי התפריט

כפתורים בתיבת הדו-שיח

כותרת הצ'אט

השתקת הצ'אט

בועת צ'אט

התאמה אישית של בועת הצ'אט

התאמה אישית של העיצוב