Αναγνώστες σαν εσάς βοηθούν στην υποστήριξη του MUO. Όταν κάνετε μια αγορά χρησιμοποιώντας συνδέσμους στον ιστότοπό μας, ενδέχεται να κερδίσουμε μια προμήθεια θυγατρικών. Διαβάστε περισσότερα.

Φανταστείτε αυτό: κάποιος που χρησιμοποιεί ένα από τα προϊόντα σας αντιμετωπίζει ένα πρόβλημα. Υπάρχουν μερικά κανάλια που θα μπορούσαν να χρησιμοποιήσουν για να αναφέρουν το πρόβλημα και να προσπαθήσουν να το επιλύσουν.

Μεταξύ αυτών, θα μπορούσαν να επιλέξουν email ή κλήση. Αλλά αυτά τα κανάλια επικοινωνίας δεν εγγυώνται γρήγορες, πόσο μάλλον σε πραγματικό χρόνο, απαντήσεις. Αλλά μια ζωντανή, διαδραστική συνομιλία με έναν επαγγελματία υποστήριξης πελατών μπορεί να αποδειχθεί ανεκτίμητη.

Μια δυνατότητα ζωντανής συνομιλίας έχει αποδειχθεί πολύ χρήσιμο εργαλείο επικοινωνίας. Αυτό συμβαίνει επειδή σας δίνει τη δυνατότητα να αλληλεπιδράτε καλύτερα με τους χρήστες, να βελτιώνετε την εμπειρία χρήστη και να αντιμετωπίζετε προβλήματα γρήγορα και σε πραγματικό χρόνο.

Τι είναι η ζωντανή συνομιλία και γιατί είναι σημαντική;

instagram viewer

Μια δυνατότητα ζωντανής συνομιλίας περιλαμβάνεται συνήθως ως γραφικό στοιχείο στο πλάι μιας ιστοσελίδας ή ως αναδυόμενο παράθυρο που εμφανίζεται μετά τη φόρτωση του ιστότοπου. Παρέχει επικοινωνία σε πραγματικό χρόνο μεταξύ χρηστών και εκπροσώπων εξυπηρέτησης πελατών ή ομάδων υποστήριξης, απευθείας εντός της εφαρμογής.

Οι χρήστες της δυνατότητας ζωντανής συνομιλίας μπορούν να κάνουν πιεστικές ερωτήσεις σχετικά με το προϊόν, να ρωτήσουν για περιοχές που δεν καταλαβαίνουν ή να αναφέρουν ένα πρόβλημα και να ζητήσουν λύσεις. Εν τω μεταξύ, οι ομάδες υποστήριξης πελατών σας μπορούν να παρέχουν σε πραγματικό χρόνο, λεπτομερή σχόλια, εξατομικευμένα για τον χρήστη.

Τα πλεονεκτήματα της ενσωμάτωσης μιας δυνατότητας ζωντανής συνομιλίας

Η ενσωμάτωση μιας δυνατότητας ζωντανής συνομιλίας μπορεί να αποφέρει πολλά οφέλη:

  • Βελτιώστε τις προσπάθειες εξυπηρέτησης πελατών. Ένα εξαιρετικό προϊόν είναι τόσο καλό όσο και η χρήση του. Η ενσωμάτωση μιας δυνατότητας ζωντανής συνομιλίας συμβάλλει στη σημαντική βελτίωση της εμπειρίας ενός χρήστη παρέχοντας έναν εύκολο τρόπο γρήγορης λήψης βοήθειας και απαντήσεων. Τελικά, αυτό θα σας βοηθήσει να προσφέρετε καλύτερες υπηρεσίες που εξορθολογίζουν τη χρήση του προϊόντος σας.
  • Αυξήστε την αφοσίωση των πελατών. Μια ζωντανή συνομιλία επιτρέπει στους χρήστες να αλληλεπιδρούν με την εφαρμογή σας σε πραγματικό χρόνο, κάνοντάς τους να αισθάνονται ότι τους εκτιμούν. Αυτό τους ωθεί να ασχοληθούν περισσότερο, να εγγραφούν και να δοκιμάσουν περισσότερες δυνατότητες.
  • Δημιουργήστε περισσότερους δυνητικούς πελάτες και αυξήστε τις πωλήσεις. Αυτό το κανάλι επικοινωνίας παρέχει μια λεωφόρο για να αλληλεπιδράσετε προσωπικά με τους χρήστες σας. Μπορείτε να χρησιμοποιήσετε αυτήν την ευκαιρία για να συλλάβετε δυνητικούς πελάτες και να τους μετατρέψετε σε πελάτες. Μπορείτε επίσης να παρέχετε προτάσεις προϊόντων και να τις πουλήσετε σε συγκεκριμένες συσκευασίες του προϊόντος σας.
  • Πηγή δεδομένων χρήστη. Στην ψηφιακή οικονομία, η πρόσβαση σε ακριβή δεδομένα σχετικά με τους χρήστες μπορεί να σας φέρει σημαντικά μπροστά από τον ανταγωνισμό. Όταν οι χρήστες σας ενημερώνουν για σφάλματα ή άλλα ζητήματα προϊόντων, αυτά τα σχόλια είναι εξαιρετικά πολύτιμα. Μπορείτε να μάθετε περισσότερα σχετικά με τον τρόπο αλληλεπίδρασης με την υπηρεσία σας και να τη χρησιμοποιήσετε για να βελτιώσετε το προϊόν σας.

