FastComments Image Chat επιτρέπει διαδραστικές συζητήσεις πάνω σε εικόνες επιτρέποντας στους χρήστες να κάνουν κλικ οπουδήποτε πάνω σε μια εικόνα για να δημιουργήσουν σημεία συζήτησης. Οι χρήστες μπορούν να κάνουν κλικ σε συγκεκριμένα μέρη των εικόνων για να ξεκινήσουν συνομιλίες σχετικά με εκείνες τις περιοχές, δημιουργώντας οπτικούς δείκτες που δείχνουν πού βρίσκονται οι συζητήσεις.
Αυτή η λειτουργία είναι ιδανική για ανατροφοδότηση σχεδιασμού, αξιολογήσεις προϊόντων, εκπαιδευτικό υλικό με διαγράμματα, γκαλερί φωτογραφιών με σχόλια και οποιοδήποτε σενάριο όπου θέλετε συζητήσεις με συμφραζόμενο που είναι αγκυρωμένες σε συγκεκριμένες περιοχές της εικόνας.
Ξεκινώντας 
Περιπτώσεις Χρήσης
Το Image Chat λειτουργεί εξαιρετικά για ανατροφοδότηση σχεδίασης όπου οι ομάδες χρειάζονται να συζητήσουν συγκεκριμένα στοιχεία σε μακέτες ή στιγμιότυπα οθόνης. Ιστότοποι αξιολογήσεων προϊόντων μπορούν να επιτρέψουν στους πελάτες να συζητούν συγκεκριμένα χαρακτηριστικά που φαίνονται σε φωτογραφίες προϊόντων. Εκπαιδευτικές πλατφόρμες μπορούν να το χρησιμοποιήσουν για συζητήσεις διαγραμμάτων, χαρτών ή επιστημονικών εικόνων. Οι συλλογές φωτογραφιών μπορούν να γίνουν διαδραστικές με σχόλια σε συγκεκριμένες περιοχές. Ιστότοποι ακινήτων μπορούν να επιτρέψουν στους θεατές να συζητούν συγκεκριμένα χαρακτηριστικά που φαίνονται σε φωτογραφίες ακινήτων.
Γρήγορη Εκκίνηση
Η έναρξη με το Image Chat είναι απλή. Χρειάζεστε το script του FastComments Image Chat, ένα στοιχείο εικόνας ή κοντέινερ με μια εικόνα, και ένα αντικείμενο διαμόρφωσης με το Tenant ID σας.
Εγκατάσταση
Προσθέστε το script του Image Chat στη σελίδα σας:
Βασική Εφαρμογή
Ορίστε ένα ελάχιστο παράδειγμα:
Run 
Αντικαταστήστε το 'demo' με το πραγματικό Tenant ID του FastComments αν δεν είναι ήδη, το οποίο μπορείτε να βρείτε στον Πίνακα Ελέγχου FastComments.
Πώς Λειτουργεί
Μόλις αρχικοποιηθεί, οι χρήστες μπορούν να κάνουν κλικ οπουδήποτε στην εικόνα. Όταν συμβαίνει ένα κλικ, εμφανίζεται ένα οπτικό τετράγωνο δείκτη σε εκείνη τη θέση και ανοίγει ένα παράθυρο συνομιλίας. Άλλοι χρήστες μπορούν να δουν όλους τους δείκτες και να κάνουν κλικ σε αυτούς για να δουν ή να συμμετάσχουν σε αυτές τις συζητήσεις. Όλες οι συζητήσεις συγχρονίζονται σε πραγματικό χρόνο για όλους τους επισκέπτες.
Το widget χρησιμοποιεί τοποθέτηση βάσει ποσοστού, έτσι οι δείκτες παραμένουν στη σωστή θέση ακόμη και όταν η εικόνα αλλάζει μέγεθος ή προβάλλεται σε διαφορετικά μεγέθη οθόνης.
Ζωντανή Επίδειξη
Μπορείτε να δείτε το Image Chat σε δράση στη σελίδα επίδειξης.
Επόμενα Βήματα
Τώρα που έχετε τα βασικά σε λειτουργία, μπορείτε να προσαρμόσετε την εμφάνιση και τη συμπεριφορά στον οδηγό Επιλογών Διαμόρφωσης. Δείτε τον οδηγό Responsive Design για να κατανοήσετε πώς λειτουργεί η τοποθέτηση βάσει ποσοστού. Μάθετε για τη στιλιστική προσαρμογή και την υποστήριξη σκοτεινής λειτουργίας στον οδηγό Προσαρμογής. Για προηγμένες ενσωματώσεις, εξερευνήστε την Αναφορά API.
Βιβλιοθήκες Frontend
Όλες οι βιβλιοθήκες frontend του FastComments (react, vue, angular, κ.λπ.) περιλαμβάνουν το Image Chat.
Παραδείγματα
Βασικό Παράδειγμα
Ο πιο απλός τρόπος για να χρησιμοποιήσετε το Image Chat είναι να στοχεύσετε ένα μόνο στοιχείο εικόνας. Αυτό το παράδειγμα δείχνει πώς να ενεργοποιήσετε διαδραστικές συζητήσεις πάνω σε μια εικόνα:
Run Παράδειγμα με Στοιχείο Περιέκτη
Μπορείτε επίσης να περάσετε ένα στοιχείο περιέκτη που έχει μια εικόνα μέσα του:
Run Παράδειγμα με Προσαρμοσμένο Αναγνωριστικό URL
Από προεπιλογή, το Image Chat χρησιμοποιεί το URL της σελίδας σε συνδυασμό με την πηγή της εικόνας και τις συντεταγμένες για να αναγνωρίζει τις συζητήσεις. Μπορείτε να παρέχετε ένα προσαρμοσμένο urlId:
Run Αυτό είναι χρήσιμο αν η δομή των URL σας αλλάζει αλλά θέλετε να διατηρήσετε τις ίδιες συζητήσεις, ή αν θέλετε να μοιραστείτε τα ίδια σημεία συζήτησης σε πολλές σελίδες.
Παράδειγμα με Σκοτεινή Λειτουργία
Αν ο ιστότοπός σας έχει σκούρο φόντο και το widget δεν το εντοπίζει αυτόματα όπως θα έπρεπε, μπορούμε χειροκίνητα να ενεργοποιήσουμε την υποστήριξη σκοτεινής λειτουργίας:
Run Παράδειγμα με Προσαρμοσμένο Μέγεθος Τετραγώνου Συνομιλίας
Μπορείτε να προσαρμόσετε το μέγεθος των κλικαριστών τετραγώνων που εμφανίζονται στην εικόνα. Το μέγεθος καθορίζεται ως ποσοστό του πλάτους της εικόνας:
Run Παράδειγμα με Callback Αρίθμησης Σχολίων
Παρακολουθήστε πότε προστίθενται ή ενημερώνονται σχόλια χρησιμοποιώντας το callback commentCountUpdated:
Παράδειγμα με Πολλαπλές Εικόνες
Μπορείτε να αρχικοποιήσετε το Image Chat σε πολλές εικόνες. Κάθε εικόνα θα έχει τα δικά της ανεξάρτητα σημεία συζήτησης:
Run Επιλογές Διαμόρφωσης
Overview
Το FastComments Image Chat επεκτείνει το βασικό widget σχολιασμού του FastComments, οπότε κληρονομεί όλες τις επιλογές διαμόρφωσης από το βασικό widget ενώ προσθέτει μερικές ειδικές για τις σημειώσεις πάνω σε εικόνες.
Required Configuration
tenantId
Απαιτείται το Tenant ID του FastComments. Μπορείτε να το βρείτε στον πίνακα ελέγχου του FastComments.
FastCommentsImageChat(imageElement, {
tenantId: 'demo'
});Image Chat Specific Options
urlId
Από προεπιλογή, το Image Chat δημιουργεί ένα μοναδικό αναγνωριστικό για κάθε συνομιλία βασισμένο στο URL της σελίδας, στην πηγή της εικόνας, και στις συντεταγμένες X/Y. Μπορείτε να το αντικαταστήσετε με ένα προσαρμοσμένο urlId.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
urlId: 'my-custom-image-id'
});Αυτό είναι χρήσιμο όταν η δομή των URL σας μπορεί να αλλάξει αλλά θέλετε να διατηρήσετε τις ίδιες συνομιλίες, ή όταν θέλετε να μοιράζεστε τις σημειώσεις ανάμεσα σε πολλαπλές σελίδες.
chatSquarePercentage
Ελέγχει το μέγεθος των σημείων συνομιλίας (clickable chat markers) ως ποσοστό του πλάτους της εικόνας. Η προεπιλογή είναι 5%, που σημαίνει ότι κάθε δείκτης είναι 5% του πλάτους της εικόνας.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
chatSquarePercentage: 8 // Μεγαλύτεροι, πιο εμφανείς δείκτες
});Μικρότερες τιμές δημιουργούν λιγότερο παρεμβατικούς δείκτες που λειτουργούν καλύτερα για λεπτομερείς εικόνες. Μεγαλύτερες τιμές κάνουν τους δείκτες πιο εύκολους στο να τους δει και να τους πατήσει ο χρήστης σε πολυσύχναστες εικόνες ή για χρήστες σε κινητές συσκευές.
hasDarkBackground
Ενεργοποιεί το στυλ dark mode όταν η σελίδα σας έχει σκούρο φόντο.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
hasDarkBackground: true
});commentCountUpdated
Μια συνάρτηση callback που εκτελείται όποτε αλλάζει ο αριθμός σχολίων. Αυτό είναι χρήσιμο για την ενημέρωση στοιχείων UI όπως badges ή τίτλους σελίδας.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
commentCountUpdated: function(count) {
console.log('Total comments:', count);
document.getElementById('badge').textContent = count;
}
});Inherited Configuration Options
Εφόσον το Image Chat επεκτείνει το βασικό widget σχολιασμού, μπορείτε να χρησιμοποιήσετε οποιαδήποτε επιλογή διαμόρφωσης από το βασικό widget του FastComments. Εδώ είναι μερικές κοινά χρησιμοποιούμενες επιλογές:
locale
Ορίστε τη γλώσσα για το UI του widget. Το 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 και δεν πρέπει να αντικαθίστανται:
Το productId ορίζεται αυτόματα σε 2 για το Image Chat. Η επέκταση floating-chat φορτώνεται αυτόματα για να παρέχει τη λειτουργικότητα παραθύρου συνομιλίας. Το widget ανιχνεύει αυτόματα κινητές συσκευές (οθόνες κάτω από 768px πλάτος) και προσαρμόζει το UI ανάλογα με πλήρη οθόνη για τα παράθυρα συνομιλίας.
Target Element Flexibility
Η πρώτη παράμετρος στο FastCommentsImageChat μπορεί να είναι είτε ένα στοιχείο <img> απευθείας είτε ένα κοντέινερ με μια εικόνα μέσα:
// Άμεσο στοιχείο εικόνας
FastCommentsImageChat(document.getElementById('my-image'), config);
// Κοντέινερ με εικόνα μέσα
FastCommentsImageChat(document.querySelector('.image-wrapper'), config);Το widget θα βρει την εικόνα αυτόματα αν περάσετε ένα στοιχείο κοντέινερ.
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
});Για μια πλήρη λίστα όλων των διαθέσιμων επιλογών διαμόρφωσης που κληρονομούνται από το βασικό widget, δείτε την κύρια τεκμηρίωση διαμόρφωσης του FastComments.
Ανταποκρινόμενος Σχεδιασμός
Percentage-Based Positioning
Το Image Chat χρησιμοποιεί συντεταγμένες βασισμένες σε ποσοστά αντί για συντεταγμένες σε pixels για να τοποθετεί τους δείκτες συνομιλίας πάνω στις εικόνες. Όταν ένας χρήστης κάνει κλικ σε μια εικόνα, το widget μετατρέπει τις συντεταγμένες σε pixels του κλικ σε ποσοστά του πλάτους και του ύψους της εικόνας. Αυτή η προσέγγιση εξασφαλίζει ότι οι δείκτες παραμένουν στη σωστή θέση ανεξάρτητα από το πώς εμφανίζεται η εικόνα.
Για παράδειγμα, αν ένας χρήστης κάνει κλικ 250 pixels από το αριστερό άκρο μιας εικόνας πλάτους 1000px, το widget αποθηκεύει αυτό ως 25% από τα αριστερά. Όταν άλλος χρήστης βλέπει την ίδια εικόνα στα 500px πλάτος σε μια κινητή συσκευή, ο δείκτης εμφανίζεται στα 125 pixels από τα αριστερά, που εξακολουθούν να είναι 25% του πλάτους.
Benefits for Responsive Layouts
Αυτό το σύστημα ποσοστών κάνει το Image Chat να λειτουργεί αρμονικά σε όλες τις διαστάσεις και προσανατολισμούς συσκευών. Οι εικόνες σας μπορεί να εμφανίζονται σε διαφορετικά μεγέθη ανάλογα με το πλάτος της οθόνης, τους κανόνες CSS ή τους περιορισμούς του container, αλλά οι δείκτες πάντα ευθυγραμμίζονται σωστά με τις προοριζόμενες θέσεις.
Οι χρήστες σε επιτραπέζιους υπολογιστές με μεγάλες οθόνες βλέπουν τους δείκτες στις ίδιες σχετικές θέσεις με τους χρήστες σε smartphones με μικρές οθόνες. Οι δείκτες κλιμακώνονται αναλογικά μαζί με την ίδια την εικόνα.
Image Scaling and Aspect Ratio
Εφόσον η εικόνα σας διατηρεί την αναλογία διαστάσεων (aspect ratio) κατά την κλιμάκωση (που είναι η προεπιλεγμένη συμπεριφορά των browsers), οι δείκτες βασισμένοι σε ποσοστά θα παραμείνουν τέλεια ευθυγραμμισμένοι. Το widget υποθέτει ότι οι εικόνες κλιμακώνονται αναλογικά και υπολογίζει τις θέσεις βασισμένο σε αυτήν την υπόθεση.
Αν εφαρμόσετε CSS που παραμορφώνει την αναλογία διαστάσεων της εικόνας (όπως η χρήση του object-fit: cover με συγκεκριμένες διαστάσεις), οι θέσεις των δεικτών ενδέχεται να μην ευθυγραμμιστούν σωστά. Για καλύτερα αποτελέσματα, αφήστε τις εικόνες να κλιμακώνονται φυσικά ή χρησιμοποιήστε object-fit: contain για να διατηρήσετε την αναλογία διαστάσεων.
Chat Square Sizing
Το οπτικό μέγεθος των δεικτών συνομιλίας είναι επίσης βασισμένο σε ποσοστά. Η επιλογή διαμόρφωσης chatSquarePercentage έχει προεπιλογή 5%, που σημαίνει ότι κάθε τετράγωνο είναι 5% του πλάτους της εικόνας. Αυτό εξασφαλίζει οπτικό βάρος συνεπές ανάμεσα σε διαφορετικά μεγέθη εικόνων.
Σε μια εικόνα πλάτους 1000px με την προεπιλεγμένη ρύθμιση 5%, οι δείκτες είναι 50px τετράγωνο. Σε μια εικόνα 500px πλάτους, οι ίδιοι δείκτες είναι 25px τετράγωνο. Παραμένουν αναλογικοί στο μέγεθος της εικόνας.
Mobile Behavior
Σε οθόνες κάτω των 768px πλάτος, το Image Chat αλλάζει σε διάταξη βελτιστοποιημένη για κινητά. Τα παράθυρα συνομιλίας ανοίγουν σε πλήρη οθόνη αντί να αιωρούνται δίπλα στον δείκτη. Αυτό παρέχει καλύτερη χρηστικότητα σε μικρές οθόνες όπου τα αιωρούμενα παράθυρα θα έκρυβαν υπερβολικό μέρος της εικόνας.
Οι ίδιοι οι δείκτες παραμένουν ορατοί και κλικαρίσιμοι στις θέσεις τους βασισμένες σε ποσοστά. Οι χρήστες μπορούν ακόμα να βλέπουν πού βρίσκονται όλες οι συζητήσεις και να πατούν τους δείκτες για να ανοίξουν τη διεπαφή συνομιλίας σε πλήρη οθόνη.
Dynamic Image Loading
Το σύστημα βασισμένο σε ποσοστά λειτουργεί σωστά ακόμη και όταν οι εικόνες φορτώνουν ασύγχρονα ή αλλάζουν μέγεθος μετά τη φόρτωση της σελίδας. Το widget παρακολουθεί το στοιχείο της εικόνας και επαναϋπολογίζει τις θέσεις των δεικτών όποτε αλλάζουν οι διαστάσεις της εικόνας.
Αν χρησιμοποιείτε lazy-loading εικόνων ή υλοποιείτε responsive εικόνες με διαφορετικά μεγέθη σε διαφορετικά breakpoints, οι δείκτες προσαρμόζονται αυτόματα όταν αλλάζει το μέγεθος της εικόνας.
Cross-Device Consistency
Επειδή οι συντεταγμένες αποθηκεύονται ως ποσοστά στη βάση δεδομένων, μια συζήτηση που δημιουργήθηκε σε επιτραπέζιο υπολογιστή εμφανίζεται στην ίδια ακριβή σχετική θέση όταν προβληθεί σε tablet ή τηλέφωνο. Οι χρήστες μπορούν να συνεργάζονται μεταξύ συσκευών χωρίς ασυνέπειες στη θέση.
Αυτό λειτουργεί αμφίδρομα. Μια συζήτηση που δημιουργήθηκε πατώντας ένα συγκεκριμένο σημείο σε κινητή συσκευή εμφανίζεται στην ίδια σχετική θέση όταν προβληθεί σε μεγάλη οθόνη επιτραπέζιου υπολογιστή.
Viewport Considerations
Το widget υπολογίζει τα ποσοστά σε σχέση με το ίδιο το στοιχείο της εικόνας, όχι το viewport. Αυτό σημαίνει ότι το scrolling της σελίδας ή η αλλαγή του μεγέθους του παραθύρου του browser δεν επηρεάζει τις θέσεις των δεικτών. Οι δείκτες παραμένουν αγκυροβολημένοι στις θέσεις τους πάνω στην εικόνα ανεξάρτητα από τις αλλαγές του viewport.
Future-Proofing Content
Η προσέγγιση βασισμένη σε ποσοστά κάνει τις συζητήσεις πάνω στις εικόνες πιο ανθεκτικές σε αλλαγές στη διάταξη, το design ή το οικοσύστημα συσκευών. Καθώς προκύπτουν νέα μεγέθη οθονών και συσκευές, οι υπάρχουσες συζητήσεις θα συνεχίσουν να εμφανίζονται σωστά χωρίς να απαιτούνται ενημερώσεις ή μεταφορές.
Προσαρμογή
Υποστήριξη Σκοτεινής Λειτουργίας
Image Chat περιλαμβάνει ενσωματωμένη υποστήριξη για σκοτεινή λειτουργία. Όταν ρυθμίσετε hasDarkBackground: true στην διαμόρφωσή σας, τα παράθυρα συνομιλίας και τα στοιχεία διεπαφής προσαρμόζονται αυτόματα για να λειτουργούν καλά σε σκούρα φόντα.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
hasDarkBackground: true
});Το στυλ για τη σκοτεινή λειτουργία εφαρμόζεται στα παράθυρα συνομιλίας, τα τετράγωνα δεικτών και όλα τα διαδραστικά στοιχεία. Αν ο ιστότοπός σας διαθέτει διακόπτη σκοτεινής λειτουργίας, μπορείτε να επανεκκινήσετε το widget όταν αλλάζει η λειτουργία, ή να χρησιμοποιήσετε την προσέγγιση με την κλάση του body που περιγράφεται παρακάτω.
Δυναμική Σκοτεινή Λειτουργία
Αν η σκοτεινή λειτουργία του ιστότοπού σας ελέγχεται με την προσθήκη της κλάσης .dark στο στοιχείο body, το UI του Image Chat θα τη σεβαστεί αυτόματα χωρίς να απαιτείται επανεκκίνηση. Τα στυλ του widget έχουν σχεδιαστεί ώστε να ανταποκρίνονται στην παρουσία αυτής της κλάσης.
/* Το CSS της σκοτεινής λειτουργίας σας */
body.dark {
background: #1a1a1a;
color: #ffffff;
}Προσαρμογή στυλ με CSS
Μπορείτε να προσαρμόσετε την εμφάνιση των δεικτών, των παραθύρων συνομιλίας και άλλων στοιχείων χρησιμοποιώντας CSS. Το widget προσθέτει συγκεκριμένες κλάσεις που μπορείτε να στοχεύσετε στο φύλλο στυλ σας.
Τα τετράγωνα και τα παράθυρα συνομιλίας χρησιμοποιούν το σύστημα στυλ φυσαλίδας σχολίων του FastComments, οπότε οποιεσδήποτε προσαρμογές έχετε εφαρμόσει στο τυπικό widget σχολιασμού θα επηρεάσουν επίσης και το 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 για να προσαρμόσετε χρώματα, γραμματοσειρές, διαστήματα ή άλλες οπτικές ιδιότητες αυτών των παραθύρων. Τα παράθυρα συνομιλίας χρησιμοποιούν την ίδια δομή στοιχείων με το τυπικό widget του FastComments, οπότε κληρονομούν οποιεσδήποτε παγκόσμιες προσαρμογές έχετε εφαρμόσει.
Αναβλητική αρχικοποίηση
Τα παράθυρα συνομιλίας αρχικοποιούνται κατά το hover για χρήστες desktop ή αμέσως όταν δημιουργούνται. Αυτό μειώνει το αρχικό φορτίο αποδίδοντας τη διεπαφή συνομιλίας μόνο όταν οι χρήστες αλληλεπιδρούν πραγματικά με έναν δείκτη.
Η αναβλητική αρχικοποίηση συμβαίνει διαφανώς. Οι χρήστες δεν παρατηρούν καθυστέρηση, αλλά ο περιηγητής δεν χρειάζεται να αποδώσει δεκάδες κρυφά παράθυρα συνομιλίας αν έχετε πολλούς δείκτες σε μια εικόνα.
Τοπικοποίηση
Το Image Chat υποστηρίζει όλες τις ίδιες επιλογές τοπικοποίησης με το τυπικό widget FastComments. Ορίστε την επιλογή locale για να εμφανίσετε το κείμενο της διεπαφής σε διαφορετικές γλώσσες:
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
locale: 'fr' // Γαλλικά
});Το FastComments υποστηρίζει δεκάδες γλώσσες. Η ρύθμιση locale επηρεάζει όλο το κείμενο της διεπαφής, συμπεριλαμβανομένων των προτροπών, των κουμπιών και των κειμένων υποδείγματος.
Κληρονομημένες επιλογές προσαρμογής
Εφόσον το Image Chat επεκτείνει το τυπικό widget σχολιασμού, κληρονομεί όλες τις επιλογές προσαρμογής από το βασικό widget. Αυτό περιλαμβάνει προσαρμοσμένες κλάσεις CSS, προσαρμοσμένες μεταφράσεις, προσαρμογή avatar, μορφοποίηση ημερομηνιών και πολλά άλλα.
Δείτε την κύρια τεκμηρίωση προσαρμογής του FastComments για την πλήρη λίστα των διαθέσιμων επιλογών προσαρμογής.
Εργασία με προσαρμοσμένες γραμματοσειρές
Αν ο ιστότοπός σας χρησιμοποιεί προσαρμοσμένες γραμματοσειρές, το UI του Image Chat θα κληρονομήσει αυτές τις γραμματοσειρές από το CSS της σελίδας σας. Τα παράθυρα συνομιλίας αποδίδονται μέσα στο DOM της σελίδας σας και σέβονται τις υπάρχουσες ρυθμίσεις τυπογραφίας.
Για καλύτερα αποτελέσματα, βεβαιωθείτε πως οι προσαρμοσμένες γραμματοσειρές έχουν φορτωθεί πριν την αρχικοποίηση του Image Chat, ή αποδεχθείτε ότι μπορεί να υπάρχει μια σύντομη αναλαμπή μη στιλιζαρισμένου κειμένου ενώ φορτώνουν οι γραμματοσειρές.
Οπτικός σχεδιασμός δεικτών
Τα τετράγωνα δείκτες έχουν έναν διακριτικό οπτικό σχεδιασμό που τα κάνει να ξεχωρίζουν χωρίς να κατακλύζουν την εικόνα. Μπορείτε να προσαρμόσετε την εμφάνισή τους με CSS αν θέλετε διαφορετική οπτική επεξεργασία.
Οι δείκτες περιλαμβάνουν καταστάσεις hover που παρέχουν ανατροφοδότηση όταν οι χρήστες μετακινούν το ποντίκι πάνω τους. Σε συσκευές αφής, η αλληλεπίδραση με πάτημα παρέχει άμεση ανατροφοδότηση ανοίγοντας το παράθυρο συνομιλίας.
Συγχρονισμός σε Πραγματικό Χρόνο
Ενημερώσεις σε πραγματικό χρόνο
Image Chat χρησιμοποιεί συνδέσεις WebSocket για να συγχρονίζει όλες τις συζητήσεις σε πραγματικό χρόνο μεταξύ όλων των συνδεδεμένων χρηστών. Όταν κάποιος δημιουργεί ένα νέο σημείο επισήμανσης, προσθέτει ένα σχόλιο ή διαγράφει μια συζήτηση, όλοι οι άλλοι χρήστες που βλέπουν την ίδια εικόνα βλέπουν την ενημέρωση αμέσως χωρίς να ανανεώσουν τη σελίδα.
Πώς λειτουργεί ο συγχρονισμός WebSocket
Όταν αρχικοποιείτε το Image Chat, το widget καθιερώνει μια σύνδεση WebSocket προς τους servers του FastComments. Αυτή η σύνδεση παραμένει ανοιχτή για τη διάρκεια της συνεδρίας του χρήστη και ακούει για ενημερώσεις που σχετίζονται με την τρέχουσα εικόνα.
Το σύστημα WebSocket χρησιμοποιεί τρεις τύπους μηνυμάτων μετάδοσης για το Image Chat. Το new-image-chat event ενεργοποιείται όταν κάποιος δημιουργεί ένα νέο marker στην εικόνα. Το image-chat-updated event ενεργοποιείται όταν κάποιος ενημερώνει μια υπάρχουσα συνομιλία. Το deleted-image-chat event ενεργοποιείται όταν κάποιος διαγράφει ένα marker.
Σύστημα Broadcast ID
Για να αποτραπούν φαινόμενα ηχούς όπου οι χρήστες βλέπουν τις δικές τους ενέργειες να εκπέμπονται πίσω σε αυτούς, κάθε ενημέρωση περιλαμβάνει ένα μοναδικό broadcastId. Όταν ένας χρήστης δημιουργεί ή ενημερώνει ένα marker, ο client του δημιουργεί ένα UUID για αυτήν την ενέργεια. Όταν το WebSocket μεταδίδει ξανά την ενημέρωση σε όλους τους clients, ο αρχικός client αγνοεί την ενημέρωση επειδή ταιριάζει με το δικό του broadcastId.
Αυτό εξασφαλίζει ομαλή αλληλεπίδραση όπου οι χρήστες βλέπουν τις αλλαγές τους άμεσα στο UI χωρίς να περιμένουν τον γύρο-ταξίδι μέσω του server, ενώ ταυτόχρονα διασφαλίζει ότι όλοι οι άλλοι χρήστες λαμβάνουν την ενημέρωση.
Ανθεκτικότητα σύνδεσης
Εάν η σύνδεση WebSocket διακοπεί λόγω προβλημάτων δικτύου ή συντήρησης του server, το widget προσπαθεί αυτόματα να επανασυνδεθεί. Κατά την περίοδο επανασύνδεσης, οι χρήστες μπορούν ακόμα να αλληλεπιδρούν με υπάρχοντα markers, αλλά δεν θα βλέπουν ενημερώσεις σε πραγματικό χρόνο από άλλους χρήστες μέχρι να αποκατασταθεί η σύνδεση.
Μόλις επανασυνδεθεί, το widget επανασυγχρονίζεται για να εξασφαλιστεί ότι δεν χάθηκαν ενημερώσεις. Αυτό συμβαίνει διαφανώς χωρίς να απαιτείται παρέμβαση του χρήστη.
Θέματα εύρους ζώνης
Τα μηνύματα WebSocket είναι ελαφριά και περιέχουν μόνο τις απαραίτητες πληροφορίες για τον συγχρονισμό της κατάστασης. Η δημιουργία ενός νέου marker συνήθως χρησιμοποιεί λιγότερο από 1KB εύρους ζώνης. Το σύστημα περιλαμβάνει επίσης ευφυή ομαδοποίηση για μείωση της συχνότητας μηνυμάτων κατά περιόδους υψηλής δραστηριότητας.
Τα μετρικά χρήσης σας στον πίνακα ελέγχου του FastComments παρακολουθούν τα pubSubMessageCount και pubSubBandwidth ώστε να μπορείτε να παρακολουθείτε τη δραστηριότητα συγχρονισμού σε πραγματικό χρόνο στις τοποθεσίες σας.
Συγχρονισμός μεταξύ καρτελών
Εάν ένας χρήστης έχει την ίδια σελίδα ανοιχτή σε πολλαπλές καρτέλες του προγράμματος περιήγησης, οι ενημερώσεις σε μια καρτέλα εμφανίζονται αμέσως στις άλλες καρτέλες. Αυτό λειτουργεί μέσω του ίδιου μηχανισμού συγχρονισμού WebSocket και δεν απαιτεί επιπλέον ρυθμίσεις.
Οι χρήστες μπορούν να έχουν την ιστοσελίδα σας ανοιχτή σε πολλές συσκευές ταυτόχρονα και όλες θα παραμένουν συγχρονισμένες. Ένα marker που δημιουργείται σε ένα επιτραπέζιο υπολογιστή εμφανίζεται αμέσως στο tablet του χρήστη αν και οι δύο συσκευές βλέπουν την ίδια εικόνα.
Ασφάλεια
Τα μηνύματα WebSocket μεταδίδονται μέσω ασφαλών συνδέσεων (WSS) και περιλαμβάνουν επικύρωση tenant για να διασφαλιστεί ότι οι χρήστες λαμβάνουν μόνο ενημερώσεις για συνομιλίες που έχουν εξουσιοδότηση να δουν. Ο server επικυρώνει όλες τις ενέργειες πριν τις μεταδώσει για να αποτρέψει μη εξουσιοδοτημένη πρόσβαση ή χειραγώγηση.
Συμπεριφορά εκτός σύνδεσης
Όταν οι χρήστες είναι εντελώς εκτός σύνδεσης, μπορούν ακόμα να προβάλλουν υπάρχοντα markers αλλά δεν μπορούν να δημιουργήσουν νέα ή να δουν ενημερώσεις από άλλους. Το widget εντοπίζει την κατάσταση εκτός σύνδεσης και εμφανίζει κατάλληλα μηνύματα.
Εάν ένας χρήστης προσπαθήσει να δημιουργήσει ένα marker ενώ είναι εκτός σύνδεσης και μετά επανέλθει σε σύνδεση, η ενέργεια θα αποτύχει αντί να τεθεί σε ουρά, εξασφαλίζοντας συνέπεια στα δεδομένα. Οι χρήστες θα πρέπει να επαναλάβουν την ενέργεια όταν αποκατασταθεί η σύνδεσή τους.
Επίδραση στην απόδοση
Η σύνδεση WebSocket έχει ελάχιστη επίδραση στην απόδοση. Η σύνδεση παραμένει αδρανής όταν δεν συμβαίνουν ενημερώσεις και επεξεργάζεται μηνύματα μόνο όταν υπάρχει δραστηριότητα. Σε μια τυπική εικόνα με μέτρια δραστηριότητα markers, το WebSocket χρησιμοποιεί λιγότερη CPU από ό,τι η απόδοση της ίδιας της εικόνας.
Για σελίδες με εκατοντάδες ταυτόχρονους χρήστες και υψηλή δραστηριότητα δημιουργίας markers, το σύστημα κλιμακώνεται οριζόντια για να διατηρήσει την απόδοση χωρίς να επηρεάσει τις συνδέσεις των μεμονωμένων πελατών.
Σενάρια συνεργασίας
Ο συγχρονισμός σε πραγματικό χρόνο καθιστά το Image Chat ιδιαίτερα ισχυρό για συνεργατικές ροές εργασίας. Ομάδες σχεδίασης μπορούν να εξετάσουν mockups μαζί, με όλους να βλέπουν τις τοποθετήσεις των markers σε πραγματικό χρόνο. Ομάδες υποστήριξης πελατών μπορούν να σχολιάζουν από κοινού στιγμιότυπα οθόνης για να εντοπίσουν προβλήματα. Εκπαιδευτικές ομάδες μπορούν να συζητούν διαγράμματα με όλους τους συμμετέχοντες να βλέπουν τα markers των άλλων καθώς δημιουργούνται.
Η άμεση ανατροφοδότηση δημιουργεί μια πιο ελκυστική και παραγωγική εμπειρία συνεργασίας σε σύγκριση με τα παραδοσιακά συστήματα σχολιασμού όπου οι χρήστες πρέπει να ανανεώσουν για να δουν ενημερώσεις.
Αναφορά API
Επισκόπηση API
Το Image Chat παρέχει τρία σημεία τερματισμού REST API για τη διαχείριση συνομιλιών εικόνας προγραμματιστικά. Αυτά τα σημεία τερματισμού σας επιτρέπουν να ανακτάτε, να δημιουργείτε και να διαγράφετε δείκτες χωρίς τη χρήση του widget του προγράμματος περιήγησης.
Όλα τα σημεία τερματισμού API απαιτούν ταυτοποίηση και ακολουθούν τα πρότυπα του FastComments API. Πρόκειται για δημόσια σημεία τερματισμού που πραγματοποιούν έλεγχο ταυτότητας μέσω cookie του προγράμματος περιήγησης, όχι μέσω API keys.
Βασικό URL
Όλα τα σημεία τερματισμού του Image Chat βρίσκονται κάτω από:
https://fastcomments.com/comment-image-chatsΤαυτοποίηση
Αυτά τα σημεία τερματισμού πραγματοποιούν έλεγχο ταυτότητας των χρηστών μέσω cookie του προγράμματος περιήγησης. Δεν χρησιμοποιούν API keys. Οι χρήστες πρέπει να είναι συνδεδεμένοι στο FastComments στο πρόγραμμα περιήγησής τους για να έχουν πρόσβαση σε αυτά τα σημεία τερματισμού.
Λήψη όλων των συνομιλιών
Ανάκτηση όλων των συνομιλιών εικόνας για μια συγκεκριμένη εικόνα.
Endpoint
GET /comment-image-chats/:tenantId?urlId=<urlId>Παράμετροι
tenantId (παράμετρος διαδρομής, απαιτείται) είναι το Tenant ID του FastComments σας.
urlId (παράμετρος ερωτήματος, απαιτείται) είναι το αναγνωριστικό της εικόνας για την οποία θέλετε να ανακτήσετε συνομιλίες.
Απόκριση
Η απόκριση περιλαμβάνει την κατάσταση του API, πληροφορίες για τη συνεδρία του τρέχοντος χρήστη αν έχει πραγματοποιηθεί ταυτοποίηση, έναν πίνακα συνομιλιών με τα IDs τους, 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"
}Δημιουργία συνομιλίας
Δημιουργία νέας συνομιλίας εικόνας για μια συγκεκριμένη θέση πάνω σε μια εικόνα.
Endpoint
POST /comment-image-chats/:tenantIdΠαράμετροι
tenantId (παράμετρος διαδρομής, απαιτείται) είναι το Tenant ID του FastComments σας.
Το σώμα του αιτήματος πρέπει να είναι JSON και να περιλαμβάνει τα ακόλουθα απαιτούμενα πεδία.
urlId (string, απαιτείται) είναι το βασικό αναγνωριστικό της σελίδας.
windowUrlId (string, απαιτείται) είναι το URL σε συνδυασμό με την πηγή της εικόνας και τις συντεταγμένες, για παράδειγμα my-page:/images/photo.jpg:25.5:30.2.
pageTitle (string, απαιτείται) είναι ο τίτλος της σελίδας.
src (string, απαιτείται) είναι το URL της πηγής της εικόνας.
x (number, απαιτείται) είναι η συντεταγμένη X ως ποσοστό (0-100).
y (number, απαιτείται) είναι η συντεταγμένη Y ως ποσοστό (0-100).
createdFromCommentId (string, απαιτείται) είναι το ID του σχολίου που ξεκίνησε αυτή τη συνομιλία.
broadcastId (string, απαιτείται) είναι ένα UUID για τον ζωντανό συγχρονισμό ώστε να αποφεύγονται εφέ ηχώ.
Απόκριση
Η απόκριση περιλαμβάνει την κατάσταση του API και το ID της νεοδημιουργημένης συνομιλίας.
Παράδειγμα αιτήματος
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"
}Διαγραφή συνομιλίας
Διαγραφή υπάρχουσας συνομιλίας εικόνας. Αυτό το σημείο τερματισμού απαιτεί δικαιώματα διαχειριστή ή συντονιστή, ή η συνομιλία πρέπει να έχει δημιουργηθεί από τον ταυτοποιημένο χρήστη.
Endpoint
DELETE /comment-image-chats/:tenantId/:chatIdΠαράμετροι
tenantId (παράμετρος διαδρομής, απαιτείται) είναι το Tenant ID του FastComments σας.
chatId (παράμετρος διαδρομής, απαιτείται) είναι το ID της συνομιλίας που θα διαγραφεί.
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% από την αριστερή άκρη της εικόνας.
Περιορισμός ρυθμού αιτήσεων
Αυτά τα σημεία τερματισμού υπόκεινται στον τυπικό περιορισμό ρυθμού του FastComments API. Το middleware περιορισμού ρυθμού εφαρμόζεται ανά tenant για να αποτρέψει καταχρήσεις ενώ επιτρέπει κανονικά μοτίβα χρήσης.
Απαντήσεις σφάλματος
Όλα τα σημεία τερματισμού επιστρέφουν τυπικούς HTTP κωδικούς κατάστασης. Μια απόκριση 400 υποδεικνύει μη έγκυρες παραμέτρους αιτήματος. Μια απόκριση 401 σημαίνει αποτυχία ταυτοποίησης. Μια απόκριση 403 υποδεικνύει ανεπαρκή δικαιώματα. Μια απόκριση 404 σημαίνει ότι η συνομιλία δεν βρέθηκε. Μια απόκριση 429 υποδεικνύει υπέρβαση του ορίου ρυθμού.
Οι απαντήσεις σφάλματος περιλαμβάνουν σώμα JSON με λεπτομέρειες:
{
"status": "error",
"message": "Conversation not found"
}Παρακολούθηση χρήσης
Η δημιουργία συνομιλιών αυξάνει τον usage δείκτη conversationCreateCount. Όλη η δραστηριότητα συγχρονισμού WebSocket αυξάνει τα pubSubMessageCount και pubSubBandwidth. Μπορείτε να παρακολουθείτε αυτούς τους μετρητές στον πίνακα ελέγχου του FastComments υπό τα analytics χρήσης.
Έχετε ερωτήσεις;
Αυτό ήταν για το FastComments Image Chat! Αν έχετε οποιεσδήποτε ερωτήσεις, χρειάζεστε βοήθεια με την υλοποίηση ή έχετε προτάσεις για λειτουργίες, ενημερώστε μας παρακάτω ή επικοινωνήστε με την ομάδα υποστήριξής μας.
Δείτε το ζωντανό demo στη σελίδα επίδειξης για να δείτε το Image Chat σε δράση.