תצורת הרכיב
הגדירו את הרכיב באמצעות מאפייני data-* על תגית הסקריפט.
אתם מגדירים את הווידג׳ט באמצעות מאפייני data-* על תגית הסקריפט. כל מה שהווידג׳ט קורא מהתגית הזו נמצא למטה, מקובץ לפי מה שהוא עושה: ההגדרות הבסיסיות, המתקדמות, והמאפיינים שמדליקים התנהגות שלמה.
<script
type="module"
src="https://cdn.syncanix.com/widget.js"
data-key="pk_test_..."
data-position="bottom-left"
data-env="development"
data-chat-size="large"
data-locale="fr"
data-config-load="eager"
></script>מאפיינים מרכזיים
- data-key — המפתח לפרסום שלכם (pk_test_… או pk_live_…). חובה.
- data-enabled — הגדירו false כדי לטעון את הסקריפט בלי לטעון את הווידג׳ט (true כברירת מחדל).
- data-position — פינת המשגר: bottom-right (ברירת מחדל), bottom-left, top-right או top-left.
- data-locale — קובע את השפה וכיוון הכתיבה של הדף הזה (למשל ar או en-US). אם לא תגדירו אותו, הווידג'ט עוקב אחרי שפת הדף שלכם אוטומטית.
- data-chat-size — small (ברירת מחדל), medium, large, fullscreen או embedded.
- data-env — development או production (אחרת מוסק מקידומת המפתח).
- data-theme — מחרוזת JSON של דריסות אסימוני ערכת נושא.
הווידג'ט עוקב אחרי שפת הדף שלכם בעצמו — בלי שום מאפיין. הוא קורא את <html lang> שלכם, וכשהדף מציג כתב שונה מזה שהוא מכריז עליו, הוא סומך על מה שמופיע במסך. הפעילו את מחליף השפה שלכם והצ'אט יעקוב אחריו, בצד הדפדפן, בלי רענון ובלי לאבד את השיחה. השתמשו ב-data-locale רק אם אתם רוצים לעקוף זאת בדף מסוים.
ההודעה הראשונה של המבקר קובעת את שפת השיחה, והיא נשארת כך גם אם הוא יחליף אחר כך את שפת האתר שלכם: שיחה שהתחילה בעברית ממשיכה לענות בעברית. התוויות של הווידג'ט וההודעה על שימוש בבינה מלאכותית עדיין עוקבות אחרי הדף שלכם, כך שההודעה תמיד קריאה בשפה שבה הוא גולש. מי שרוצה להחליף שפה — פשוט מבקש זאת בצ'אט.
מאפיינים מתקדמים
- data-origin — מקור ה-API של Syncanix (ברירת המחדל היא ה-API של הייצור).
- data-theme-name — בוחר עיצוב מסוים מהספרייה שלכם; הערך auto עוקב אחר הגדרת בהיר/כהה של האתר המארח.
- data-prompt-profile — מריץ בדף הזה פרופיל הנחיה מסוים, לפי השם שבו פרסמתם אותו. אפשר לנקוב רק בפרופילים שפורסמו; כל ערך אחר חוזר לפרופיל הפעיל שלכם.
- data-mount-target — בורר CSS למקום שבו לרכיב רכיב מוטמע.
- data-api-base-url — איפה ה-API שלכם נמצא, אם הוא על מארח אחר מהעמוד. בלעדיו הפעולות נשלחות למארח של העמוד עצמו, מה שנכון לאתר עם מארח יחיד ושגוי לפיצול הנפוץ בין app. ל-api.
- data-api-origins — רשימה מופרדת בפסיקים של מקורות נוספים שהם גם ה-API שלכם. רק תעבורה למקורות שלכם נצפית, ולכן API על מארח נפרד חייב להיות מצוין כאן אחרת הוא מתעלם ממנו במכוון.
- data-theme-vars — ממפה את תפקידי הצבע של הווידג׳ט לשמות משתני ה-CSS שלכם, כ-JSON. נפתר בזמן אמת ולכן עוקב לבד אחרי המעבר בין בהיר לכהה; שלבו עם data-theme-source כדי לציין את האלמנט שעליו המשתנים שלכם מוגדרים.
- data-config-load — lazy (טעינת הגדרות בפתיחה הראשונה, ברירת מחדל) או eager (בעת ההרכבה).
- data-executor — שם פונקציה גלובלית שמריצה פעולות דפדפן/מארח.
- data-token-provider — שם פונקציה גלובלית שמחזירה את האסימון של משתמש הקצה.
- data-step-up-provider — שם פונקציה גלובלית שמפעילה אימות-מחדש מוגבר.
- data-headers-provider — שם של פונקציה גלובלית המחזירה כותרות בקשה נוספות.
- data-client-witness — הצטרפות לתצפית פסיבית על תעבורת ה-API, צורנית בלבד (כבוי כברירת מחדל).
- data-act-on-behalf-consent — דרישת הסכמה חד-פעמית של «פעולה בשמכם» (כבוי כברירת מחדל).
הפעלת התנהגות
אלה לא מגדירים איך הווידג׳ט נראה או לאן הוא מפנה — הם מדליקים התנהגות שלמה. כל אחד כבוי אלא אם תוסיפו אותו.
- data-trigger — בורר CSS לכפתורים בעמוד שלכם שאמורים לפתוח את הצ׳אט. פריט ניווט, קישור בפוטר, כפתור במצב ריק. לחיצה מחליפה את מצב הפאנל, והווידג׳ט שומר על מצב ההרחבה של הכפתור מוכרז נכון לקוראי מסך.
- data-ask-about — מאפשר למבקר לבחור משהו בעמוד שלכם ולשאול עליו את העוזר. כבוי כברירת מחדל; צריך גם להפעיל אותו לסביבת העבודה.
- data-haptics — קבעו ל-false כדי שהווידג׳ט לא ירטוט בטלפון כשמבקר מאשר פעולה. פועל כברירת מחדל, ותמיד מדוכא למבקר שהמכשיר שלו מבקש פחות תנועה.
- data-frame-mode — איך ווידג׳ט בתוך iframe מתנהג: auto (ברירת מחדל), agent או standalone. רלוונטי רק אם האפליקציה שלכם מטמיעה חלקים מעצמה בפריימים.
- data-frame-origins — רשימה מופרדת בפסיקים של מקורות מדויקים שהווידג׳ט העליון שלכם רשאי לעבוד עם העמודים הממוסגרים שלהם. ריק או חסר פירושו אף אחד, וזו ברירת המחדל.
- data-capture-closed-roots — קבעו ל-true אם חלקים מהעמוד שלכם בנויים בספריית רכיבים חיצונית שהעוזר לא יכול לראות לתוכה. כבוי כברירת מחדל, ושווה לפנות אליו רק כשפקד שהוא אמור להפעיל בלתי נראה לו.
שמירת נתונים הרחק מהעוזר
העוזר קורא את הדף שלך כדי לדעת מה יש בו. שלושת אלה קובעים מה מותר לו לראות, כך שערך שמופיע על המסך לעולם אינו חייב להגיע אליו — וצורות נפוצות של מידע אישי נמנעות כברירת מחדל.
- data-block-selectors — רשימת בוררי CSS מופרדים בפסיקים לאזורים שהעוזר לעולם לא אמור לראות. אלמנט תואם, וכל מה שבתוכו, מוחרג כבר בשלב הלכידה — נעדר באמת ולא הוסר לאחר קריאה. סמנו את המכל, לא כל פקד בנפרד.
- data-mask-selectors — רשימת בוררי CSS מופרדים בפסיקים שהערכים שלהם נמנעים בעוד השדה עצמו נשאר גלוי. העוזר יודע שהשדה קיים אך לעולם אינו קורא את תוכנו — אותו טיפול שמקבלים סיסמאות וכרטיסים המוסתרים באופן מובנה.
- data-mask-pii — פעיל כברירת מחדל. ערך שנראה ככתובת דוא"ל, מספר ביטוח לאומי אמריקאי או מספר כרטיס נמנע גם אם שום בורר אינו מציין אותו. הוא מסתיר רק את הערך; השדה נשאר גלוי. הגדירו אותו ל-false רק במקום שבו אתם מקבלים שערכים אלה יגיעו לעוזר ולתמליל השמור.