Τι είναι το Chatwoot;

Το Chatwoot είναι μια πλατφόρμα εξυπηρέτησης πελατών ανοιχτού κώδικα που παρέχει έναν εξατομικευμένο τρόπο αλληλεπίδρασης με τους χρήστες σας. Παρέχει επίσης μια απλοποιημένη πλατφόρμα για να απαντάτε στα ερωτήματα των χρηστών και να παρέχετε σχόλια σε πολλά κανάλια σε πραγματικό χρόνο.

Μπορείτε να χρησιμοποιήσετε τα εργαλεία αυτοματοποίησης, ανάλυσης και αναφοράς για να αναλύσετε την αφοσίωση των χρηστών και να διαχειριστείτε εύκολα και αποτελεσματικά τις λειτουργίες εξυπηρέτησης πελατών.

Χρησιμοποιώντας αυτόν τον οδηγό, μπορείτε να ενσωματώσετε το Chatwoot με την εφαρμογή σας και να δοκιμάσετε τη δυνατότητα ζωντανής συνομιλίας με έναν πελάτη React και έναν πίνακα εργαλείων υποστήριξης πελατών.

Ρύθμιση έργου Chatwoot

Το Chatwoot παρέχει ένα προσαρμόσιμο πρόσθετο ζωντανής συνομιλίας που μπορείτε εύκολα να ενσωματώσετε στην εφαρμογή σας. Μπορείτε να το προσαρμόσετε όσο το δυνατόν περισσότερο για να ταιριάζει στις ανάγκες εξυπηρέτησης πελατών σας.

Μόλις ενσωματώσετε τον κώδικα της προσθήκης στην εφαρμογή σας, ένας χρήστης μπορεί να επικοινωνήσει με τις ομάδες υποστήριξης πελατών σας και να διαχειριστεί αυτές τις συνομιλίες από τον πίνακα ελέγχου του αντιπροσώπου του Chatwoot.

  1. Κατευθυνθείτε προς Ο ιστότοπος του Chatwoot, εγγραφείτε για έναν λογαριασμό και μεταβείτε στον πίνακα ελέγχου χρήστη.
  2. Για να διαχειριστείτε τις συνομιλίες των χρηστών σας, πρέπει πρώτα να ρυθμίσετε ένα φάκελο εισερχομένων και να το προσαρμόσετε με βάση αυτό που χρειάζεστε. Κάνε κλικ στο Νέα εισερχόμενα κουμπί για να ξεκινήσει.
  3. Τώρα, επιλέξτε το κανάλι στο οποίο θέλετε να ενσωματώσετε το Chatwoot. Για αυτόν τον οδηγό, επιλέξτε Δικτυακός τόπος αφού το ενσωματώνετε σε μια εφαρμογή React.
  4. Στη συνέχεια, συμπληρώστε τα στοιχεία του ιστότοπού σας. Για τοπική ανάπτυξη, μπορείτε να δοκιμάσετε τη δυνατότητα με μια διεύθυνση URL τοπικού τομέα κεντρικού υπολογιστή, ωστόσο, μόλις αναπτύξετε την παραγωγή, θυμηθείτε να ενημερώσετε τον τομέα με τη ζωντανή διεύθυνση URL.
  5. Τέλος, προσθέστε έναν/τους πράκτορες για τη διαχείριση των συνομιλιών σε αυτά τα εισερχόμενα. Αυτό μπορεί να είναι μέλος της ομάδας υποστήριξης πελατών σας.

Ρυθμίσατε με επιτυχία τη ζωντανή συνομιλία του Chatwoot με τον ιστότοπό σας να έχει οριστεί ως κανάλι επικοινωνίας. Το Chatwoot θα δημιουργήσει τον κώδικα που πρέπει να ενσωματώσετε στην εφαρμογή σας για να προσθέσετε το γραφικό στοιχείο της δυνατότητας ζωντανής συνομιλίας. Αυτός ο κώδικας είναι πολύ ευέλικτος, καθώς τον ενσωματώνετε εύκολα σε ένα πρόγραμμα-πελάτη Ιστού που έχει δημιουργηθεί με οποιοδήποτε από τα Πλαίσια frontend JavaScript.

Εάν θέλετε να προσαρμόσετε περαιτέρω τη ρύθμιση, κάντε κλικ στο Περισσότερες ρυθμίσεις κουμπί.

React Project Setup

Δημιουργήστε μια εφαρμογή React και ενσωματώστε την προσθήκη ζωντανής συνομιλίας του Chatwoot για να δοκιμάσετε τη δυνατότητα. Δημιουργήστε μια εφαρμογή React και δημιουργήστε ένα αρχείο ENV στον ριζικό κατάλογο του φακέλου του έργου σας για να κρατήσετε το διακριτικό του ιστότοπού σας.

