FastComments.com
Menu Icon

שפה 🇮🇱 עברית
🇺🇸 English 🇧🇬 Български 🇨🇳 简体中文 🇹🇼 繁體中文 🇭🇷 Hrvatski 🇩🇰 Dansk 🇳🇱 Nederlands 🇫🇷 Français (France) 🇩🇪 Deutsch 🇬🇷 Ελληνικά 🇮🇱 עברית 🇮🇳 हिन्दी 🇮🇹 Italiano 🇯🇵 日本語 🇰🇷 한국어 🇵🇱 Polski 🇧🇷 Português (Brasil) 🇷🇺 Русский 🇷🇸 Srpski (Latinica) 🇷🇸 Српски 🇸🇮 Slovenščina 🇪🇸 Español 🇺🇦 Українська 🇹🇷 Türkçe

התחלה

התחלה
דוגמאות

תצורה

אפשרויות תצורה
עיצוב רספונסיבי

התאמה אישית

התאמה אישית

מתקדם

סנכרון בזמן אמת
תיעוד ה-API

צ'אט תמונות

FastComments Image Chat מאפשר שיחות אינטראקטיביות על תמונות על ידי מתן אפשרות למשתמשים ללחוץ בכל מקום על תמונה כדי ליצור נקודות דיון. משתמשים יכולים ללחוץ על חלקים ספציפיים בתמונות כדי להתחיל שיחות על אזורים אלו, וכך ליצור סימנים חזותיים שמראים היכן נמצאים הדיונים.

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

התחלה Internal Link

תרחישי שימוש

Image Chat מתאים מצוין למשוב עיצובי, כאשר צוותים צריכים לדון באלמנטים ספציפיים במוקאפים או בצילומי מסך. אתרי סקירת מוצרים יכולים לאפשר ללקוחות לדון בתכונות ספציפיות הנראות בתמונות המוצר. פלטפורמות חינוכיות יכולות להשתמש בו לדיון בדיאגרמות, מפות או תמונות מדעיות. גלריות תמונות יכולות להפוך לאינטראקטיביות עם תגובות הקשורות למיקום. אתרי נדל"ן יכולים לאפשר למבקרים לדון בתכונות ספציפיות הנראות בתמונות הנכס.

התחלה מהירה

התחלת העבודה עם Image Chat היא פשוטה. אתם צריכים את סקריפט FastComments Image Chat, אלמנט תמונה או מיכל עם תמונה, ואובייקט תצורה עם מזהה ה-Tenant שלכם.

התקנה

הוסיפו את סקריפט Image Chat לדף שלכם:

טעינת סקריפט Image Chat
Copy Copy
1
2<script src="https://cdn.fastcomments.com/js/embed-image-chat.min.js"></script>
3

מימוש בסיסי

הנה דוגמה מינימלית:

מימוש בסיסי של Image Chat
Copy CopyRun External Link
1
2<!DOCTYPE html>
3<html>
4<head>
5 <title>My Image Gallery with Image Chat</title>
6</head>
7<body>
8 <!-- Your image -->
9 <img id="my-image" src="https://fastcomments.com/images/image-chat-demo-1.jpg" alt="Pretty Trail" />
10
11 <!-- Load the Image Chat script -->
12 <script src="https://cdn.fastcomments.com/js/embed-image-chat.min.js"></script>
13
14 <!-- Initialize Image Chat -->
15 <script>
16 FastCommentsImageChat(document.getElementById('my-image'), {
17 tenantId: 'demo'
18 });
19 </script>
20</body>
21</html>
22

החליפו את 'demo' במזהה ה-Tenant האמיתי שלכם ב-FastComments אם זה עדיין לא המזהה שלכם, אותו תוכלו למצוא בלוח הבקרה של FastComments.

איך זה עובד

לאחר האתחול, משתמשים יכולים ללחוץ בכל מקום על התמונה. כאשר מתרחשת לחיצה, סמן ריבועי ויזואלי מופיע באותו מיקום וחלון צ'אט נפתח. משתמשים אחרים יכולים לראות את כל הסמנים וללחוץ עליהם כדי לצפות או להשתתף באותם דיונים. כל הדיונים מסתנכרנים בזמן אמת בקרב כל המבקרים.

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

