Intégrer votre agent Napster Spaces à votre propre site Web doit être simple et sans friction.
Ce guide passe en revue tout ce dont vous avez besoin pour que votre expérience intégrée fonctionne parfaitement - accès au microphone, paramètres des cookies et suivi optionnel des e-mails compris - afin que vos visiteurs puissent interagir naturellement, sans accroc.
1. Obtenir le bon code d'intégration
Chaque site étant configuré différemment, Napster Spaces vous propose deux options d'intégration simples.
Lorsque vous ouvrez le panneau Options d'intégration dans le produit, vous verrez :
- Module intégrable - l'expérience complète, avec l'arrière-plan et les cartes (si activées), idéale pour l'insérer dans une page Web à la manière d'une section.
-
Agent seul - une version minimale centrée uniquement sur l'agent vidéo, parfaite pour les coins d'écran, les barres latérales ou les mises en page plus compactes.
Une fois que vous avez choisi le format adapté à votre site, il vous suffit de cliquer sur Copier pour obtenir votre code <iframe> personnalisé.
Collez-le dans le code HTML de votre site, à l'endroit où vous souhaitez que l'expérience apparaisse, et c'est terminé.
(Il n'est pas nécessaire de modifier le code manuellement, sauf indication contraire de notre équipe d'assistance.)
Exemple de code :
<iframe
src="https://spaces.napster.ai/view/[experience ID]"
style="width: 1280px; position: fixed; bottom: 0; right: 20px; aspect-ratio: 16/9; background: transparent; z-index: 999999999;"
frameborder="0"
allow="microphone; camera; autoplay; clipboard-write; encrypted-media"
allowtransparency
allowfullscreen
referrerpolicy
title="Expérience Napster Spaces"
></iframe>
2. Laisser votre agent parler et écouter
Pour activer les fonctions audio et vidéo, votre site Web doit autoriser l'iframe à accéder au microphone et à la caméra du visiteur. (La caméra n'est utilisée que lorsque le suivi du visage est activé, afin d'améliorer la suppression du bruit dans un environnement bruyant ; la vidéo est traitée localement sur l'appareil et n'est jamais envoyée ailleurs.)
Attributs iFrame
Assurez-vous que votre iframe comprend :
allow="microphone; camera; autoplay; clipboard-write; encrypted-media"En-tête de la politique des autorisations
Si votre site utilise des en-têtes de sécurité, confirmez qu'ils incluent Napster Spaces comme origine approuvée :
Permissions-Policy:
microphone=(self "https://spaces.napster.ai"),
camera=(self "https://spaces.napster.ai")Si ces autorisations sont absentes, les navigateurs bloqueront silencieusement l'accès au microphone, et vos visiteurs ne comprendront pas pourquoi l'agent ne démarre pas.
3. Outils de gestion des cookies et du consentement
Si votre site Web utilise un plugin de gestion des cookies ou du consentement, celui-ci peut bloquer le contenu tiers tant que l'utilisateur n'a pas donné son autorisation. C'est facile à corriger : il suffit d'indiquer au plugin que Napster est une source fiable.
Exemple :
Un client ayant intégré Spaces sur un site WordPress a constaté que son plugin Cookie Borlabs bloquait par défaut le contenu tiers. Après avoir ajouté napster.ai comme domaine de confiance, l'iframe et l'accès au microphone ont fonctionné parfaitement.
Si vous ne savez pas comment autoriser Napster, la documentation d'administration de votre site ou de votre plugin peut vous aider à localiser les paramètres de domaines de confiance.
4. Transmettre l'e-mail de l'utilisateur à Analytics (facultatif)
Si votre site Web parent connaît déjà l'adresse e-mail du visiteur - par exemple après une connexion ou une vérification d'inscription -, vous pouvez transmettre cette information à Spaces en l'ajoutant comme paramètre dans l'URL de l'iframe.
Exemple :
src="https://spaces.napster.ai/e/{EXPERIENCE_ID}?email={USER_EMAIL}"Lorsque l'adresse e-mail est fournie de cette façon, elle est enregistrée dans Analyse de Spaces pour vous aider à mesurer l'engagement et à identifier les utilisateurs récurrents.
Ce paramètre est entièrement optionnel, mais il peut rendre vos analyses plus pertinentes.
Veuillez vous assurer que la politique de confidentialité de votre organisation autorise ce partage de données avant de l'activer.
5. Tester avant la mise en ligne
Il ne faut que quelques minutes pour confirmer que tout fonctionne correctement :
- Intégrez le code d'intégration Napster Spaces.
- Ouvrez votre page dans Chrome, Edge ou Safari.
- Lorsque vous démarrez la conversation, vérifiez que la demande d'autorisation du microphone s'affiche.
- Consultez les messages de la console, comme violation de la politique des autorisations, qui indiquent généralement qu'une politique d'en-tête ou de cookies doit être ajustée.
- Essayez une courte conversation pour confirmer que l'entrée et la sortie audio fonctionnent.
- Si vous avez ajouté le paramètre email, vérifiez que les événements analytiques apparaissent bien pour le bon utilisateur.
6. Paramètres réseau et pare-feu
Certains environnements d'hébergement ou réseaux d'entreprise limitent les ports nécessaires à la voix et à la vidéo en temps réel. Pour plus de détails, consultez Exigences réseau pour l'exécution de Napster Spaces.
7. Quand nous contacter
Si vous rencontrez encore des problèmes - par exemple, l'iframe n'apparaît pas ou l'audio ne fonctionne pas -, notre équipe d'assistance est prête à vous aider.
Veuillez indiquer :
- L'URL de la page où vous avez intégré Spaces
- Le navigateur et le système d'exploitation utilisés
- Le code d'intégration utilisé
- Une capture d'écran de votre console de navigateur (si des erreurs apparaissent)
Avec ces informations, nous pouvons généralement identifier la cause immédiatement.
Pour conclure
Intégrer Napster Spaces doit être un jeu d'enfant.
Une fois votre iframe configuré et les autorisations en place, vos visiteurs pourront voir, entendre et parler avec votre agent IA aussi naturellement que sur n'importe quelle page hébergée par Napster, tout en vous fournissant les données nécessaires pour continuer à améliorer leur expérience.