Image Chat | FastComments Docs

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

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

התחלה

מקרי שימוש

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

התחלה מהירה

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

התקנה

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

טעינת סקריפט Image Chat

Copy

<script src="https://cdn.fastcomments.com/js/embed-image-chat.min.js"></script>

יישום בסיסי

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

יישום בסיסי של Image Chat

Copy

Run

<!DOCTYPE html>
<html>
<head>
    <title>My Image Gallery with Image Chat</title>
</head>
<body>
    <!-- התמונה שלך -->
    <img id="my-image" src="https://fastcomments.com/images/image-chat-demo-1.jpg" alt="Pretty Trail" />
    <!-- טען את סקריפט Image Chat -->
    <script src="https://cdn.fastcomments.com/js/embed-image-chat.min.js"></script>
    <!-- אתחל את Image Chat -->
    <script>
        FastCommentsImageChat(document.getElementById('my-image'), {
            tenantId: 'demo'
        });
    </script>
</body>
</html>

Replace 'demo' with your actual FastComments Tenant ID if it's not already, which you can find in your FastComments dashboard.

איך זה עובד

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

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

הדגמה חיה

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

הצעדים הבאים

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

ספריות צד לקוח

כל ספריות הפרונטאנד של FastComments (react, vue, angular, וכו') כוללות את Image Chat.

דוגמאות

דוגמה בסיסית

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

דוגמה בסיסית ל-Image Chat

Copy

Run

<!DOCTYPE html>
<html>
<head>
    <title>Product Image with Chat</title>
</head>
<body>
    <img id="product-image" src="https://fastcomments.com/images/image-chat-demo-1.jpg" alt="Product Photo" />
    <script src="https://cdn.fastcomments.com/js/embed-image-chat.min.js"></script>
    <script>
        FastCommentsImageChat(document.getElementById('product-image'), {
            tenantId: 'demo'
        });
    </script>
</body>
</html>

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

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

Image Chat עם אלמנט מכולה

Copy

Run

<div id="image-container">
    <img src="https://fastcomments.com/images/image-chat-demo-1.jpg" alt="System Diagram" />
</div>
<script src="https://cdn.fastcomments.com/js/embed-image-chat.min.js"></script>
<script>
    FastCommentsImageChat(document.getElementById('image-container'), {
        tenantId: 'demo'
    });
</script>

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

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

Image Chat עם מזהה URL מותאם אישית

Copy

Run

<script src="https://cdn.fastcomments.com/js/embed-image-chat.min.js"></script>
<script>
    FastCommentsImageChat(document.getElementById('product-image'), {
        tenantId: 'demo',
        urlId: 'product-v2-main-image'
    });
</script>

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

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

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

Image Chat עם מצב כהה

Copy

Run

<script src="https://cdn.fastcomments.com/js/embed-image-chat.min.js"></script>
<script>
    FastCommentsImageChat(document.getElementById('product-image'), {
        tenantId: 'demo',
        hasDarkBackground: true
    });
</script>

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

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

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

Copy

Run

<!DOCTYPE html>
<html>
<head>
    <title>Image Chat with Custom Square Size</title>
</head>
<body>
    <img id="product-image" src="https://fastcomments.com/images/image-chat-demo-1.jpg" alt="Product Photo" />
    <script src="https://cdn.fastcomments.com/js/embed-image-chat.min.js"></script>
    <script>
        FastCommentsImageChat(document.getElementById('product-image'), {
            tenantId: 'demo',
            chatSquarePercentage: 2, // ריבועים קטנים יותר (ברירת מחדל היא 5)
        });
    </script>
</body>
</html>

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

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

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

Copy

<script src="https://cdn.fastcomments.com/js/embed-image-chat.min.js"></script>
<script>
    FastCommentsImageChat(document.getElementById('product-image'), {
        tenantId: 'demo',
        commentCountUpdated: function(count) {
            console.log('Total comments:', count);
            document.getElementById('comment-badge').textContent = count;
        }
    });
</script>

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

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

Image Chat על תמונות מרובות

Copy

Run

<img id="image-1" src="https://fastcomments.com/images/image-chat-demo-1.jpg" alt="Photo 1" />
<img id="image-2" src="https://fastcomments.com/images/image-chat-demo-1.jpg" alt="Photo 2" />
<script src="https://cdn.fastcomments.com/js/embed-image-chat.min.js"></script>
<script>
    // אתחול על התמונה הראשונה
    FastCommentsImageChat(document.getElementById('image-1'), {
        tenantId: 'demo',
        urlId: 'gallery-photo-1'
    });
    // אתחול על התמונה השנייה
    FastCommentsImageChat(document.getElementById('image-2'), {
        tenantId: 'demo',
        urlId: 'gallery-photo-2'
    });
</script>

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

Overview

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

Required Configuration

tenantId

נדרש ה-Tenant ID של FastComments שלך. ניתן למצוא זאת ב-FastComments dashboard.

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

Image Chat Specific Options

urlId

ברירת המחדל, Image Chat מייצר מזהה ייחודי לכל שיחה בהתבסס על כתובת הדף, מקור התמונה וקואורדינטות 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 שמתבצעת בכל פעם שמספר ההערות משתנה. זה שימושי לעדכון אלמנטים בממשק המשתמש כמו סמלונים או כותרות דפים.

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

Inherited Configuration Options

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

locale

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

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

readonly

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

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

sso and simpleSSO

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

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

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

maxReplyDepth

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

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

Internal Configuration

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

The productId is automatically set to 2 for Image Chat. The floating-chat extension is automatically loaded to provide the chat window functionality. The widget automatically detects mobile devices (screens under 768px wide) and adjusts the UI accordingly with fullscreen chat windows.

Target Element Flexibility

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

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

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

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

Complete Example

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

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

For a complete list of all available configuration options inherited from the base widget, see the main FastComments configuration documentation.

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

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

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.

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

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

התאמה אישית

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

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 אם תרצה טיפול ויזואלי שונה.

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

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

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

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

API Overview

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

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

Base URL

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

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

Authentication

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

Get All Conversations

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

Endpoint

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

Parameters

tenantId (path parameter, required) הוא מזהה ה-Tenant של FastComments שלך.

urlId (query parameter, required) הוא מזהה התמונה עבורה ברצונך לשלוף שיחות.

Response

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

Example Request

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

Example Response

{
  "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"
}

Create Conversation

צור שיחת תמונה חדשה לנקודה מסוימת בתמונה.

Endpoint

POST /comment-image-chats/:tenantId

Parameters

tenantId (path parameter, required) הוא מזהה ה-Tenant של FastComments שלך.

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

urlId (string, required) הוא מזהה הדף הבסיסי.

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

pageTitle (string, required) הוא הכותרת של הדף.

src (string, required) הוא כתובת המקור של התמונה.

x (number, required) הוא קואורדינטת X כאחוז (0-100).

y (number, required) הוא קואורדינטת Y כאחוז (0-100).

createdFromCommentId (string, required) הוא המזהה של ההערה שהחלה את השיחה הזו.

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

Response

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

Example Request

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"
  }'