REACT_APP_WEBSITE_TOKEN = διακριτικό

Στη συνέχεια, στο src κατάλογο, δημιουργήστε έναν νέο φάκελο και ονομάστε τον συστατικά στοιχεία. Σε αυτόν τον φάκελο δημιουργήστε ένα νέο αρχείο: Livechat.js.

Προσθέστε τον ακόλουθο κώδικα σε αυτό το αρχείο:

εισαγωγή React, {useEffect} από'αντιδρώ'
λειτουργίαΖωντανή συζήτηση () {
 useEffect(() => {
παράθυρο.chatwootSettings = {
 hideMessageBubble: ψευδής,
 θέση: "σωστά", 
 μικρός λοβός: "en", 
τύπος: "πρότυπο"
 };

 (λειτουργία(δ, τ) {
var BASE_URL = " https://app.chatwoot.com";
var g = d.createElement (t), s = d.getElementsByTagName (t)[0];
 g.src = BASE_URL + "/packs/js/sdk.js";
 ζ.αναβάλλω = αληθής;
 ζ.ασυγχρονισμός = αληθής;
μικρό.parentNode.insertBefore(σολ, μικρό);


 g.onload = λειτουργία() {
παράθυρο.chatwootSDK.τρέξιμο({
websiteToken: επεξεργάζομαι, διαδικασία.env.REACT_APP_WEBSITE_TOKEN,
 baseUrl: BASE_URL
 })
 }
 })(έγγραφο, "γραφή");
 }, []);


ΕΠΙΣΤΡΟΦΗμηδενικό;
};
εξαγωγήΠροκαθορισμένο Ζωντανή συζήτηση;

Αυτός ο κώδικας ενσωματώνει τη δυνατότητα Live chat του Chatwoot στην εφαρμογή React. Το άγκιστρο useEffect εκτελεί τον κωδικό μέσα στην επανάκληση μία φορά κατά την προσάρτηση του στοιχείου. Αρχικά, αρχικοποιεί τις ρυθμίσεις του Chatwoot για τη δυνατότητα. Στη συνέχεια, εκτελεί τη λειτουργία προσθήκης, που παρέχεται από το Chatwoot, που ρυθμίζει το γραφικό στοιχείο ζωντανής συνομιλίας στη σελίδα.

Μεταβιβάζει το websiteToken ως παράμετρο στη συνάρτηση chatwootSDK.run που συνδέει την εφαρμογή με τον λογαριασμό σας στο Chatwoot. Τέλος, η συνάρτηση Ζωντανής συνομιλίας επιστρέφει μηδενική, καθώς δεν απαιτείται να αποδώσετε στοιχεία HTML.

Δοκιμάστε τη λειτουργία ζωντανής συνομιλίας

  1. Εισαγάγετε αυτό το στοιχείο στο δικό σας app.js αρχείο και περιστρέψτε τον διακομιστή ανάπτυξης για να ενημερώσετε τις αλλαγές που έγιναν. Θα πρέπει να δείτε το γραφικό στοιχείο ζωντανής συνομιλίας στο React σας να εκτελείται στο πρόγραμμα περιήγησης.
  2. Για να δοκιμάσετε τη δυνατότητα ζωντανής συνομιλίας, κάντε κλικ στο γραφικό στοιχείο για να ανοίξετε τον τοίχο συνομιλίας και πληκτρολογήστε ένα μήνυμα.
  3. Τώρα, μεταβείτε στον πίνακα ελέγχου χρήστη του Chatwoot και πλοηγηθείτε στα εισερχόμενά σας, θα δείτε ένα νέο μήνυμα. Από προεπιλογή, το Chatwoot θα δημιουργήσει ορισμένα μηνύματα και θα απαντήσει αυτόματα αμέσως αφού ένας χρήστης στείλει ένα μήνυμα, όπως αυτά που βλέπετε παρακάτω. Πληκτρολογήστε μια απάντηση στο μήνυμα και κάντε κλικ στην αποστολή. Επιστρέψτε στον τοίχο συνομιλίας του widget στην εφαρμογή σας για να δείτε την απάντηση.

Έχετε ενσωματώσει με επιτυχία μια δυνατότητα ζωντανής συνομιλίας στην εφαρμογή σας με πολύ λίγες γραμμές κώδικα.

Αξίζει μια λειτουργία ζωντανής συνομιλίας;

Μια δυνατότητα ζωντανής συνομιλίας είναι ένας πολύ καλός τρόπος για την παροχή εξυπηρέτησης πελατών, την αύξηση της ικανοποίησης των πελατών και τη βελτίωση της εμπειρίας χρήστη.

Παρέχει ένα κανάλι επικοινωνίας με τη δυνατότητα αύξησης της αφοσίωσης, μείωσης του χρόνου απόκρισης και εξατομίκευσης της υποστήριξης πελατών. Τελικά, θα σας βοηθήσει να βελτιώσετε τις λειτουργίες εξυπηρέτησης πελατών με λίγη προσπάθεια.