הדגמה חיה

תוכלו לראות את Image Chat בפעולה בדף ההדגמה החיה שלנו.

הצעדים הבאים

עכשיו כשיש לכם את היסודות עובדים, תוכלו להתאים אישית את המראה וההתנהגות במדריך אפשרויות תצורה. עיינו במדריך עיצוב רספונסיבי כדי להבין כיצד פועל מיקום מבוסס אחוזים. למדו על עיצוב ותמיכה במצב כהה במדריך ההתאמה האישית. לאינטגרציות מתקדמות, חקרו את ה-API Reference.

ספריות Frontend

כל ספריות ה-FastComments ל-frontend (react, vue, angular וכו') כוללות את Image Chat.

דוגמאות Internal Link

דוגמה בסיסית

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

דוגמה בסיסית ל-Image Chat
Copy CopyRun External Link
1
2<!DOCTYPE html>
3<html>
4<head>
5 <title>Product Image with Chat</title>
6</head>
7<body>
8 <img id="product-image" src="https://fastcomments.com/images/image-chat-demo-1.jpg" alt="Product Photo" />
9
10 <script src="https://cdn.fastcomments.com/js/embed-image-chat.min.js"></script>
11 <script>
12 FastCommentsImageChat(document.getElementById('product-image'), {
13 tenantId: 'demo'
14 });
15 </script>
16</body>
17</html>
18

דוגמה עם אלמנט מכולה

אתה יכול גם להעביר אלמנט מכולה שיש בתוכו תמונה:

Image Chat עם אלמנט מכולה
Copy CopyRun External Link
1
2<div id="image-container">
3 <img src="https://fastcomments.com/images/image-chat-demo-1.jpg" alt="System Diagram" />
4</div>
5
6<script src="https://cdn.fastcomments.com/js/embed-image-chat.min.js"></script>
7<script>
8 FastCommentsImageChat(document.getElementById('image-container'), {
9 tenantId: 'demo'
10 });
11</script>
12

דוגמה עם מזהה URL מותאם אישית

לפריסה ברירת המחדל, Image Chat משתמש ב-URL של הדף בשילוב עם מקור התמונה וקואורדינטות כדי לזהות שיחות. אתה יכול לספק urlId מותאם אישית:

Image Chat עם מזהה URL מותאם אישית
Copy CopyRun External Link
1
2<script src="https://cdn.fastcomments.com/js/embed-image-chat.min.js"></script>
3<script>
4 FastCommentsImageChat(document.getElementById('product-image'), {
5 tenantId: 'demo',
6 urlId: 'product-v2-main-image'
7 });
8</script>
9

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

דוגמה עם מצב כהה

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

Image Chat עם מצב כהה
Copy CopyRun External Link
1
2<script src="https://cdn.fastcomments.com/js/embed-image-chat.min.js"></script>
3<script>
4 FastCommentsImageChat(document.getElementById('product-image'), {
5 tenantId: 'demo',
6 hasDarkBackground: true
7 });
8</script>
9

דוגמה עם גודל ריבוע מותאם

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

Image Chat עם גודל ריבוע מותאם
Copy CopyRun External Link
1
2<!DOCTYPE html>
3<html>
4<head>
5 <title>Image Chat with Custom Square Size</title>
6</head>
7<body>
8 <img id="product-image" src="https://fastcomments.com/images/image-chat-demo-1.jpg" alt="Product Photo" />
9
10 <script src="https://cdn.fastcomments.com/js/embed-image-chat.min.js"></script>
11 <script>
12 FastCommentsImageChat(document.getElementById('product-image'), {
13 tenantId: 'demo',
14 chatSquarePercentage: 2, // ריבועים קטנים יותר (ברירת מחדל היא 5)
15 });
16 </script>
17</body>
18</html>
19

דוגמה עם קריאת חזרה לספירת תגובות

עקוב מתי תגובות נוספות או מתעדכנות באמצעות הקריאה חזרה commentCountUpdated:

Image Chat עם קריאת חזרה לספירת תגובות
Copy Copy
1
2<script src="https://cdn.fastcomments.com/js/embed-image-chat.min.js"></script>
3<script>
4 FastCommentsImageChat(document.getElementById('product-image'), {
5 tenantId: 'demo',
6 commentCountUpdated: function(count) {
7 console.log('Total comments:', count);
8 document.getElementById('comment-badge').textContent = count;
9 }
10 });
11</script>
12

דוגמה עם תמונות מרובות

אתה יכול לאתחל את Image Chat על מספר תמונות. לכל תמונה יהיו נקודות דיון עצמאיות משלה:

Image Chat על תמונות מרובות
Copy CopyRun External Link
1
2<img id="image-1" src="https://fastcomments.com/images/image-chat-demo-1.jpg" alt="Photo 1" />
3<img id="image-2" src="https://fastcomments.com/images/image-chat-demo-1.jpg" alt="Photo 2" />
4
5<script src="https://cdn.fastcomments.com/js/embed-image-chat.min.js"></script>
6<script>
7 // אתחול על התמונה הראשונה
8 FastCommentsImageChat(document.getElementById('image-1'), {
9 tenantId: 'demo',
10 urlId: 'gallery-photo-1'
11 });
12
13 // אתחול על התמונה השנייה
14 FastCommentsImageChat(document.getElementById('image-2'), {
15 tenantId: 'demo',
16 urlId: 'gallery-photo-2'
17 });
18</script>
19

אפשרויות תצורה Internal Link

סקירה כללית

FastComments Image Chat מרחיב את ווידג'ט התגובות הרגיל של FastComments, ולכן הוא יורש את כל אפשרויות ההגדרה של הווידג'ט הבסיסי תוך הוספת מספר אפשרויות ייחודיות להערות על תמונות.

הגדרות נדרשות

tenantId

נדרש מזהה ה-Tenant שלך ב-FastComments. תוכל למצוא אותו ב-לוח הבקרה של FastComments.

FastCommentsImageChat(imageElement, {
    tenantId: 'demo'
});

אפשרויות ייחודיות ל-Image Chat

urlId

כברירת מחדל, Image Chat מייצר מזהה ייחודי לכל שיחה על בסיס כתובת ה-URL של הדף, מקור התמונה וקואורדינטות ה-X/Y. תוכל לדרוס זאת עם urlId מותאם אישית.

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    urlId: 'my-custom-image-id'
});

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