Example Response

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

Delete Conversation

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

Endpoint

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

Parameters

tenantId (path parameter, required) הוא מזהה ה-Tenant של FastComments שלך.

chatId (path parameter, required) הוא המזהה של השיחה שברצונך למחוק.

broadcastId (request body, required) הוא UUID לשם סינכרון חי.

Example Request

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"
  }'

Example Response

{
  "status": "success"
}

Coordinate System

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

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

Rate Limiting

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

Error Responses

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

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

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

Usage Tracking

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

יש לך שאלות?

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

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

שפה 🇮🇱 עברית

התחלה

תצורה

התאמה אישית

מתקדם

התחלה

מקרי שימוש

התחלה מהירה

התקנה

יישום בסיסי

איך זה עובד

הדגמה חיה

הצעדים הבאים

ספריות צד לקוח

דוגמאות

דוגמה בסיסית

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

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

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

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

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

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

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

Overview

Required Configuration

tenantId

Image Chat Specific Options

urlId

chatSquarePercentage

hasDarkBackground

commentCountUpdated

Inherited Configuration Options

locale

readonly

sso and simpleSSO

maxReplyDepth

Internal Configuration

Target Element Flexibility

Complete Example

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

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

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

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

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

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

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

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

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

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

התאמה אישית

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

מצב כהה דינמי

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

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

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

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

אתחול עצלני

לוקליזציה

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

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

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

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

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

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

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

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

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

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

אבטחה

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

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

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

תיעוד ה-API

API Overview

Base URL

Authentication

Get All Conversations

Endpoint

Parameters

Response