Η ενσωμάτωση του agent του Napster Agents στη δική σας ιστοσελίδα είναι απλή και δεν απαιτεί ιδιαίτερη προσπάθεια.
Αυτός ο οδηγός καλύπτει όλα όσα χρειάζεστε για να λειτουργήσει άψογα η ενσωματωμένη εμπειρία σας — συμπεριλαμβανομένης της πρόσβασης στο μικρόφωνο, των ρυθμίσεων cookies και της προαιρετικής παρακολούθησης email — ώστε οι επισκέπτες σας να μπορούν να αλληλεπιδρούν φυσικά και χωρίς εμπόδια.
1. Λάβετε τον σωστό κώδικα ενσωμάτωσης
Κάθε ιστοσελίδα είναι διαφορετική, γι' αυτό το Napster Agents σάς προσφέρει δύο εύκολες επιλογές ενσωμάτωσης.
Όταν ανοίγετε τον πίνακα Επιλογές ενσωμάτωσης στο προϊόν, θα δείτε:
- Ενσωματούμενη ενότητα (embeddable module) – η πλήρης εμπειρία με φόντο και κάρτες (εφόσον είναι ενεργοποιημένες), ιδανική για την τοποθέτηση στη σελίδα ως ξεχωριστή ενότητα.
-
Μόνο ο agent – μια ελάχιστη έκδοση που εστιάζει αποκλειστικά στον agent βίντεο, ιδανική για γωνίες, πλαϊνές μπάρες ή μικρότερες διατάξεις.
Αφού επιλέξετε τη μορφή που ταιριάζει στην ιστοσελίδα σας, κάντε κλικ στο Αντιγραφή για να λάβετε τον προσωπικό σας κώδικα <iframe>.
Επικολλήστε τον στο HTML της ιστοσελίδας σας εκεί όπου θέλετε να εμφανίζεται η εμπειρία — και είστε έτοιμοι.
(Δεν χρειάζεται να επεξεργαστείτε τον κώδικα με το χέρι, εκτός αν σας το προτείνει η ομάδα υποστήριξής μας.)
Δείγμα κώδικα:
<iframe
src="ID εμπειρίας]"
style="width: 1280px; position: fixed; bottom: 0; right: 20px; aspect-ratio: 16/9; background: transparent; z-index: 9999999;"
frameborder="0"
allow="microphone; camera; autoplay; clipboard-write; encrypted-media; display-capture; picture-in-picture"
allowtransparency="true"
allowfullscreen
referrerpolicy="no-referrer-when-downgrade"
title="Napster Spaces Experience"
> </iframe>
2. Επιτρέψτε στον agent σας να μιλά και να ακούει
Για να ενεργοποιήσετε τις λειτουργίες φωνής και βίντεο, η ιστοσελίδα σας πρέπει να επιτρέπει στο iframe να έχει πρόσβαση στο μικρόφωνο και την κάμερα του επισκέπτη. (Η κάμερα χρησιμοποιείται μόνο όταν είναι ενεργοποιημένη η αναγνώριση προσώπου, για καλύτερη καταστολή θορύβου σε δυνατό περιβάλλον.)
Χαρακτηριστικά του iFrame
Βεβαιωθείτε ότι το iframe σας περιλαμβάνει:
allow="microphone; camera; autoplay; clipboard-write; encrypted-media; display-capture; picture-in-picture"Κεφαλίδα πολιτικής δικαιωμάτων (Permissions Policy)
Αν η ιστοσελίδα σας χρησιμοποιεί κεφαλίδες ασφαλείας, βεβαιωθείτε ότι περιλαμβάνουν το Napster Agents ως εγκεκριμένη προέλευση:
Permissions-Policy:
microphone=(self "https://spaces.napster.ai" "https://spaces-embed.napster.ai"),
camera=(self "https://spaces.napster.ai" "https://spaces-embed.napster.ai")Αν αυτά τα δικαιώματα λείπουν, τα προγράμματα περιήγησης θα μπλοκάρουν σιωπηλά την πρόσβαση στο μικρόφωνο — και οι επισκέπτες σας δεν θα καταλαβαίνουν γιατί ο agent δεν ξεκινά.
3. Εργαλεία cookies και συγκατάθεσης
Αν η ιστοσελίδα σας χρησιμοποιεί πρόσθετο διαχείρισης cookies ή συγκατάθεσης, ενδέχεται να μπλοκάρει περιεχόμενο τρίτων μέχρι ο χρήστης να δώσει άδεια. Αυτό διορθώνεται εύκολα — απλώς ενημερώστε το πρόσθετο ότι το Napster είναι αξιόπιστη πηγή.
Παράδειγμα:
Ένας πελάτης που ενσωμάτωνε το Napster Agents σε ιστοσελίδα WordPress διαπίστωσε ότι το πρόσθετο Cookie Bot μπλόκαρε εξ ορισμού το περιεχόμενο τρίτων. Αφού πρόσθεσε το napster.ai ως αξιόπιστο domain, η πρόσβαση στο iframe και στο μικρόφωνο λειτούργησε κανονικά.
Αν δεν είστε σίγουροι πώς να προσθέσετε το Napster στη λίστα επιτρεπόμενων, ο διαχειριστής της ιστοσελίδας σας ή η τεκμηρίωση του πρόσθετου μπορεί να σας βοηθήσει να εντοπίσετε τις ρυθμίσεις «Αξιόπιστα domains» ή «Αποκλεισμός scripts».
4. Πρόσθετα lazy-loading και βελτιστοποίησης (WordPress)
Πολλές ιστοσελίδες WordPress χρησιμοποιούν πρόσθετα απόδοσης που εφαρμόζουν «lazy-load» (αργή φόρτωση) σε εικόνες και ενσωματωμένο περιεχόμενο, κρατώντας το περιεχόμενο πίσω μέχρι ο επισκέπτης να κάνει κύλιση κοντά σε αυτό. Αυτό βοηθά στις εικόνες, αλλά μπορεί να χαλάσει το iframe του Napster Agent. Το πρόσθετο αντικαθιστά την πραγματική διεύθυνση του iframe με ένα μικροσκοπικό placeholder και φορτώνει τη διεύθυνση του Napster με ένα script αφού ολοκληρωθεί η φόρτωση της σελίδας. Όταν συμβεί αυτό, το πρόγραμμα περιήγησης μπορεί να μην παραχωρήσει πρόσβαση στο μικρόφωνο, με αποτέλεσμα ο agent να εμφανίζεται αλλά να μην ξεκινά ποτέ συνομιλία.
Παράδειγμα:
Σε μια ιστοσελίδα WordPress, ο agent εμφανιζόταν, αλλά έμενε στο «Taking longer…» και η συνεδρία δεν ξεκινούσε ποτέ. Η κονσόλα του προγράμματος περιήγησης έδειχνε μήνυμα «Permissions policy violation» (παραβίαση πολιτικής αδειών) για το μικρόφωνο. Μια λειτουργία lazy-load στο πρόσθετο βελτιστοποίησης του ιστότοπου ξαναέγραφε το iframe.
Πώς να ελέγξετε
- Κάντε δεξί κλικ στον agent στη σελίδα σας και επιλέξτε Επιθεώρηση (Inspect).
- Βρείτε το <iframe> του Napster Agent και δείτε το χαρακτηριστικό src του.
- Θα πρέπει να ξεκινά με τη διεύθυνση του Napster Agent από τον κώδικα ενσωμάτωσής σας (μια διεύθυνση web που περιέχει napster.ai). Αν αντίθετα ξεκινά με data:image και η πραγματική σας διεύθυνση βρίσκεται σε ένα χαρακτηριστικό data-src, ένα πρόσθετο ξαναγράφει την ενσωμάτωσή σας.
Πώς να το διορθώσετε: Εξαιρέστε το iframe του Napster από το lazy-loading. Η ρύθμιση διαφέρει ανά πρόσθετο, γι' αυτό αναζητήστε επιλογές lazy-load που αναφέρουν iframes, ενσωματωμένο περιεχόμενο ή περιεχόμενο τρίτων. Για παράδειγμα, στο Smush:
- Μεταβείτε στο Smush → Lazy Load.
- Είτε απενεργοποιήστε τον τύπο πολυμέσων iframe, είτε βρείτε το Exclude content from Lazy Load και προσθέστε μια λέξη-κλειδί από τον κώδικα του iframe του Napster (για παράδειγμα napster.ai), μία καταχώριση ανά γραμμή.
- Αποθηκεύστε και στη συνέχεια καθαρίστε όλα τα cache (δείτε την ενότητα 5).
Συμβουλή: Αν δεν ξέρετε ποιο πρόσθετο ευθύνεται, απενεργοποιήστε προσωρινά τα πρόσθετα για να το εντοπίσετε, ιδανικά σε ένα αντίγραφο staging του ιστότοπού σας. Απενεργοποιήστε τα όλα και δοκιμάστε. Αν ο agent λειτουργεί, ενεργοποιήστε τα ξανά ένα-ένα μέχρι να σταματήσει να λειτουργεί. Στη συνέχεια χρησιμοποιήστε τη ρύθμιση εξαίρεσης αυτού του προσθέτου ή ενημερώστε το, αντί να το αφήσετε απενεργοποιημένο.
5. Caching: Καθαρίστε κάθε επίπεδο μετά από μια αλλαγή
Αν αλλάξετε την ενσωμάτωσή σας ή μια ρύθμιση προσθέτου και τίποτα δεν βελτιωθεί, ενδέχεται να εξακολουθεί να εξυπηρετείται ένα παλιό αντίγραφο της σελίδας από το cache. Οι διαχειριζόμενοι hosts WordPress συχνά τρέχουν πολλά cache ταυτόχρονα και ο καθαρισμός μόνο ενός μπορεί να μην αρκεί. Ελέγξτε κάθε επίπεδο:
- Cache του page builder: Στο Beaver Builder, μεταβείτε στο Settings → Beaver Builder → Tools → Clear Cache.
- Cache φιλοξενίας: Στο GoDaddy Managed WordPress, ανοίξτε το GoDaddy Quick Links → Flush Cache στη γραμμή διαχείρισης (admin bar). Εναλλακτικά, στον λογαριασμό σας GoDaddy, μεταβείτε στο Settings → Tools → Flush Now του ιστότοπου.
- Object cache και άλλα πρόσθετα cache: Ελέγξτε τις ρυθμίσεις του προσθέτου της φιλοξενίας σας (στο GoDaddy, το πρόσθετο GD cORe) και οποιουδήποτε πρόσθετου cache έχετε προσθέσει.
- Τείχος προστασίας ασφαλείας ή CDN: Στο Sucuri, χρησιμοποιήστε την καρτέλα Firewall του προσθέτου ή τον πίνακα ελέγχου του Sucuri (Performance → Clear Cache). Αν το πρόσθετο δεν είναι συνδεδεμένο με λογαριασμό Sucuri, ίσως δεν υπάρχει τίποτα να καθαριστεί εδώ.
- Το πρόγραμμα περιήγησής σας: Δοκιμάστε σε ιδιωτικό παράθυρο.
Η σειρά μπορεί να παίζει ρόλο. Ξεκινήστε με τα cache των προσθέτων του ιστότοπού σας, μετά το cache του host σας, μετά οποιοδήποτε cache CDN ή τείχους προστασίας, και ολοκληρώστε με δοκιμή σε ιδιωτικό παράθυρο.
6. Μεταβίβαση του email του χρήστη στα Analytics (προαιρετικό)
Αν η ιστοσελίδα σας γνωρίζει ήδη το email του επισκέπτη — για παράδειγμα μετά από σύνδεση λογαριασμού ή ελέγχου μέλους — μπορείτε να το μεταβιβάσετε στο Napster Agents προσθέτοντάς το ως παράμετρο στη διεύθυνση URL του iframe.
Παράδειγμα:
src="https://spaces.napster.ai/e/{EXPERIENCE_ID}?email={USER_EMAIL}"Όταν το email παρέχεται με αυτόν τον τρόπο, αποθηκεύεται στο Napster Agent Analytics, βοηθώντας σας να μετρήσετε την αλληλεπίδραση και να εντοπίσετε τους επαναλαμβανόμενους χρήστες.
Η παράμετρος αυτή είναι εντελώς προαιρετική, αλλά μπορεί να κάνει την ανάλυσή σας πιο χρήσιμη.
Βεβαιωθείτε ότι η πολιτική απορρήτου του οργανισμού σας επιτρέπει αυτή την ανταλλαγή δεδομένων πριν την ενεργοποιήσετε.
7. Δοκιμή πριν από τη δημοσίευση
Χρειάζονται μόνο λίγα λεπτά για να επιβεβαιώσετε ότι όλα λειτουργούν σωστά:
- Ενσωματώστε τον κώδικα από το περιβάλλον χρήστη του Napster Agents.
- Ανοίξτε τη σελίδα σας σε Chrome, Edge ή Safari.
- Όταν ξεκινάτε τη συνομιλία, ελέγξτε ότι εμφανίζεται το εικονίδιο μικροφώνου.
- Παρακολουθήστε την κονσόλα του προγράμματος περιήγησης για μηνύματα όπως Permissions Policy violation — αυτά συνήθως σημαίνουν ότι πρέπει να ρυθμιστεί η κεφαλίδα ή η πολιτική cookies.
- Δοκιμάστε μια σύντομη συνομιλία για να επιβεβαιώσετε ότι λειτουργούν τόσο η είσοδος όσο και η έξοδος ήχου.
- Αν προσθέσατε την παράμετρο email, επιβεβαιώστε ότι τα analytics events εμφανίζονται κάτω από τον σωστό χρήστη.
8. Ρυθμίσεις δικτύου και τείχους προστασίας
Ορισμένα περιβάλλοντα φιλοξενίας ή εταιρικά δίκτυα περιορίζουν τις θύρες που απαιτούνται για φωνή και βίντεο σε πραγματικό χρόνο. Για λεπτομέρειες, ανατρέξτε στο άρθρο Απαιτήσεις δικτύου για τη λειτουργία του Napster Agents.
9. Πότε να επικοινωνήσετε μαζί μας
Αν εξακολουθείτε να αντιμετωπίζετε προβλήματα — για παράδειγμα, το iframe δεν εμφανίζεται ή ο ήχος δεν λειτουργεί — η ομάδα υποστήριξής μας είναι έτοιμη να βοηθήσει.
Παρακαλούμε συμπεριλάβετε:
- Τη διεύθυνση URL της σελίδας όπου ενσωματώσατε το Napster Agents
- Λεπτομέρειες σχετικά με το πρόγραμμα περιήγησης και το λειτουργικό σύστημα
- Τον κώδικα ενσωμάτωσης
- Ένα στιγμιότυπο οθόνης από την κονσόλα του προγράμματος περιήγησης (αν εμφανίζονται σφάλματα)
Με αυτές τις πληροφορίες, μπορούμε συνήθως να εντοπίσουμε την αιτία άμεσα.
Τελική σκέψη
Η ενσωμάτωση του Napster Agents θα πρέπει να νιώθεται αβίαστη.
Μόλις ρυθμιστεί το iframe σας και τα δικαιώματα είναι στη θέση τους, οι επισκέπτες σας θα μπορούν να βλέπουν, να ακούν και να μιλούν με τον AI agent σας τόσο φυσικά όσο και σε οποιαδήποτε σελίδα φιλοξενείται από τη Napster — και εσείς θα αποκτήσετε τις γνώσεις που χρειάζεστε για να συνεχίσετε να βελτιώνετε την εμπειρία τους.