JavaScript API Live Chat
Χρησιμοποιήστε το JavaScript API του onWebChat για να προσαρμόσετε το widget chat σας και να αυτοματοποιήσετε τις ροές εργασίας σας. Μπορείτε να μεταβιβάσετε δεδομένα επισκέπτη, να ορίσετε τη γλώσσα του widget, να μεγιστοποιήσετε ή να κρύψετε το widget και άλλα.
Για παράδειγμα, μπορείτε να στείλετε στοιχεία του επισκέπτη στο chat, να ορίσετε τη γλώσσα ανά σελίδα ή να ανοίξετε το widget προγραμματιστικά όταν ένας χρήστης κάνει κλικ σε ένα κουμπί.
Προσθέστε τον κώδικα API αμέσως κάτω από το script του widget chat, όπως φαίνεται στα δεξιά.
<script type='text/javascript'>
/* Επικολλήστε εδώ τον κώδικα εγκατάστασης του widget του onWebChat από τον πίνακα ελέγχου. */
</script>
<script type='text/javascript'>
/* Προσθέστε παρακάτω τις κλήσεις του JavaScript API, για παράδειγμα onWebChat.set() ή onWebChat.get() */
</script>
Ορισμός στοιχείων επισκέπτη
Μπορείτε να ορίσετε στοιχεία επισκέπτη πριν ή κατά τη διάρκεια μιας συνεδρίας chat. Για παράδειγμα, ο ορισμός του ονόματος βοηθά την ομάδα σας να αναγνωρίζει επαφές στη λίστα επισκέπτων.
Χρησιμοποιήστε τις ακόλουθες κλήσεις API για να ορίσετε όνομα, email, τηλέφωνο και σημειώσεις επισκέπτη:
onWebChat.set("name","Sarah Chen");
onWebChat.set("email","sarah.chen@example.com");
onWebChat.set("phone","+1 555 010 0142");
onWebChat.set("notes","Returning visitor, requested an Enterprise trial");
Λήψη στοιχείων επισκέπτη
Μπορείτε να διαβάσετε το όνομα, το email, το τηλέφωνο και τις σημειώσεις του επισκέπτη, εφόσον αυτές οι τιμές έχουν καταχωρηθεί μέσω αυτού του JavaScript API, έχουν συλλεχθεί από τη φόρμα pre-chat ή έχουν ενημερωθεί από τους εκπροσώπους στον πίνακα ελέγχου.
Καλέστε αυτές τις συναρτήσεις μετά την πλήρη φόρτωση του widget. Παράδειγμα:
onWebChat.set("onWebChatLoaded", function() { console.log("visitor name: " + onWebChat.get("name")); });
onWebChat.get("name");
onWebChat.get("email");
onWebChat.get("phone");
onWebChat.get("notes");
Ορισμός γλώσσας widget
Ορίστε τη γλώσσα του widget χρησιμοποιώντας τον κωδικό γλώσσας για οποιαδήποτε γλώσσα ενεργοποιημένη στον πίνακα ελέγχου σας.
Για παράδειγμα, "el" για ελληνικά, "en" για αγγλικά και "es" για ισπανικά. Αν ένας κωδικός δεν είναι ενεργός, το widget χρησιμοποιεί την προεπιλεγμένη σας γλώσσα. Χωρίς αυτή την κλήση, το widget χρησιμοποιεί τη γλώσσα του browser του επισκέπτη, όταν την έχετε ενεργοποιήσει. Μπορείτε να διαχειρίσετε τις ενεργές γλώσσες και την προεπιλεγμένη γλώσσα στις Ρυθμίσεις > Widget > Γλώσσες.
Διαθέσιμοι κωδικοί γλωσσών:
onWebChat.set("language","es");
Ορισμός εμφάνισης widget
Μπορείτε να ελέγξετε αν το widget είναι ορατό και αν είναι ανοιχτό ή κλειστό:
Χρησιμοποιήστε την παράμετρο max με 0 για ελαχιστοποίηση ή 1 για μεγιστοποίηση του widget.
Για να αποκρύψετε εντελώς το widget, χρησιμοποιήστε την παράμετρο show με τιμή 0. Χρησιμοποιήστε 1 για να το εμφανίσετε ξανά.
onWebChat.set("max",1);
onWebChat.set("show",0);
Ορισμός μεγέθους widget
Σε μια συγκεκριμένη σελίδα, μπορείτε να εμφανίσετε το widget σε οποιοδήποτε από τα τρία μεγέθη των Ρυθμίσεων > Widget > Ρυθμίσεις widget, χωρίς να αλλάξετε το μέγεθος που είναι αποθηκευμένο στον λογαριασμό σας.
Χρησιμοποιήστε την παράμετρο size με τιμή "standard" (το μέγεθος Small στον πίνακα ελέγχου), "large" ή "xlarge" (Extra Large). Είναι χρήσιμο σε σελίδες με λίγο ελεύθερο χώρο ή σε μια σελίδα προορισμού όπου θέλετε μεγαλύτερο widget.
Σημαντικό: προσθέστε την κλήση ακριβώς κάτω από το script του widget, πριν φορτώσει το widget. Το widget δημιουργείται μία φορά, κατά τη φόρτωση, οπότε ένα μέγεθος που ορίζεται αργότερα αγνοείται.
onWebChat.set("size","standard");
onWebChat.set("size","large");
onWebChat.set("size","xlarge");
Αλλαγή κειμένων widget
Μπορείτε να αντικαταστήσετε τα κείμενα του widget σε μια συγκεκριμένη σελίδα, για παράδειγμα έναν διαφορετικό χαιρετισμό στη σελίδα με τις τιμές σας. Τα νέα κείμενα ισχύουν μόνο σε αυτή τη σελίδα και δεν αποθηκεύονται στον πίνακα ελέγχου.
Χρησιμοποιήστε την παράμετρο texts με ένα αντικείμενο που περιέχει τα πεδία που θέλετε να αλλάξετε, όπως max_title, max_subtitle, min_online, min_offline, off_title, off_subtitle, off_msg ή prechat_msg.
Ένα κείμενο που δίνεται ως string χρησιμοποιείται σε όλες τις γλώσσες του widget. Για να αλλάξετε μία μόνο γλώσσα, περάστε ένα αντικείμενο με τους κωδικούς γλώσσας, όπως στο δεύτερο παράδειγμα.
Μπορείτε να την καλέσετε κάτω από το script του widget, πριν αυτό φορτώσει, ή οποιαδήποτε στιγμή μετά: το widget σχεδιάζεται ξανά με τα νέα κείμενα.
onWebChat.set("texts",{
max_title: "Need help?",
max_subtitle: "We usually reply in a minute"
});
onWebChat.set("texts",{
min_online: { en: "Chat with us", es: "Chatea con nosotros" }
});
Ορισμός χρωμάτων widget
Σε μια συγκεκριμένη σελίδα, μπορείτε να δώσετε στην κεφαλίδα του widget ένα χρώμα όταν το chat σας είναι online και ένα άλλο όταν είναι offline. Χρησιμοποιήστε τις παραμέτρους onlineColor και offlineColor με οποιοδήποτε χρώμα CSS, όπως "#2e7d32".
Τα χρώματα χρησιμοποιούνται μόνο σε εκείνη τη σελίδα και δεν αλλάζουν το χρώμα που είναι αποθηκευμένο στις Ρυθμίσεις > Widget > Ρυθμίσεις widget. Μπορείτε να τα ορίσετε πριν φορτωθεί το widget ή οποιαδήποτε στιγμή μετά. Το χρώμα offline χρησιμοποιείται και για το κουμπί Αποστολής της φόρμας offline.
onWebChat.set("onlineColor","#2e7d32");
onWebChat.set("offlineColor","#757575");
Ορισμός πληροφοριών σελίδας
Μπορείτε να αντικαταστήσετε το τρέχον URL και τίτλο σελίδας που στέλνονται στο onWebChat:
Χρησιμοποιήστε την παράμετρο pageUrl για να ορίσετε ένα προσαρμοσμένο URL που θα βλέπουν οι εκπρόσωποι στον πίνακα ελέγχου. Χρήσιμο για single-page εφαρμογές (SPA) ή προσαρμοσμένο routing.
Χρησιμοποιήστε την παράμετρο pageTitle για ορισμό προσαρμοσμένου τίτλου που θα βλέπουν οι εκπρόσωποι αντί για τον τίτλο σελίδας του browser.
onWebChat.set("pageUrl","https://www.example.com/checkout/step-2");
onWebChat.set("pageTitle","Checkout: shipping details");
Λήψη κατάστασης widget
Επιστρέφει "online" ή "offline" ανάλογα με την τρέχουσα διαθεσιμότητα του chat σας.
Καλέστε μετά τη φόρτωση του widget. Παράδειγμα:
onWebChat.set("onWebChatLoaded", function() { console.log("chat status: " + onWebChat.get("status")); });
onWebChat.get("status");
Κατάσταση σύνδεσης
Επιστρέφει true εάν το widget chat έχει ενεργή σύνδεση socket με τον διακομιστή, ή false σε αντίθετη περίπτωση. Χρήσιμο για έλεγχο συνδεσιμότητας πριν από ενέργειες.
onWebChat.get("isConnected");
Κατάσταση ανοιχτού/κλειστού widget
Επιστρέφει true εάν το widget chat είναι μεγιστοποιημένο (ανοιχτό) ή false εάν είναι ελαχιστοποιημένο (κλειστό).
onWebChat.get("isMaximized");
Λήψη ID διαλόγου
Επιστρέφει το τρέχον ενεργό ID διαλόγου ή 0 εάν δεν υπάρχει ενεργός διάλογος. Είναι το ίδιο ID με το chat_id στα webhook payloads, γι' αυτό είναι χρήσιμο για ενσωματώσεις που πρέπει να συνδέσουν μια συνεδρία chat με CRM ή σύστημα ticketing.
onWebChat.get("dialogId");
Αποστολή μηνύματος
Μπορείτε να στείλετε μήνυμα chat εκ μέρους του επισκέπτη προγραμματιστικά. Χρήσιμο για δημιουργία ροών βοήθειας, π.χ. αποστολή "Χρειάζομαι βοήθεια με την παραγγελία μου" όταν ο επισκέπτης πατήσει ένα κουμπί.
Το μήνυμα εμφανίζεται στο chat σαν να το έγραψε ο επισκέπτης και ανοίγει το παράθυρο συνομιλίας. Το widget πρέπει να έχει φορτωθεί και να είναι συνδεδεμένο. Για την αποφυγή κατάχρησης, το widget στέλνει με αυτόν τον τρόπο το πολύ 3 μηνύματα ανά δευτερόλεπτο, 8 ανά λεπτό και 30 ανά ώρα.
onWebChat.set("sendMessage","I need help with my order");
Ορισμός τμήματος
Μπορείτε να προεπιλέξετε τμήμα για τον επισκέπτη ανάλογα με το περιβάλλον σελίδας. Π.χ. αυτόματη δρομολόγηση επισκεπτών στη σελίδα τιμών στις "Πωλήσεις" και στη σελίδα βοήθειας στην "Υποστήριξη".
Μπορείτε να περάσετε είτε το όνομα τμήματος (string) είτε το ID τμήματος (number). Το όνομα πρέπει να αντιστοιχεί σε ένα από τα τμήματα που έχουν ρυθμιστεί στον πίνακα ελέγχου σας.
Μπορείτε να βρείτε το ID τμήματος στον πίνακα ελέγχου σας: πηγαίνετε στις Ρυθμίσεις > Ομάδα > Τμήματα και κάντε κλικ σε ένα τμήμα. Το ID εμφανίζεται δίπλα στο όνομα του τμήματος.
Δεν χρειάζεται να ενεργοποιήσετε την επιλογή τμημάτων στη φόρμα pre-chat: ο ορισμός τμήματος μέσω του JavaScript API λειτουργεί αυτόνομα.
Αν κανένας εκπρόσωπος του επιλεγμένου τμήματος δεν είναι online, το μήνυμα παραδίδεται σε όλους τους συνδεδεμένους εκπροσώπους. Αν το AI chatbot είναι ενεργό, δεν απαντά όσο είναι online κάποιος εκπρόσωπος του τμήματος και απαντά στον επισκέπτη όταν δεν είναι online κανείς.
Για περισσότερες πληροφορίες σχετικά με τα τμήματα, δείτε τον οδηγό τμημάτων μας.
onWebChat.set("department","Sales");
onWebChat.set("department",1333);
Συναρτήσεις Callback
Μπορείτε να εκτελέσετε συναρτήσεις callback όταν συμβαίνουν συγκεκριμένα chat events:
onClick εκτελείται όταν ο επισκέπτης κάνει κλικ στο widget chat
onMaximize εκτελείται όταν το widget μεγιστοποιείται
onMinimize εκτελείται όταν το widget ελαχιστοποιείται
onTrigger εκτελείται όταν ενεργοποιείται ένα trigger engagement ή exit-intent, ακόμη και όταν το widget είναι κρυφό με το show ορισμένο σε 0
onStartWriting εκτελείται όταν ο επισκέπτης αρχίζει να πληκτρολογεί (μία φορά ανά συνεδρία browser)
onNewMessage εκτελείται όταν αποστέλλεται ή λαμβάνεται νέο μήνυμα. Το callback δέχεται δύο ορίσματα: το κείμενο του μηνύματος και ποιος το έστειλε ("visitor", "agent", ή "bot")
onEndChat εκτελείται όταν τερματίζεται η συνομιλία. Το callback δέχεται ένα όρισμα: ποιος την τερμάτισε ("visitor", "agent", ή "bot")
onChatStatusChange εκτελείται όταν η κατάσταση του chat widget αλλάζει σε online ή offline. Το callback δέχεται ένα όρισμα: τη νέα κατάσταση ("online" ή "offline")
onWebChatLoaded εκτελείται όταν το widget chat ολοκληρώσει τη φόρτωση
onWebChat.set("onClick",function(){ alert('chat widget is clicked'); });
onWebChat.set("onMaximize",function(){ alert('chat maximized'); });
onWebChat.set("onMinimize",function(){ alert('chat minimized'); });
onWebChat.set("onTrigger",function(){ alert('trigger activated'); });
onWebChat.set("onStartWriting",function(){ alert('visitor is writing'); });
onWebChat.set("onNewMessage",function(msg, by){
console.log('new message by ' + by + ': ' + msg);
});
onWebChat.set("onEndChat",function(endedBy){
console.log('chat ended by ' + endedBy);
});
onWebChat.set("onChatStatusChange",function(status){
console.log('agents are now ' + status);
});
onWebChat.set("onWebChatLoaded",function(){ alert('chat widget is loaded'); });