Η ενσωμάτωση του agent του Napster Spaces στη δική σας ιστοσελίδα είναι απλή και δεν απαιτεί ιδιαίτερη προσπάθεια.
Αυτός ο οδηγός καλύπτει όλα όσα χρειάζεστε για να λειτουργήσει άψογα η ενσωματωμένη εμπειρία σας — συμπεριλαμβανομένης της πρόσβασης στο μικρόφωνο, των ρυθμίσεων cookies και της προαιρετικής παρακολούθησης email — ώστε οι επισκέπτες σας να μπορούν να αλληλεπιδρούν φυσικά και χωρίς εμπόδια.
1. Λάβετε τον σωστό κώδικα ενσωμάτωσης
Κάθε ιστοσελίδα είναι διαφορετική, γι' αυτό το Napster Spaces σάς προσφέρει δύο εύκολες επιλογές ενσωμάτωσης.
Όταν ανοίγετε τον πίνακα Επιλογές ενσωμάτωσης στο προϊόν, θα δείτε:
- Ενσωματούμενη ενότητα (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"
allowtransparency="true"
allowfullscreen
referrerpolicy="no-referrer-when-downgrade"
title="Napster Spaces Εμπειρία"
> </iframe>
2. Επιτρέψτε στον agent σας να μιλά και να ακούει
Για να ενεργοποιήσετε τις λειτουργίες φωνής και βίντεο, η ιστοσελίδα σας πρέπει να επιτρέπει στο iframe να έχει πρόσβαση στο μικρόφωνο και την κάμερα του επισκέπτη. (Η κάμερα χρησιμοποιείται μόνο όταν είναι ενεργοποιημένη η αναγνώριση προσώπου, για καλύτερη καταστολή θορύβου σε δυνατό περιβάλλον.)
Χαρακτηριστικά του iFrame
Βεβαιωθείτε ότι το iframe σας περιλαμβάνει:
allow="microphone; camera; autoplay; clipboard-write; encrypted-media"Κεφαλίδα πολιτικής δικαιωμάτων (Permissions Policy)
Αν η ιστοσελίδα σας χρησιμοποιεί κεφαλίδες ασφαλείας, βεβαιωθείτε ότι περιλαμβάνουν το Napster Spaces ως εγκεκριμένη προέλευση:
Permissions-Policy:
microphone=(self "https://spaces.napster.ai"),
camera=(self "https://spaces.napster.ai")Αν αυτά τα δικαιώματα λείπουν, τα προγράμματα περιήγησης θα μπλοκάρουν σιωπηλά την πρόσβαση στο μικρόφωνο — και οι επισκέπτες σας δεν θα καταλαβαίνουν γιατί ο agent δεν ξεκινά.
3. Εργαλεία cookies και συγκατάθεσης
Αν η ιστοσελίδα σας χρησιμοποιεί πρόσθετο διαχείρισης cookies ή συγκατάθεσης, ενδέχεται να μπλοκάρει περιεχόμενο τρίτων μέχρι ο χρήστης να δώσει άδεια. Αυτό διορθώνεται εύκολα — απλώς ενημερώστε το πρόσθετο ότι το Napster είναι αξιόπιστη πηγή.
Παράδειγμα:
Ένας πελάτης που ενσωμάτωνε το Spaces σε ιστοσελίδα WordPress διαπίστωσε ότι το πρόσθετο Cookie Bot μπλόκαρε εξ ορισμού το περιεχόμενο τρίτων. Αφού πρόσθεσε το napster.ai ως αξιόπιστο domain, η πρόσβαση στο iframe και στο μικρόφωνο λειτούργησε κανονικά.
Αν δεν είστε σίγουροι πώς να προσθέσετε το Napster στη λίστα επιτρεπόμενων, ο διαχειριστής της ιστοσελίδας σας ή η τεκμηρίωση του πρόσθετου μπορεί να σας βοηθήσει να εντοπίσετε τις ρυθμίσεις «Αξιόπιστα domains» ή «Αποκλεισμός scripts».
4. Μεταβίβαση του email του χρήστη στα Analytics (προαιρετικό)
Αν η ιστοσελίδα σας γνωρίζει ήδη το email του επισκέπτη — για παράδειγμα μετά από σύνδεση λογαριασμού ή ελέγχου μέλους — μπορείτε να το μεταβιβάσετε στο Spaces προσθέτοντάς το ως παράμετρο στη διεύθυνση URL του iframe.
Παράδειγμα:
src="https://spaces.napster.ai/e/{EXPERIENCE_ID}?email={USER_EMAIL}"Όταν το email παρέχεται με αυτόν τον τρόπο, αποθηκεύεται στο Spaces Analytics, βοηθώντας σας να μετρήσετε την αλληλεπίδραση και να εντοπίσετε τους επαναλαμβανόμενους χρήστες.
Η παράμετρος αυτή είναι εντελώς προαιρετική, αλλά μπορεί να κάνει την ανάλυσή σας πιο χρήσιμη.
Βεβαιωθείτε ότι η πολιτική απορρήτου του οργανισμού σας επιτρέπει αυτή την ανταλλαγή δεδομένων πριν την ενεργοποιήσετε.
5. Δοκιμή πριν από τη δημοσίευση
Χρειάζονται μόνο λίγα λεπτά για να επιβεβαιώσετε ότι όλα λειτουργούν σωστά:
- Ενσωματώστε τον κώδικα από το περιβάλλον χρήστη του Napster Spaces.
- Ανοίξτε τη σελίδα σας σε Chrome, Edge ή Safari.
- Όταν ξεκινάτε τη συνομιλία, ελέγξτε ότι εμφανίζεται το εικονίδιο μικροφώνου.
- Παρακολουθήστε την κονσόλα του προγράμματος περιήγησης για μηνύματα όπως Permissions Policy violation — αυτά συνήθως σημαίνουν ότι πρέπει να ρυθμιστεί η κεφαλίδα ή η πολιτική cookies.
- Δοκιμάστε μια σύντομη συνομιλία για να επιβεβαιώσετε ότι λειτουργούν τόσο η είσοδος όσο και η έξοδος ήχου.
- Αν προσθέσατε την παράμετρο email, επιβεβαιώστε ότι τα analytics events εμφανίζονται κάτω από τον σωστό χρήστη.
6. Ρυθμίσεις δικτύου και τείχους προστασίας
Ορισμένα περιβάλλοντα φιλοξενίας ή εταιρικά δίκτυα περιορίζουν τις θύρες που απαιτούνται για φωνή και βίντεο σε πραγματικό χρόνο. Για λεπτομέρειες, ανατρέξτε στο άρθρο Απαιτήσεις δικτύου για τη λειτουργία του Napster Spaces.
7. Πότε να επικοινωνήσετε μαζί μας
Αν εξακολουθείτε να αντιμετωπίζετε προβλήματα — για παράδειγμα, το iframe δεν εμφανίζεται ή ο ήχος δεν λειτουργεί — η ομάδα υποστήριξής μας είναι έτοιμη να βοηθήσει.
Παρακαλούμε συμπεριλάβετε:
- Τη διεύθυνση URL της σελίδας όπου ενσωματώσατε το Spaces
- Λεπτομέρειες σχετικά με το πρόγραμμα περιήγησης και το λειτουργικό σύστημα
- Τον κώδικα ενσωμάτωσης
- Ένα στιγμιότυπο οθόνης από την κονσόλα του προγράμματος περιήγησης (αν εμφανίζονται σφάλματα)
Με αυτές τις πληροφορίες, μπορούμε συνήθως να εντοπίσουμε την αιτία άμεσα.
Τελική σκέψη
Η ενσωμάτωση του Napster Spaces θα πρέπει να νιώθεται αβίαστη.
Μόλις ρυθμιστεί το iframe σας και τα δικαιώματα είναι στη θέση τους, οι επισκέπτες σας θα μπορούν να βλέπουν, να ακούν και να μιλούν με τον AI agent σας τόσο φυσικά όσο και σε οποιαδήποτε σελίδα φιλοξενείται από τη Napster — και εσείς θα αποκτήσετε τις γνώσεις που χρειάζεστε για να συνεχίσετε να βελτιώνετε την εμπειρία τους.