chatSquarePercentage

שולט בגודל סמני הצ'אט הלחיצים כאחוז מרוחב התמונה. ברירת המחדל היא 5%, כלומר כל סמן הוא 5% מרוחב התמונה.

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    chatSquarePercentage: 8  // סמנים גדולים ובולטים יותר
});

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

hasDarkBackground

הפעלת עיצוב מצב כהה כאשר לדף שלך יש רקע כהה.

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    hasDarkBackground: true
});

commentCountUpdated

פונקציית callback שמופעלת בכל פעם שמספר התגובות משתנה. זה שימושי לעדכון רכיבי ממשק משתמש כמו תגיות (badges) או כותרות דף.

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    commentCountUpdated: function(count) {
        console.log('Total comments:', count);
        document.getElementById('badge').textContent = count;
    }
});

אפשרויות הגדרה שהתקבלו בירושה

מכיוון ש-Image Chat מרחיב את ווידג'ט התגובות הרגיל, תוכל להשתמש בכל אפשרות הגדרה מהווידג'ט הבסיסי של FastComments. הנה כמה אפשרויות בשימוש נפוץ:

locale

הגדרת שפת ממשק הווידג'ט. FastComments תומך בעשרות שפות.

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    locale: 'es'  // ספרדית
});

readonly

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

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    readonly: true
});

sso ו-simpleSSO

שילוב עם מערכת האימות שלך באמצעות Single Sign-On.

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    sso: {
        // הגדרות SSO
    }
});

ראה את תיעוד ה-SSO לפרטים מלאים על אפשרויות האימות.

maxReplyDepth

שליטה בעומק התגובות המקוננות. כברירת מחדל, Image Chat מגדיר זאת ל-0, כלומר כל התגובות שטוחות (ללא תגובות מקוננות). תוכל לשנות זאת אם ברצונך בשיחות משורשרות.

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    maxReplyDepth: 3  // אפשר 3 רמות של קינון
});

הגדרות פנימיות

