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

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

Πλατφόρμα:

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

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

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

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

Βήμα 2: Προσθήκη Κώδικα Χρησιμοποιώντας Στοιχείο Σελίδας (Προτεινόμενο)

Η προτεινόμενη μέθοδος είναι να προσθέσετε τον κώδικα chatbot στην ενότητα head του στοιχείου σελίδας AEM για εγκατάσταση σε όλο τον ιστότοπο:

Συνδεθείτε στο AEM Author instance σας
Μεταβείτε στο CRXDE Lite (συνήθως στο http://your-aem-instance:4502/crx/de)
Εντοπίστε το πρότυπο στοιχείου σελίδας σας (συνήθως υπό /apps/your-project/components/page)
Βρείτε ή δημιουργήστε το αρχείο head.html ή headerlibs.html
Προσθέστε τον κωδικό ενσωμάτωσης Asyntai σε αυτό το αρχείο
Κάντε κλικ στο «Αποθήκευση Όλων» στο επάνω μενού
Αναπαράγετε τις αλλαγές στο publish instance σας

Συμβουλή: Η τοποθέτηση του κώδικα στο αρχείο head.html διασφαλίζει ότι το chatbot εμφανίζεται σε όλες τις σελίδες που χρησιμοποιούν αυτό το πρότυπο. Αυτή είναι η πιο καθαρή προσέγγιση για εγκατάσταση σε όλο τον ιστότοπο.

Εναλλακτική Μέθοδος 1: Βιβλιοθήκες Πελάτη (ClientLibs)

Για μια πιο δομημένη προσέγγιση, μπορείτε να χρησιμοποιήσετε το σύστημα Βιβλιοθηκών Πελάτη του AEM:

Δημιουργήστε έναν νέο φάκελο βιβλιοθήκης πελάτη υπό /apps/your-project/clientlibs
Ορίστε τον τύπο κόμβου cq:clientLibraryFolder
Δημιουργήστε ένα αρχείο js.txt που παραθέτει τα αρχεία JavaScript σας
Προσθέστε τον κωδικό ενσωμάτωσης Asyntai σε ένα αρχείο JavaScript σε αυτόν τον φάκελο
Συμπεριλάβετε τη βιβλιοθήκη πελάτη στο στοιχείο σελίδας σας χρησιμοποιώντας:

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"
     data-sly-call="${clientlib.js @ categories='your-category-name'}" />

Σημείωση: Αυτή η μέθοδος συνιστάται για έργα με υπάρχουσα δομή ClientLib και παρέχει καλύτερη οργάνωση για μεγαλύτερες υλοποιήσεις.

Εναλλακτική Μέθοδος 2: Διαχείριση Ετικετών (Adobe Launch)

Εάν χρησιμοποιείτε το Adobe Launch (πρώην DTM) ή άλλο διαχειριστή ετικετών:

Συνδεθείτε στο Adobe Experience Platform Launch
Μεταβείτε στην ιδιότητά σας
Μεταβείτε στους Κανόνες και δημιουργήστε έναν νέο κανόνα
Ορίστε το συμβάν σε «Page Bottom» ή «DOM Ready»
Προσθέστε μια ενέργεια: Προσαρμοσμένος Κώδικας
Επικολλήστε τον κωδικό ενσωμάτωσης Asyntai
Αποθηκεύστε και δημοσιεύστε τη βιβλιοθήκη

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

Εναλλακτική Μέθοδος 3: Experience Fragment

Για ευέλικτη, φιλική προς τον συντάκτη υλοποίηση:

Μεταβείτε στα Experience Fragments στο AEM
Δημιουργήστε ένα νέο Experience Fragment
Προσθέστε ένα στοιχείο κειμένου ή στοιχείο HTML
Μεταβείτε σε λειτουργία πηγαίου κώδικα HTML
Επικολλήστε τον κωδικό ενσωμάτωσης Asyntai
Συμπεριλάβετε αυτό το Experience Fragment στο υποσέλιδο του προτύπου σελίδας σας

Σημαντικό: Βεβαιωθείτε ότι έχετε τα κατάλληλα δικαιώματα AEM για να τροποποιήσετε πρότυπα και στοιχεία. Για AEM ως Cloud Service, οι αλλαγές μπορεί να χρειαστεί να περάσουν από τη διοχέτευση CI/CD σας.

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

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

Δεν βλέπετε το widget; Ελέγξτε την κονσόλα του προγράμματος περιήγησης (F12) για σφάλματα JavaScript. Επαληθεύστε ότι ο κώδικας αναπτύχθηκε σωστά στο publish instance σας. Για AEM ως Cloud Service, βεβαιωθείτε ότι οι αλλαγές σας πέρασαν επιτυχώς από τη διοχέτευση ανάπτυξης.