Πώς να Προσθέσετε το AI Chatbot του Asyntai στο BigCommerce

Οδηγός βήμα προς βήμα για καταστήματα BigCommerce

Πλατφόρμα:

Βήμα 1: Αποκτήστε τον Κωδικό Ενσωμάτωσής σας

Πρώτα, μεταβείτε στον Πίνακα Ελέγχου Asyntai και κάντε κύλιση προς τα κάτω στην ενότητα «Κωδικός Ενσωμάτωσης». Αντιγράψτε τον μοναδικό κωδικό ενσωμάτωσής σας που θα μοιάζει ως εξής:

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Σημείωση: Ο παραπάνω κώδικας είναι απλώς ένα παράδειγμα. Πρέπει να αντιγράψετε τον δικό σας μοναδικό κωδικό ενσωμάτωσης από τον Πίνακα Ελέγχου σας, καθώς περιέχει το προσωπικό σας αναγνωριστικό widget.

Βήμα 2: Επιλέξτε Μέθοδο Εγκατάστασης

Υπάρχουν πολλοί τρόποι για να προσθέσετε το chat widget στο BigCommerce. Επιλέξτε τη μέθοδο που λειτουργεί καλύτερα για εσάς:

Μέθοδος 1: Χρήση Script Manager (Προτεινόμενο)

Ο Script Manager είναι ο ευκολότερος και προτεινόμενος τρόπος για να προσθέσετε προσαρμοσμένα σενάρια στο κατάστημά σας BigCommerce. Δεν απαιτεί γνώσεις κωδικοποίησης και διατηρείται κατά τις αλλαγές θέματος.

Συνδεθείτε στον Πίνακα Ελέγχου BigCommerce
Μεταβείτε στο Storefront → Script Manager
Κάντε κλικ στο κουμπί «Δημιουργία Σεναρίου»
Διαμορφώστε το σενάριό σας με αυτές τις ρυθμίσεις:
- Όνομα: Asyntai AI Chatbot
- Περιγραφή: Chat widget με τεχνητή νοημοσύνη (προαιρετικό)
- Τοποθέτηση: Υποσέλιδο
- Τοποθεσία: Όλες οι Σελίδες
- Κατηγορία Σεναρίου: Λειτουργική
- Τύπος Σεναρίου: Σενάριο
Στο πλαίσιο «Περιεχόμενα Σεναρίου», επικολλήστε τον κωδικό ενσωμάτωσης Asyntai
Κάντε κλικ στο «Αποθήκευση»

Γιατί να χρησιμοποιήσετε τον Script Manager; Τα σενάρια που προστίθενται μέσω του Script Manager διαχειρίζονται ξεχωριστά από το θέμα σας. Δεν θα επηρεαστούν όταν ενημερώσετε ή αλλάξετε το θέμα του καταστήματός σας.

Μέθοδος 2: Χρήση Page Builder

Μπορείτε να χρησιμοποιήσετε το Page Builder του BigCommerce για να προσθέσετε το chat widget χρησιμοποιώντας ένα στοιχείο HTML. Αυτή η μέθοδος είναι χρήσιμη εάν θέλετε περισσότερο έλεγχο πάνω στο πού εμφανίζεται το widget.

Συνδεθείτε στον Πίνακα Ελέγχου BigCommerce
Μεταβείτε στο Storefront → Τα Θέματά Μου
Κάντε κλικ στο κουμπί «Προσαρμογή» στο ενεργό θέμα σας
Στο αριστερό πλαϊνό μενού του Page Builder, βρείτε το στοιχείο «HTML»
Σύρετε και αποθέστε το στοιχείο HTML στην περιοχή υποσέλιδου του προτύπου σελίδας σας
Click on the HTML element and select "Edit HTML"
Επικολλήστε τον κωδικό ενσωμάτωσης Asyntai
Κάντε κλικ στο «Αποθήκευση HTML»
Click "Publish" to apply changes to your live store

Σημείωση: Εάν θέλετε το chatbot σε όλες τις σελίδες, θα πρέπει να το προσθέσετε σε μια καθολική περιοχή όπως το υποσέλιδο. Η μέθοδος Script Manager είναι ευκολότερη για εγκατάσταση σε όλο τον ιστότοπο.

Μέθοδος 3: Επεξεργασία Αρχείων Θέματος (Θέματα Stencil)

Για προγραμματιστές που χρησιμοποιούν θέματα Stencil, μπορείτε να προσθέσετε τον κώδικα απευθείας στα αρχεία θέματός σας. Αυτό απαιτεί πρόσβαση στα πηγαία αρχεία του θέματός σας.

Χρήση Πίνακα Ελέγχου BigCommerce

Μεταβείτε στο Storefront → Τα Θέματά Μου
Κάντε κλικ στο «Για Προχωρημένους» στο ενεργό θέμα σας
Επιλέξτε «Επεξεργασία Αρχείων Θέματος»
Μεταβείτε στο templates → components → common
Ανοίξτε το footer.html
Κάντε κύλιση στο κάτω μέρος του αρχείου
Paste your Asyntai embed code just before the closing tag
Κάντε κλικ στο «Αποθήκευση και Εφαρμογή Αρχείου»

Χρήση Stencil CLI (Τοπική Ανάπτυξη)

Εάν αναπτύσσετε τοπικά με το Stencil CLI:

Ανοίξτε τα τοπικά αρχεία του θέματός σας
Μεταβείτε στο templates/components/common/footer.html
Προσθέστε τον κωδικό ενσωμάτωσης Asyntai πριν από τις ετικέτες κλεισίματος
Ανεβάστε τις αλλαγές σας χρησιμοποιώντας stencil push

Σημαντικό: Οι αλλαγές στα αρχεία θέματος μπορεί να αντικατασταθούν κατά την ενημέρωση του θέματός σας. Για μια μόνιμη λύση που διατηρείται κατά τις ενημερώσεις θέματος, χρησιμοποιήστε τη μέθοδο Script Manager.

Βήμα 3: Επαληθεύστε την Εγκατάσταση

Αφού προσθέσετε τον κώδικα, επισκεφθείτε το κατάστημά σας BigCommerce σε μια νέα καρτέλα προγράμματος περιήγησης ή παράθυρο ανώνυμης περιήγησης. Θα πρέπει να δείτε το κουμπί chat widget στην κάτω δεξιά γωνία του καταστήματός σας. Κάντε κλικ σε αυτό για να βεβαιωθείτε ότι ανοίγει και λειτουργεί σωστά.

Δεν βλέπετε το widget; Εκκαθαρίστε την προσωρινή μνήμη του προγράμματος περιήγησης και δοκιμάστε ξανά. Εάν κάνατε αλλαγές μέσω του Theme Editor, βεβαιωθείτε ότι κάνατε κλικ στο «Δημοσίευση» για να εφαρμόσετε τις αλλαγές στο ζωντανό κατάστημά σας.

Τεκμηρίωση