אפשרויות אלו מוגדרות אוטומטית על ידי Image Chat ואין לדרוס אותן:

ה-productId מוגדר אוטומטית ל-2 עבור Image Chat. ההרחבה floating-chat נטענת אוטומטית כדי לספק את פונקציונליות חלון הצ'אט. הווידג'ט מזהה אוטומטית מכשירים ניידים (מסכים ברוחב פחות מ-768px) ומתאים את ממשק המשתמש בהתאם עם חלונות צ'אט במסך מלא.

גמישות רכיב היעד

הפרמטר הראשון של FastCommentsImageChat יכול להיות רכיב <img> ישירות או רכיב מכל המכיל תמונה:

// רכיב תמונה ישיר
FastCommentsImageChat(document.getElementById('my-image'), config);

// מכל עם תמונה בפנים
FastCommentsImageChat(document.querySelector('.image-wrapper'), config);

הווידג'ט ימצא את התמונה אוטומטית אם תעביר רכיב מכל.

דוגמה מלאה

הנה דוגמה המציגה מספר אפשרויות הגדרה יחד:

FastCommentsImageChat(document.getElementById('product-image'), {
    tenantId: 'demo',
    urlId: 'product-v2-main',
    chatSquarePercentage: 6,
    hasDarkBackground: false,
    locale: 'en',
    commentCountUpdated: function(count) {
        document.title = count > 0 ? `(${count}) Product Photo` : 'Product Photo';
    },
    sso: {
        // הגדרות ה-SSO שלך
    },
    maxReplyDepth: 1
});

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

עיצוב רספונסיבי Internal Link

מיקום מבוסס אחוזים

Image Chat משתמש בקואורדינטות מבוססות אחוזים במקום בקואורדינטות פיקסל כדי למקם את הסימונים של הצ'אט על תמונות. כאשר משתמש לוחץ על תמונה, הווידג'ט ממיר את קואורדינטות הפיקסל של הלחיצה לאחוזים מתוך רוחב וגובה התמונה. גישה זו מבטיחה שהסימונים יישארו במיקום הנכון ללא תלות באופן הצגת התמונה.

לדוגמה, אם משתמש לוחץ במרחק 250 פיקסלים מקצה שמאל של תמונה ברוחב 1000px, הווידג'ט מאחסן זאת כ-25% מהשמאל. כאשר משתמש אחר צופה באותה תמונה ברוחב 500px במכשיר נייד, הסימון יופיע במרחק 125 פיקסלים מהשמאל, שהוא עדיין 25% מהרוחב.

יתרונות לפריסות רספונסיביות

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

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

התאמת גודל התמונה ויחס הגובה-רוחב

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

אם תיישם CSS שמעוות את יחס הגובה-רוחב של התמונה (כמו שימוש ב-object-fit: cover עם מידות ספציפיות), מיקומי הסימונים עלולים לא להיות מיושרים נכון. לתוצאות הטובות ביותר אפשר לאפשר לתמונות לשנות גודל באופן טבעי או להשתמש ב-object-fit: contain כדי לשמור על יחס הגובה-רוחב.

גודל ריבוע הצ'אט

הגודל הוויזואלי של הסימונים גם הוא מבוסס אחוזים. אפשרות התצורה chatSquarePercentage ברירת המחדל היא 5%, כלומר כל ריבוע הוא 5% מרוחב התמונה. זה מבטיח משקל ויזואלי עקבי על פני גדלי תמונה שונים.

על תמונה ברוחב 1000px עם ההגדרה ברירת המחדל של 5%, הסימונים הם בגודל 50px על 50px. על תמונה ברוחב 500px, אותם סימונים הם בגודל 25px על 25px. הם נשארים פרופורציונליים לגודל התמונה.

התנהגות במובייל

על מסכים ברוחב של פחות מ-768px, Image Chat עובר לפריסת מובייל מותאמת. חלונות הצ'אט נפתחים במסך מלא במקום לצוף לצד הסימון. זה מספק נוחות שימוש טובה יותר על מסכים קטנים שבהם חלונות צפים עלולים להסתיר יותר מדי מהתמונה.

