Το FastComments Image Chat επιτρέπει διαδραστικές συζητήσεις σε εικόνες δίνοντας τη δυνατότητα στους χρήστες να κάνουν κλικ οπουδήποτε σε μια εικόνα για να δημιουργήσουν σημεία συζήτησης. Οι χρήστες μπορούν να κάνουν κλικ σε συγκεκριμένα μέρη της εικόνας για να ξεκινήσουν συζητήσεις γύρω από αυτές τις περιοχές, δημιουργώντας οπτικούς δείκτες που δείχνουν πού βρίσκονται οι συζητήσεις.
Αυτή η λειτουργία είναι ιδανική για ανατροφοδότηση σχεδίασης, κριτικές προϊόντων, εκπαιδευτικό υλικό με διαγράμματα, γκαλερί φωτογραφιών με σχόλια και οποιοδήποτε σενάριο όπου θέλετε συμφραζόμενες συζητήσεις προσδεδεμένες σε συγκεκριμένες τοποθεσίες της εικόνας.
Ξεκινώντας 
Σενάρια χρήσης
Το Image Chat λειτουργεί άριστα για ανατροφοδότηση σχεδίου όπου οι ομάδες χρειάζεται να συζητήσουν συγκεκριμένα στοιχεία σε mockups ή screenshots. Ιστότοποι αξιολόγησης προϊόντων μπορούν να επιτρέψουν στους πελάτες να συζητούν συγκεκριμένα χαρακτηριστικά εμφανή σε φωτογραφίες προϊόντων. Εκπαιδευτικές πλατφόρμες μπορούν να το χρησιμοποιήσουν για συζητήσεις διαγραμμάτων, χαρτών ή επιστημονικών εικόνων. Οι συλλογές φωτογραφιών μπορούν να γίνουν διαδραστικές με σχόλια συγκεκριμένης θέσης. Ιστότοποι ακινήτων μπορούν να επιτρέψουν στους θεατές να συζητούν συγκεκριμένα χαρακτηριστικά εμφανή στις φωτογραφίες ακινήτων.
Γρήγορη Εκκίνηση
Η έναρξη χρήσης του Image Chat είναι απλή. Χρειάζεστε το script Image Chat της FastComments, ένα στοιχείο εικόνας ή ένα container με μια εικόνα, και ένα αντικείμενο διαμόρφωσης με το 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 ID
Από προεπιλογή, το 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
Απαιτείται το FastComments Tenant ID σας. Μπορείτε να το βρείτε στον πίνακα ελέγχου 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
Ελέγχει το μέγεθος των κλικ-επιλέξιμων δεικτών συνομιλίας ως ποσοστό του πλάτους της εικόνας. Η προεπιλογή είναι 5%, που σημαίνει ότι κάθε δείκτης είναι 5% του πλάτους της εικόνας.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
chatSquarePercentage: 8 // Μεγαλύτεροι, πιο ορατοί δείκτες
});Μικρότερες τιμές δημιουργούν λιγότερο ενοχλητικούς δείκτες που λειτουργούν καλύτερα για λεπτομερείς εικόνες. Μεγαλύτερες τιμές κάνουν τους δείκτες πιο εύκολους στην όραση και στο κλικ σε πολυάσχολες εικόνες ή για χρήστες σε κινητές συσκευές.
hasDarkBackground
Ενεργοποιήστε το στυλ σε σκούρο θέμα όταν η σελίδα σας έχει σκοτεινό φόντο.
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> άμεσα είτε ένα στοιχείο container με μια εικόνα μέσα:
// Άμεσο στοιχείο εικόνας
FastCommentsImageChat(document.getElementById('my-image'), config);
// Κοντέινερ με εικόνα μέσα
FastCommentsImageChat(document.querySelector('.image-wrapper'), config);Το widget θα βρει την εικόνα αυτόματα αν περάσετε ένα στοιχείο container.
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.
Ανταποκρινόμενος Σχεδιασμός
Τοποθέτηση με Βάση τα Ποσοστά
Image Chat χρησιμοποιεί συντεταγμένες με βάση τα ποσοστά αντί για εικονοστοιχεία για να τοποθετεί τους δείκτες συνομιλίας πάνω στις εικόνες. Όταν ένας χρήστης κάνει κλικ σε μια εικόνα, το widget μετατρέπει τις συντεταγμένες σε pixels του κλικ σε ποσοστά του πλάτους και του ύψους της εικόνας. Αυτή η προσέγγιση εξασφαλίζει ότι οι δείκτες παραμένουν στη σωστή θέση ανεξάρτητα από τον τρόπο εμφάνισης της εικόνας.
Για παράδειγμα, αν ένας χρήστης κάνει κλικ 250 pixels από την αριστερή άκρη μιας εικόνας πλάτους 1000px, το widget αποθηκεύει αυτό ως 25% από αριστερά. Όταν άλλος χρήστης δει την ίδια εικόνα σε πλάτος 500px σε κινητή συσκευή, ο δείκτης εμφανίζεται 125 pixels από αριστερά, που είναι και πάλι 25% του πλάτους.
Οφέλη για ανταποκρινόμενες διατάξεις
Αυτό το σύστημα ποσοστών κάνει το Image Chat να λειτουργεί απρόσκοπτα σε όλα τα μεγέθη και τις προσανατολισμούς συσκευών. Οι εικόνες σας μπορεί να εμφανίζονται σε διαφορετικά μεγέθη ανάλογα με το πλάτος της οθόνης, τους κανόνες CSS ή τους περιορισμούς του container, αλλά οι δείκτες πάντα ευθυγραμμίζονται σωστά με τις προβλεπόμενες θέσεις.
Οι χρήστες σε επιτραπέζιους υπολογιστές με μεγάλες οθόνες βλέπουν τους δείκτες στις ίδιες σχετικές θέσεις με τους χρήστες σε smartphones με μικρές οθόνες. Οι δείκτες κλιμακώνονται αναλογικά μαζί με την ίδια την εικόνα.
Κλίμακα εικόνας και αναλογία διαστάσεων
Εφόσον η εικόνα σας διατηρεί την αναλογία διαστάσεων κατά την κλιμάκωση (που είναι η προεπιλεγμένη συμπεριφορά του browser), οι δείκτες με βάση τα ποσοστά θα παραμείνουν τέλεια ευθυγραμμισμένοι. Το widget υποθέτει ότι οι εικόνες κλιμακώνονται αναλογικά και υπολογίζει τις θέσεις βασιζόμενο σε αυτή την υπόθεση.
Αν εφαρμόσετε CSS που παραμορφώνει την αναλογία διαστάσεων της εικόνας (όπως η χρήση του object-fit: cover με συγκεκριμένες διαστάσεις), οι θέσεις των δεικτών ενδέχεται να μην ευθυγραμμίζονται σωστά. Για καλύτερα αποτελέσματα, επιτρέψτε στις εικόνες να κλιμακώνονται φυσικά ή χρησιμοποιήστε object-fit: contain για να διατηρήσετε την αναλογία διαστάσεων.
Μέγεθος τετραγώνων συνομιλίας
Το οπτικό μέγεθος των δεικτών συνομιλίας είναι επίσης με βάση τα ποσοστά. Η ρύθμιση chatSquarePercentage έχει προεπιλογή 5%, που σημαίνει ότι κάθε τετράγωνο είναι 5% του πλάτους της εικόνας. Αυτό εξασφαλίζει σταθερό οπτικό βάρος σε διαφορετικά μεγέθη εικόνων.
Σε μια εικόνα πλάτους 1000px με την προεπιλεγμένη ρύθμιση 5%, οι δείκτες είναι τετράγωνα 50px. Σε εικόνα πλάτους 500px, οι ίδιοι δείκτες είναι τετράγωνα 25px. Παρέχουν αναλογικότητα σε σχέση με το μέγεθος της εικόνας.
Συμπεριφορά σε κινητά
Σε οθόνες κάτω από 768px πλάτος, το Image Chat μεταβαίνει σε διάταξη βελτιστοποιημένη για κινητά. Τα παράθυρα συνομιλίας ανοίγουν σε πλήρη οθόνη αντί να αιωρούνται δίπλα από τον δείκτη. Αυτό προσφέρει καλύτερη χρηστικότητα σε μικρές οθόνες όπου τα αιωρούμενα παράθυρα θα κάλυπταν υπερβολικό μέρος της εικόνας.
Οι ίδιοι οι δείκτες παραμένουν ορατοί και κλικαρίσιμοι στις ποσοστιαίες θέσεις τους. Οι χρήστες μπορούν ακόμα να βλέπουν πού βρίσκονται όλες οι συζητήσεις και να πατήσουν τους δείκτες για να ανοίξουν τη διεπαφή συνομιλίας σε πλήρη οθόνη.
Δυναμική φόρτωση εικόνας
Το σύστημα με βάση τα ποσοστά λειτουργεί σωστά ακόμη και όταν οι εικόνες φορτώνουν ασύγχρονα ή αλλάζουν μέγεθος μετά τη φόρτωση της σελίδας. Το widget παρακολουθεί το στοιχείο εικόνας και επαναϋπολογίζει τις θέσεις των δεικτών κάθε φορά που αλλάζουν οι διαστάσεις της εικόνας.
Αν χρησιμοποιείτε lazy-loading εικόνων ή εφαρμόζετε responsive εικόνες με διαφορετικά μεγέθη σε διαφορετικά breakpoints, οι δείκτες προσαρμόζονται αυτόματα όταν αλλάζει το μέγεθος της εικόνας.
Συνέπεια ανά συσκευές
Επειδή οι συντεταγμένες αποθηκεύονται ως ποσοστά στη βάση δεδομένων, μια συζήτηση που δημιουργήθηκε σε επιτραπέζιο υπολογιστή εμφανίζεται στην ακριβώς ίδια σχετική θέση όταν προβάλλεται σε tablet ή τηλέφωνο. Οι χρήστες μπορούν να συνεργάζονται μεταξύ συσκευών χωρίς ασυνέπειες στη τοποθέτηση.
Αυτό λειτουργεί και στις δύο κατευθύνσεις. Μια συζήτηση που δημιουργήθηκε πατώντας ένα συγκεκριμένο σημείο σε κινητή συσκευή εμφανίζεται στην ίδια σχετική θέση όταν προβληθεί σε μεγάλη οθόνη desktop.
Σκέψεις σχετικά με το viewport
Το widget υπολογίζει τα ποσοστά σε σχέση με το ίδιο το στοιχείο της εικόνας, όχι το viewport. Αυτό σημαίνει ότι το σκρόλλινγκ της σελίδας ή η αλλαγή στο μέγεθος του παραθύρου του browser δεν επηρεάζει τις θέσεις των δεικτών. Οι δείκτες παραμένουν αγκιστρωμένοι στις θέσεις τους πάνω στην εικόνα ανεξάρτητα από τις αλλαγές του viewport.
Εξασφάλιση μελλοντικής συμβατότητας του περιεχομένου
Η προσέγγιση με βάση τα ποσοστά καθιστά τις συζητήσεις στις εικόνες ανθεκτικές σε αλλαγές στη διάταξη, το σχεδιασμό ή το οικοσύστημα των συσκευών. Καθώς εμφανίζονται νέα μεγέθη οθονών και συσκευές, οι υπάρχουσες συζητήσεις θα συνεχίσουν να εμφανίζονται σωστά χωρίς να απαιτούνται ενημερώσεις ή μεταφορές.
Προσαρμογή
Υποστήριξη Σκούρου Θέματος
Το Image Chat περιλαμβάνει ενσωματωμένη υποστήριξη για σκούρο θέμα. Όταν ορίσετε hasDarkBackground: true στη ρύθμισή σας, τα παράθυρα συνομιλίας και τα στοιχεία του UI προσαρμόζονται αυτόματα ώστε να λειτουργούν καλά σε σκούρα φόντα.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
hasDarkBackground: true
});Το στυλ του σκούρου θέματος εφαρμόζεται στα παράθυρα συνομιλίας, στα τετράγωνα δείκτες και σε όλα τα διαδραστικά στοιχεία. Εάν ο ιστότοπός σας έχει διακόπτη σκούρου θέματος, μπορείτε να επανεκινήσετε το widget όταν αλλάζει το θέμα, ή να χρησιμοποιήσετε την προσέγγιση με την κλάση στο body που περιγράφεται παρακάτω.
Δυναμικό Σκούρο Θέμα
Εάν το σκούρο θέμα του ιστότοπού σας ελέγχεται με την προσθήκη της κλάσης .dark στο στοιχείο body, το UI του Image Chat θα το τηρήσει αυτόματα χωρίς να απαιτείται επανεκκίνηση. Τα στυλ του widget έχουν σχεδιαστεί ώστε να ανταποκρίνονται στην παρουσία αυτής της κλάσης.
/* Το CSS για το σκούρο θέμα σας */
body.dark {
background: #1a1a1a;
color: #ffffff;
}Προσαρμοσμένο Στυλ με CSS
Μπορείτε να προσαρμόσετε την εμφάνιση των δεικτών, των παραθύρων συνομιλίας και άλλων στοιχείων χρησιμοποιώντας CSS. Το widget προσθέτει συγκεκριμένες κλάσεις στις οποίες μπορείτε να στοχεύσετε στο stylesheet σας.
Τα τετράγωνα και τα παράθυρα συνομιλίας χρησιμοποιούν το σύστημα στυλ φυσαλίδων σχολίων του 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 ή αμέσως όταν δημιουργούνται. Αυτό μειώνει το αρχικό φόρτο φόρτωσης, αποδίδοντας την διεπαφή συνομιλίας μόνο όταν οι χρήστες αλληλεπιδρούν πραγματικά με έναν δείκτη.
Η αργή αρχικοποίηση γίνεται διαφανώς. Οι χρήστες δεν αντιλαμβάνονται καμία καθυστέρηση, αλλά ο browser δεν χρειάζεται να αποδώσει δεκάδες κρυφά παράθυρα συνομιλίας αν έχετε πολλούς δείκτες σε μια εικόνα.
Τοπικοποίηση
Το Image Chat υποστηρίζει όλες τις ίδιες επιλογές τοπικοποίησης με το τυπικό widget του FastComments. Ορίστε την επιλογή locale για να εμφανίσετε το κείμενο του UI σε διαφορετικές γλώσσες:
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
locale: 'fr' // Γαλλικά
});Το FastComments υποστηρίζει δεκάδες γλώσσες. Η ρύθμιση locale επηρεάζει όλο το κείμενο του UI συμπεριλαμβανομένων των προτροπών, των κουμπιών και του κειμένου placeholder.
Κληρονομημένες Επιλογές Προσαρμογής
Εφόσον το Image Chat επεκτείνει το τυπικό widget σχολιασμού, κληρονομεί όλες τις επιλογές προσαρμογής από το βασικό widget. Αυτό περιλαμβάνει προσαρμοσμένες κλάσεις CSS, προσαρμοσμένες μεταφράσεις, προσαρμογή avatar, μορφοποίηση ημερομηνιών και πολλά άλλα.
Δείτε την κύρια τεκμηρίωση προσαρμογής του FastComments για την πλήρη λίστα των διαθέσιμων επιλογών προσαρμογής.
Εργασία με Προσαρμοσμένες Γραμματοσειρές
Εάν ο ιστότοπός σας χρησιμοποιεί προσαρμοσμένες γραμματοσειρές, το UI του Image Chat θα κληρονομήσει αυτές τις γραμματοσειρές από το CSS της σελίδας σας. Τα παράθυρα συνομιλίας αποδίδονται μέσα στο DOM της σελίδας σας και σέβονται τις υπάρχουσες ρυθμίσεις τυπογραφίας.
Για καλύτερα αποτελέσματα, βεβαιωθείτε ότι οι προσαρμοσμένες γραμματοσειρές φορτώνονται πριν την αρχικοποίηση του Image Chat, ή αποδεχτείτε ότι μπορεί να υπάρξει μια σύντομη εμφάνιση μη στιλιζαρισμένου κειμένου ενώ οι γραμματοσειρές φορτώνουν.
Οπτικός Σχεδιασμός Δεικτών
Τα τετραγωνικά δείκτες έχουν έναν διακριτικό οπτικό σχεδιασμό που τα κάνει ευδιάκριτα χωρίς να καταπνίγουν την εικόνα. Μπορείτε να προσαρμόσετε την εμφάνισή τους με CSS αν θέλετε διαφορετική οπτική επεξεργασία.
Οι δείκτες περιλαμβάνουν καταστάσεις hover που παρέχουν ανατροφοδότηση όταν οι χρήστες μετακινούν το ποντίκι επάνω τους. Σε συσκευές με αφή, η αλληλεπίδραση πάτησης παρέχει άμεση ανατροφοδότηση ανοίγοντας το παράθυρο συνομιλίας.
Συγχρονισμός σε Πραγματικό Χρόνο
Real-Time Updates
Το Image Chat χρησιμοποιεί συνδέσεις WebSocket για να συγχρονίζει όλες τις συζητήσεις σε πραγματικό χρόνο σε όλους τους συνδεδεμένους χρήστες. Όταν κάποιος δημιουργεί έναν νέο δείκτη, προσθέτει ένα σχόλιο ή διαγράφει μια συζήτηση, όλοι οι άλλοι χρήστες που βλέπουν την ίδια εικόνα βλέπουν την ενημέρωση αμέσως χωρίς ανανέωση.
How WebSocket Sync Works
Όταν αρχικοποιείτε το Image Chat, το widget δημιουργεί μια σύνδεση WebSocket προς τους servers του FastComments. Αυτή η σύνδεση παραμένει ανοιχτή για τη διάρκεια της συνεδρίας του χρήστη και ακούει για ενημερώσεις σχετικές με την τρέχουσα εικόνα.
Το σύστημα WebSocket χρησιμοποιεί τρεις τύπους μηνυμάτων εκπομπής για το Image Chat. Το γεγονός new-image-chat ενεργοποιείται όταν κάποιος δημιουργεί έναν νέο δείκτη στην εικόνα. Το γεγονός image-chat-updated ενεργοποιείται όταν κάποιος ενημερώνει μια υπάρχουσα συζήτηση. Το γεγονός deleted-image-chat ενεργοποιείται όταν κάποιος διαγράφει έναν δείκτη.
Broadcast ID System
Για να αποτραπούν φαινόμενα ηχώ όπου οι χρήστες βλέπουν τις δικές τους ενέργειες να εκπέμπονται πίσω σε αυτούς, κάθε ενημέρωση περιλαμβάνει ένα μοναδικό broadcastId. Όταν ένας χρήστης δημιουργεί ή ενημερώνει έναν δείκτη, ο client του δημιουργεί ένα UUID για αυτήν την ενέργεια. Όταν το WebSocket εκπέμπει την ενημέρωση πίσω σε όλους τους clients, ο αρχικός client αγνοεί την ενημέρωση επειδή ταιριάζει με το δικό του broadcastId.
Αυτό εξασφαλίζει ομαλή αλληλεπίδραση όπου οι χρήστες βλέπουν τις αλλαγές τους άμεσα στο UI χωρίς να περιμένουν τον γύρο-διαδρομή μέσω του διακομιστή, ενώ ταυτόχρονα διασφαλίζεται ότι όλοι οι άλλοι χρήστες λαμβάνουν την ενημέρωση.
Connection Resilience
Εάν η σύνδεση WebSocket διακοπεί λόγω προβλημάτων δικτύου ή συντήρησης του server, το widget προσπαθεί αυτόματα να επανασυνδεθεί. Κατά τη διάρκεια της περιόδου επανασύνδεσης, οι χρήστες μπορούν ακόμη να αλληλεπιδρούν με υπάρχοντες δείκτες, αλλά δεν θα βλέπουν ενημερώσεις σε πραγματικό χρόνο από άλλους χρήστες μέχρι να επανασυνδεθεί η σύνδεση.
Μόλις επανασυνδεθεί, το widget επανασυγχρονίζει για να διασφαλίσει ότι δεν έχουν χαθεί ενημερώσεις. Αυτό συμβαίνει διαφανώς χωρίς να απαιτείται παρέμβαση του χρήστη.
Bandwidth Considerations
Τα μηνύματα WebSocket είναι ελαφριά και περιέχουν μόνο την απαραίτητη πληροφορία για τον συγχρονισμό της κατάστασης. Η δημιουργία ενός νέου δείκτη τυπικά χρησιμοποιεί λιγότερο από 1KB εύρους ζώνης. Το σύστημα περιλαμβάνει επίσης έξυπνο δέσιμο (batching) για να μειώσει τη συχνότητα των μηνυμάτων κατά τις περιόδους υψηλής δραστηριότητας.
Τα μετρικά χρήσης σας στον πίνακα ελέγχου του FastComments παρακολουθούν τα pubSubMessageCount και pubSubBandwidth ώστε να μπορείτε να παρακολουθείτε τη δραστηριότητα συγχρονισμού σε πραγματικό χρόνο στις σελίδες σας.
Cross-Tab Synchronization
Εάν ένας χρήστης έχει την ίδια σελίδα ανοιχτή σε πολλαπλές καρτέλες του προγράμματος περιήγησης, οι ενημερώσεις σε μία καρτέλα εμφανίζονται αμέσως στις άλλες καρτέλες. Αυτό λειτουργεί μέσω του ίδιου μηχανισμού συγχρονισμού WebSocket και δεν απαιτεί επιπλέον διαμόρφωση.
Οι χρήστες μπορούν να έχουν τον ιστότοπό σας ανοιχτό σε πολλές συσκευές ταυτόχρονα, και όλες θα παραμένουν συγχρονισμένες. Ένας δείκτης που δημιουργείται σε έναν υπολογιστή εμφανίζεται αμέσως στο tablet του χρήστη εάν και οι δύο συσκευές βλέπουν την ίδια εικόνα.
Security
Τα μηνύματα WebSocket μεταδίδονται μέσω ασφαλών συνδέσεων (WSS) και περιλαμβάνουν επικύρωση tenant για να διασφαλιστεί ότι οι χρήστες λαμβάνουν μόνο ενημερώσεις για συζητήσεις που έχουν άδεια να δουν. Ο διακομιστής επικυρώνει όλες τις ενέργειες πριν τις εκπέμψει για να αποτρέψει μη εξουσιοδοτημένη πρόσβαση ή αλλοίωση.
Offline Behavior
Όταν οι χρήστες είναι εντελώς εκτός σύνδεσης, μπορούν να δουν τους υπάρχοντες δείκτες αλλά δεν μπορούν να δημιουργήσουν νέους ή να δουν ενημερώσεις από άλλους. Το widget εντοπίζει την κατάσταση εκτός σύνδεσης και εμφανίζει το κατάλληλο μήνυμα.
Εάν ένας χρήστης επιχειρήσει να δημιουργήσει έναν δείκτη ενώ είναι εκτός σύνδεσης και στη συνέχεια επανέλθει σε σύνδεση, η ενέργεια θα αποτύχει αντί να τεθεί σε ουρά, διασφαλίζοντας τη συνοχή των δεδομένων. Οι χρήστες θα πρέπει να δοκιμάσουν ξανά την ενέργεια μόλις αποκατασταθεί η σύνδεσή τους.
Performance Impact
Η σύνδεση WebSocket έχει ελάχιστη επίπτωση στην απόδοση. Η σύνδεση παραμένει αδρανής όταν δεν συμβαίνουν ενημερώσεις και επεξεργάζεται μηνύματα μόνο όταν υπάρχει δραστηριότητα. Σε μια τυπική εικόνα με μέτρια δραστηριότητα δεικτών, το WebSocket χρησιμοποιεί λιγότερη CPU από την απόδοση της ίδιας της εικόνας.
Για σελίδες με εκατοντάδες ταυτόχρονους χρήστες και υψηλή δραστηριότητα δημιουργίας δεικτών, το σύστημα κλιμακώνεται οριζόντια για να διατηρεί την απόδοση χωρίς να επηρεάζει τις μεμονωμένες συνδέσεις πελατών.
Collaborative Use Cases
Ο συγχρονισμός σε πραγματικό χρόνο καθιστά το Image Chat ιδιαίτερα ισχυρό για συνεργατικά ροή εργασίας. Οι ομάδες σχεδιασμού μπορούν να αξιολογήσουν μακέτες μαζί, με όλους να βλέπουν την τοποθέτηση δεικτών σε πραγματικό χρόνο. Οι ομάδες υποστήριξης πελατών μπορούν να σχολιάζουν από κοινού στιγμιότυπα οθόνης για να εντοπίσουν προβλήματα. Οι εκπαιδευτικές ομάδες μπορούν να συζητούν διαγράμματα με όλους τους συμμετέχοντες να βλέπουν τους δείκτες των άλλων καθώς δημιουργούνται.
Η άμεση ανατροφοδότηση δημιουργεί μια πιο ελκυστική και παραγωγική συνεργατική εμπειρία σε σύγκριση με τα παραδοσιακά συστήματα σχολιασμού όπου οι χρήστες πρέπει να ανανεώσουν για να δουν ενημερώσεις.
Αναφορά API
Επισκόπηση API
Το Image Chat παρέχει τρία REST API endpoints για τη διαχείριση συνομιλιών εικόνας προγραμματικά. Αυτά τα endpoints σας επιτρέπουν να ανακτήσετε, να δημιουργήσετε και να διαγράψετε σημεία σήμανσης χωρίς να χρησιμοποιήσετε το widget του προγράμματος περιήγησης.
Όλα τα API endpoints απαιτούν αυθεντικοποίηση και ακολουθούν τα τυπικά πρότυπα του FastComments API. Πρόκειται για δημόσια endpoints που αυθεντικοποιούν μέσω cookies του προγράμματος περιήγησης, όχι μέσω API keys.
Βασικό URL
Όλα τα API endpoints για το Image Chat βρίσκονται κάτω από:
https://fastcomments.com/comment-image-chatsΑυθεντικοποίηση
Αυτά τα endpoints αυθεντικοποιούν τους χρήστες μέσω cookies του προγράμματος περιήγησης. Δεν χρησιμοποιούν API keys. Οι χρήστες πρέπει να είναι συνδεδεμένοι στο FastComments στο πρόγραμμα περιήγησής τους για να αποκτήσουν πρόσβαση σε αυτά τα endpoints.
Λήψη όλων των συνομιλιών
Ανακτήστε όλες τις συνομιλίες εικόνας για μια συγκεκριμένη εικόνα.
Endpoint
GET /comment-image-chats/:tenantId?urlId=<urlId>Παράμετροι
tenantId (παράμετρος διαδρομής, υποχρεωτική) είναι το FastComments Tenant ID σας.
urlId (παράμετρος ερωτήματος, υποχρεωτική) είναι ο αναγνωριστής της εικόνας για την οποία θέλετε να ανακτήσετε τις συνομιλίες.
Απόκριση
Η απόκριση περιλαμβάνει την κατάσταση του API, πληροφορίες για την τρέχουσα συνεδρία χρήστη εάν υπάρχει αυθεντικοποίηση, έναν πίνακα συνομιλιών με τα IDs τους, τα URL και τις συντεταγμένες X/Y, έναν καθαρισμένο αναγνωριστή URL, μία σημαία που υποδεικνύει εάν ο τρέχων χρήστης είναι διαχειριστής ιστότοπου ή moderator, και λεπτομέρειες σύνδεσης 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 (παράμετρος διαδρομής, υποχρεωτική) είναι το FastComments Tenant ID σας.
Το σώμα του αιτήματος πρέπει να είναι JSON και να περιλαμβάνει τα ακόλουθα υποχρεωτικά πεδία.
urlId (string, required) είναι ο βασικός αναγνωριστής της σελίδας.
windowUrlId (string, required) είναι το URL σε συνδυασμό με την πηγή της εικόνας και τις συντεταγμένες, για παράδειγμα my-page:/images/photo.jpg:25.5:30.2.
pageTitle (string, required) είναι ο τίτλος της σελίδας.
src (string, required) είναι το URL πηγής της εικόνας.
x (number, required) είναι η συντεταγμένη X ως ποσοστό (0-100).
y (number, required) είναι η συντεταγμένη Y ως ποσοστό (0-100).
createdFromCommentId (string, required) είναι το ID του σχολίου που ξεκίνησε αυτή τη συνομιλία.
broadcastId (string, required) είναι ένα 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 απαιτεί δικαιώματα διαχειριστή ή moderator, ή η συνομιλία πρέπει να έχει δημιουργηθεί από τον αυθεντικοποιημένο χρήστη.
Endpoint
DELETE /comment-image-chats/:tenantId/:chatIdΠαράμετροι
tenantId (παράμετρος διαδρομής, υποχρεωτική) είναι το FastComments Tenant ID σας.
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% από το αριστερό άκρο της εικόνας.
Περιορισμός ρυθμού
Αυτά τα endpoints υπόκεινται στον τυπικό περιορισμό ρυθμού (rate limiting) του FastComments API. Το middleware περιορισμού ρυθμού εφαρμόζεται ανά tenant για να αποτρέπει καταχρήσεις επιτρέποντας ταυτόχρονα κανονικά πρότυπα χρήσης.
Απαντήσεις σφάλματος
Όλα τα endpoints επιστρέφουν τα τυπικά HTTP status codes. Μια απόκριση 400 υποδεικνύει μη έγκυρες παραμέτρους αιτήματος. Μια απόκριση 401 σημαίνει αποτυχία αυθεντικοποίησης. Μια απόκριση 403 υποδεικνύει ανεπαρκή δικαιώματα. Μια απόκριση 404 σημαίνει ότι η συνομιλία δεν βρέθηκε. Μια απόκριση 429 υποδεικνύει ότι ξεπεράστηκε το όριο ρυθμού.
Οι απαντήσεις σφάλματος περιλαμβάνουν ένα JSON σώμα με λεπτομέρειες:
{
"status": "error",
"message": "Conversation not found"
}Παρακολούθηση χρήσης
Η δημιουργία συνομιλιών αυξάνει το μετρικό χρήσης conversationCreateCount. Όλη η δραστηριότητα συγχρονισμού WebSocket αυξάνει τα pubSubMessageCount και pubSubBandwidth. Μπορείτε να παρακολουθείτε αυτά τα μετρικά στο ταμπλό του FastComments στην ενότητα ανάλυσης χρήσης.
Έχετε ερωτήσεις;
Αυτά είναι όσα χρειάζεται να ξέρετε για το FastComments Image Chat! Αν έχετε οποιεσδήποτε ερωτήσεις, χρειάζεστε βοήθεια με την υλοποίηση ή έχετε προτάσεις για λειτουργίες, ενημερώστε μας παρακάτω ή επικοινωνήστε με την ομάδα υποστήριξής μας.
Δείτε τη ζωντανή επίδειξη στη σελίδα επίδειξης για να δείτε το Image Chat εν δράσει.