‫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;
}

התאמה אישית של גבולות

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

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

--launcher-border-color
--launcher-border-width
--launcher-shadow

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

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

{
  --launcher-border-color: var(--accent-10);
  --launcher-background-color: var(--accent-10);
  --launcher-color: var(--accent-9-contrast);
}

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

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

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

מסיבות אסתטיות, יכול להיות שתרצו להסתיר את כפתור ההפעלה של ה-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',
})

הצבעים המוגדרים מראש כוללים 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);
}

מקום

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

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

לוגו

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

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

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

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

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

רכיבים שונים

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

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

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

משתני 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-outline
--secondary-button-default-color

--secondary-button-hover-background
--secondary-button-hover-border
--secondary-button-hover-outline
--secondary-button-hover-color

--secondary-button-active-background
--secondary-button-active-border
--secondary-button-active-outline
--secondary-button-active-color

--secondary-button-disabled-background
--secondary-button-disabled-border
--secondary-button-disabled-outline
--secondary-button-disabled-color

--secondary-button-focus-background
--secondary-button-focus-border
--secondary-button-focus-outline
--secondary-button-focus-color

Secondary buttons (inverse)

--secondary-button-inverse-default-background
--secondary-button-inverse-default-border
--secondary-button-inverse-default-outline
--secondary-button-inverse-default-color

--secondary-button-inverse-hover-background
--secondary-button-inverse-hover-border
--secondary-button-inverse-hover-outline
--secondary-button-inverse-hover-color

--secondary-button-inverse-active-background
--secondary-button-inverse-active-border
--secondary-button-inverse-active-outline
--secondary-button-inverse-active-color

--secondary-button-inverse-disabled-background
--secondary-button-inverse-disabled-border
--secondary-button-inverse-disabled-outline
--secondary-button-inverse-disabled-color

--secondary-button-inverse-focus-background
--secondary-button-inverse-focus-border
--secondary-button-inverse-focus-outline
--secondary-button-inverse-focus-color

כפתורי תפריט

התאמה אישית של כפתור התפריט.

--menu-button-default-background
--menu-button-default-border
--menu-button-default-text
--menu-button-default-outline

--menu-button-hover-background
--menu-button-hover-border
--menu-button-hover-text

--menu-button-active-background
--menu-button-active-border
--menu-button-active-text
--menu-button-active-outline

--menu-button-focus-background
--menu-button-focus-border
--menu-button-focus-text
--menu-button-focus-outline

התאמה אישית של כפתור התפריט

לחצנים בתיבת דו-שיח

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

--dialog-background
--dialog-text

--dialog-primary-button-default-background
--dialog-primary-button-default-border
--dialog-primary-button-default-text
--dialog-primary-button-default-outline

--dialog-primary-button-hover-background
--dialog-primary-button-hover-border
--dialog-primary-button-hover-text
--dialog-primary-button-hover-outline

--dialog-primary-button-focus-background
--dialog-primary-button-focus-border
--dialog-primary-button-focus-text
--dialog-primary-button-focus-outline

--dialog-primary-button-active-background
--dialog-primary-button-active-border
--dialog-primary-button-active-text
--dialog-primary-button-active-outline

--dialog-secondary-button-default-background
--dialog-secondary-button-default-border
--dialog-secondary-button-default-text
--dialog-secondary-button-default-outline

--dialog-secondary-button-hover-background
--dialog-secondary-button-hover-border
--dialog-secondary-button-hover-text
--dialog-secondary-button-hover-outline

--dialog-secondary-button-focus-background
--dialog-secondary-button-focus-border
--dialog-secondary-button-focus-text
--dialog-secondary-button-focus-outline

--dialog-secondary-button-active-background
--dialog-secondary-button-active-border
--dialog-secondary-button-active-text
--dialog-secondary-button-active-outline

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

הכותרת של הצ'אט

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

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

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

השתקת הצ'אט

ccaas.config({
  enableMuteChat: true,
})

בועת צ'אט

--chat-bubble-background
--chat-bubble-border
--chat-bubble-text
--chat-bubble-line-height

--chat-bubble-agent-background
--chat-bubble-agent-text
--chat-bubble-agent-border-top-left
--chat-bubble-agent-border-top-right
--chat-bubble-agent-border-bottom-right
--chat-bubble-agent-border-bottom-left

--chat-bubble-user-background
--chat-bubble-user-text
--chat-bubble-user-border-top-left
--chat-bubble-user-border-top-right
--chat-bubble-user-border-bottom-right
--chat-bubble-user-border-bottom-left

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

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

הודעה

--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
--message-button-text-size
--message-button-text-color
--message-button-font-style

--message-button-default-background
--message-button-default-border
--message-button-hover-background
--message-button-focus-background
--message-button-focus-text

--message-button-disabled-background
--message-button-disabled-border
--message-button-disabled-color
--message-button-disabled-font-style

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

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

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

מוצגת דוגמה לחלון אחרי הסשן.

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