הסימונים עצמם נשארים נראים ולחיצים במיקומיהם המבוססים על אחוזים. משתמשים עדיין יכולים לראות היכן ממוקמות כל הדיונים וללחוץ על הסימונים כדי לפתוח את ממשק הצ'אט במסך מלא.

טעינת תמונות דינמית

מערכת האחוזים עובדת נכון גם כאשר תמונות נטענות באופן אסינכרוני או משתנות בגודל לאחר טעינת הדף. הווידג'ט עוקב אחרי אלמנט התמונה ומחשב מחדש את מיקומי הסימונים בכל פעם שמידות התמונה משתנות.

אם אתה טוען תמונות בעצלנות (lazy-loading) או מיישם תמונות רספונסיביות עם מידות שונות בנקודות שבירה שונות, הסימונים יתאימו את עצמם אוטומטית כאשר גודל התמונה ישתנה.

עקיבות בין מכשירים

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

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

שיקולי חלון התצוגה

הווידג'ט מחשב את האחוזים יחסית לאלמנט התמונה עצמו, לא ל-viewport. משמעות הדבר היא שגלילה בדף או שינוי בגודל חלון הדפדפן לא משפיעים על מיקומי הסימונים. הסימונים נשארים מעוגנים למקומותיהם על התמונה ללא תלות בשינויים ב-viewport.

הכנת התוכן לעתיד

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

התאמה אישית Internal Link

תמיכה במצב כהה

Image Chat כוללת תמיכה מובנית במצב כהה. כאשר אתה מגדיר את hasDarkBackground: true בקונפיגורציה שלך, חלונות הצ'אט והאלמנטים בממשק מסתנכרנים אוטומטית כדי לעבוד היטב על רקעים כהים.

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    hasDarkBackground: true
});

עיצוב המצב הכהה חל על חלונות הצ'אט, ריבועי הסמן, וכל האלמנטים האינטראקטיביים. אם באתר שלך יש מתג מצב כהה, ניתן לאתחל מחדש את הווידג'ט כשהמצב משתנה, או להשתמש בשיטת מחלקת ה-body המתוארת למטה.

מצב כהה דינמי

אם מצב כהה באתר שלך נשלט על ידי הוספת המחלקה .dark לאלמנט ה-body, ממשק Image Chat יתחשב בכך אוטומטית ללא צורך באתחול מחדש. העיצובים של הווידג'ט מעוצבים להגיב לנוכחות מחלקה זו.

/* CSS של מצב כהה שלך */
body.dark {
    background: #1a1a1a;
    color: #ffffff;
}

עיצוב מותאם אישית עם CSS

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

ריבועי הצ'אט והחלונות משתמשים במערכת העיצוב של בועות ההערות של FastComments, כך שכל התאמות שביצעת בווידג'ט ההערות הסטנדרטי ישפיעו גם על Image Chat.

גודל ריבוע הצ'אט

האופציה chatSquarePercentage שולטת בגודל הסמנים הניתנים ללחיצה. ברירת המחדל היא 5% מרוחב התמונה:

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    chatSquarePercentage: 7  // ריבועים גדולים וברורים יותר
});

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

התנהגות בנייד

על מסכים ברוחב מתחת ל-768px, Image Chat עוברת אוטומטית לממשק מותאם לנייד. חלונות הצ'אט מופיעים במסך מלא במקום לצוף לצד הסמנים, מה שמשפר את השימושיות על מסכים קטנים.

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

מראה חלון הצ'אט

חלונות הצ'אט ברוחב 300px בדסקטופ עם חץ באורך 16px שמצביע אל הסמן. החלונות מתמקמים אוטומטית בהתבסס על מרווח הזמין ב-viewport, באמצעות מחלקות מיקום כמו to-right, to-left, to-top, ו-to-bottom.

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

אתחול עצלני

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

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

לוקליזציה

Image Chat תומך באותן אפשרויות לוקליזציה כמו הווידג'ט הסטנדרטי של FastComments. הגדר את האפשרות locale כדי להציג טקסט בממשק בשפות שונות:

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    locale: 'fr'  // צרפתית
});

FastComments תומך בעשרות שפות. הגדרת ה-locale משפיעה על כל טקסט בממשק המשתמש, כולל הודעות, כפתורים וטקסט מחליף.

אפשרויות התאמה אישית שהווידג'ט יורש מהווידג'ט הבסיסי

מאחר ש-Image Chat מרחיב את הווידג'ט ההערות הסטנדרטי, הוא יורש את כל אפשרויות ההתאמה האישית של הווידג'ט הבסיסי. זה כולל מחלקות CSS מותאמות, תרגומים מותאמים, התאמת אביגר (avatar), עיצוב תאריכים ועוד.

עיין בתיעוד הראשי של FastComments עבור הרשימה המלאה של אפשרויות ההתאמה האישית הזמינות.

עבודה עם פונטים מותאמים

אם האתר שלך משתמש בפונטים מותאמים, ממשק Image Chat יירש את הפונטים האלה מתוך ה-CSS של הדף שלך. חלונות הצ'אט מתרשמים בתוך ה-DOM של הדף ומכבדים את הגדרות הטיפוגרפיה הקיימות שלך.

להשגת תוצאה מיטבית, ודא שהפונטים המותאמים שלך נטענים לפני אתחול Image Chat, או קבל את האפשרות שתהיה הבהוב קצר של טקסט ללא עיצוב בזמן טעינת הפונטים.

עיצוב חזותי של הסמנים

הסמנים הריבועיים מעוצבים בעדינות כדי שיהיו בולטים מבלי להציף את התמונה. ניתן להתאים את המראה שלהם באמצעות CSS אם תרצה טיפול ויזואלי שונה.

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

סנכרון בזמן אמת Internal Link

עדכונים בזמן אמת

Image Chat משתמש בחיבורים של WebSocket כדי לסנכרן את כל השיחות בזמן אמת בין כל המשתמשים המחוברים. כאשר מישהו יוצר סמן חדש, מוסיף תגובה או מוחק דיון, כל המשתמשים האחרים הצופים באותה תמונה רואים את העדכון מיידית ללא ריענון.

כיצד סנכרון WebSocket עובד

כאשר אתה מאתחל את Image Chat, הווידג'ט פותח חיבור WebSocket לשרתי FastComments. חיבור זה נשאר פתוח למשך כל משך הסשן של המשתמש ומאזין לעדכונים הקשורים לתמונה הנוכחית.

מערכת ה-WebSocket משתמשת בשלושה סוגי הודעות שידור עבור Image Chat. האירוע new-image-chat מופעל כאשר מישהו יוצר סמן חדש על התמונה. האירוע image-chat-updated מופעל כאשר מישהו מעדכן שיחה קיימת. האירוע deleted-image-chat מופעל כאשר מישהו מוחק סמן.

מערכת מזהה השידור

כדי למנוע אפקט הדי (echo) שבו משתמשים רואים את הפעולות שלהם משודרות בחזרה אליהם, כל עדכון כולל broadcastId ייחודי. כאשר משתמש יוצר או מעדכן סמן, הלקוח שלו מייצר UUID עבור אותו פעולה. כאשר ה-WebSocket משדר את העדכון בחזרה לכל הלקוחות, הלקוח שיצר את הפעולה מתעלם מהעדכון כי הוא תואם את ה-broadcastId שלו.

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

עמידות החיבור

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

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

שיקולי רוחב פס

הודעות WebSocket קלות במשקל ומכילות רק את המידע ההכרחי לסנכרון מצב. יצירת סמן חדש בדרך כלל משתמשת בפחות מ-1KB של רוחב פס. המערכת כוללת גם אצירת הודעות חכמה כדי להפחית את תדירות ההודעות בתקופות פעילות גבוהה.

מדדי השימוש בלוח המחוונים של FastComments עוקבים אחרי pubSubMessageCount ו-pubSubBandwidth כדי שתוכל לפקח על פעילות הסנכרון בזמן אמת באתריך.

סנכרון בין לשוניות

אם למשתמש יש את אותה דף פתוח בכמה לשוניות דפדפן, עדכונים בלשונית אחת מופיעים מיד בלשוניות האחרות. זה פועל באמצעות אותו מנגנון סנכרון WebSocket ואינו דורש תצורה נוספת.

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

אבטחה

הודעות WebSocket מועברות דרך חיבורים מאובטחים (WSS) וכוללות אימות טננט כדי להבטיח שמשתמשים מקבלים רק עדכונים עבור שיחות שהם מורשים לצפות בהן. השרת מאמת את כל הפעולות לפני שהוא משדר אותן כדי למנוע גישה או מניפולציה לא מורשית.

התנהגות במצב לא מקוון

כאשר משתמשים במצב לא מקוון לחלוטין, הם עדיין יכולים לצפות בסמנים קיימים אך אינם יכולים ליצור חדשים או לראות עדכונים מאחרים. הווידג'ט מזהה את מצב האוף‌ליין ומציג הודעה מתאימה.

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

השפעה על ביצועים

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

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

מקרי שימוש שיתופיים

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

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

תיעוד ה-API Internal Link

סקירת ה-API

Image Chat מספק שלושה נקודות קצה (endpoints) של REST API לניהול שיחות תמונה באופן תוכנתי. נקודות קצה אלו מאפשרות לך לאחזר, ליצור ולמחוק שיחות מבלי להשתמש בווידג'ט הדפדפן.

כל נקודות הקצה של ה-API דורשות אימות ופועלות לפי התבניות הסטנדרטיות של FastComments API. אלו נקודות קצה ציבוריות שמאומתות באמצעות עוגיות דפדפן, ולא באמצעות מפתחות API.

כתובת בסיס (Base URL)

כל נקודות הקצה של Image Chat API נמצאות תחת:

https://fastcomments.com/comment-image-chats

אימות

נקודות קצה אלו מאמתות משתמשים באמצעות עוגיות דפדפן. הן אינן משתמשות במפתחות API. על המשתמשים להיות מחוברים ל-FastComments בדפדפן שלהם כדי לגשת לנקודות קצה אלו.

קבלת כל השיחות

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

נקודת קצה

GET /comment-image-chats/:tenantId?urlId=<urlId>

פרמטרים

tenantId (פרמטר נתיב, נדרש) הוא מזהה ה-Tenant שלך ב-FastComments.

urlId (פרמטר שאילתה, נדרש) הוא מזהה התמונה שעבורה ברצונך לאחזר שיחות.

תגובה

התגובה כוללת את סטטוס ה-API, מידע על סשן המשתמש הנוכחי אם האימות בוצע, מערך של שיחות עם המזהים, ה-URLs וקואורדינטות ה-X/Y שלהן, מזהה URL מנוקה, דגל המציין אם המשתמש הנוכחי הוא מנהל אתר או מנחה, ופרטי חיבור WebSocket לסנכרון חי כולל tenantIdWS, urlIdWS ו-userIdWS.

דוגמת בקשה

curl "https://fastcomments.com/comment-image-chats/demo?urlId=my-product-image" \
  --cookie "your-session-cookie"

דוגמת תגובה

{
  "status": "success",
  "user": {
    "id": "user123",
    "username": "john_doe"
  },
  "conversations": [
    {
      "_id": "conv123",
      "urlId": "my-product-image:/images/product.jpg:25:30",
      "x": 25.5,
      "y": 30.2
    },
    {
      "_id": "conv456",
      "urlId": "my-product-image:/images/product.jpg:60:45",
      "x": 60.8,
      "y": 45.1
    }
  ],
  "urlIdClean": "my-product-image",
  "isSiteAdmin": false,
  "tenantIdWS": "demo",
  "urlIdWS": "my-product-image",
  "userIdWS": "user123"
}

יצירת שיחה

צור שיחת תמונה חדשה עבור מיקום ספציפי בתמונה.

נקודת קצה

POST /comment-image-chats/:tenantId

פרמטרים

tenantId (פרמטר נתיב, נדרש) הוא מזהה ה-Tenant שלך ב-FastComments.

גוף הבקשה חייב להיות JSON ולכלול את השדות הנדרשים הבאים.

urlId (מחרוזת, נדרש) הוא מזהה העמוד הבסיסי.

windowUrlId (מחרוזת, נדרש) הוא ה-URL המשולב עם מקור התמונה והקואורדינטות, לדוגמה my-page:/images/photo.jpg:25.5:30.2.

pageTitle (מחרוזת, נדרש) הוא כותרת העמוד.

src (מחרוזת, נדרש) הוא כתובת ה-URL של מקור התמונה.

x (מספר, נדרש) הוא קואורדינטת ה-X כאחוז (0-100).

y (מספר, נדרש) הוא קואורדינטת ה-Y כאחוז (0-100).

createdFromCommentId (מחרוזת, נדרש) הוא המזהה של התגובה שיזמה את השיחה הזו.

broadcastId (מחרוזת, נדרש) הוא UUID לסנכרון חי למניעת אפקטי הדהוד.

תגובה

התגובה כוללת את סטטוס ה-API ואת המזהה של השיחה החדשה שנוצרה.

דוגמת בקשה

curl -X POST "https://fastcomments.com/comment-image-chats/demo" \
  --cookie "your-session-cookie" \
  -H "Content-Type: application/json" \
  -d '{
    "urlId": "my-product-image",
    "windowUrlId": "my-product-image:/images/product.jpg:25.5:30.2",
    "pageTitle": "Product Gallery",
    "src": "/images/product.jpg",
    "x": 25.5,
    "y": 30.2,
    "createdFromCommentId": "comment789",
    "broadcastId": "550e8400-e29b-41d4-a716-446655440000"
  }'

דוגמת תגובה

{
  "status": "success",
  "createdChatId": "conv789"
}

מחיקת שיחה

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

נקודת קצה

DELETE /comment-image-chats/:tenantId/:chatId

פרמטרים

tenantId (פרמטר נתיב, נדרש) הוא מזהה ה-Tenant שלך ב-FastComments.

chatId (פרמטר נתיב, נדרש) הוא המזהה של השיחה שיש למחוק.

broadcastId (גוף הבקשה, נדרש) הוא UUID לסנכרון חי.

דוגמת בקשה

curl -X DELETE "https://fastcomments.com/comment-image-chats/demo/conv789" \
  --cookie "your-session-cookie" \
  -H "Content-Type: application/json" \
  -d '{
    "broadcastId": "550e8400-e29b-41d4-a716-446655440001"
  }'

דוגמת תגובה

{
  "status": "success"
}

מערכת הקואורדינטות

קואורדינטות ה-X וה-Y נשמרות כאחוזים מממדי התמונה. X מייצג את המיקום האופקי מהקצה השמאלי (0 = הקצה השמאלי, 100 = הקצה הימני). Y מייצג את המיקום האנכי מהקצה העליון (0 = הקצה העליון, 100 = הקצה התחתון).

ערכי האחוזים יכולים לכלול מספרים עשרוניים לדיוק. לדוגמה, x: 25.5 פירושו 25.5% מהקצה השמאלי של התמונה.

הגבלת קצב (Rate Limiting)

נקודות קצה אלו כפופות להגבלת הקצב הסטנדרטית של FastComments API. תוכנת הביניים (middleware) להגבלת קצב חלה פר-Tenant כדי למנוע שימוש לרעה תוך מתן אפשרות לדפוסי שימוש רגילים.

תגובות שגיאה

כל נקודות הקצה מחזירות קודי סטטוס HTTP סטנדרטיים. תגובה 400 מציינת פרמטרי בקשה לא תקינים. תגובה 401 פירושה שהאימות נכשל. תגובה 403 מציינת הרשאות לא מספיקות. תגובה 404 פירושה שהשיחה לא נמצאה. תגובה 429 מציינת שמגבלת הקצב חורגה.

תגובות שגיאה כוללות גוף JSON עם פרטים:

{
  "status": "error",
  "message": "Conversation not found"
}

מעקב שימוש

יצירת שיחות מגדילה את מדד השימוש conversationCreateCount שלך. כל פעילות סנכרון WebSocket מגדילה את pubSubMessageCount ו-pubSubBandwidth. באפשרותך לעקוב אחר מדדים אלו בלוח הבקרה של FastComments שלך תחת ניתוחי שימוש.

יש שאלות?

זה הכול לגבי FastComments Image Chat! אם יש לכם שאלות, אתם זקוקים לעזרה ביישום, או יש לכם הצעות לתכונות, אנא הודיעו לנו למטה או פנו לצוות התמיכה שלנו.

צפו בדמו החי בעמוד הדמו שלנו כדי לראות את Image Chat בפעולה.

תרום למדריך זה