Ihren Napster Spaces-Agenten auf Ihrer eigenen Website einzubinden, sollte einfach und nahtlos funktionieren.
Dieser Leitfaden führt Sie durch alles, was Sie brauchen, damit Ihre eingebettete Erfahrung reibungslos funktioniert – einschließlich Mikrofonzugriff, Cookie-Einstellungen und optionalem E-Mail-Tracking –, damit Ihre Besucher ganz natürlich und ohne Hindernisse interagieren können.
1. Den richtigen Embed-Code erhalten
Jede Website ist anders aufgebaut, weshalb Napster Spaces Ihnen zwei einfache Optionen zum Einbetten bietet.
Wenn Sie im Produkt das PanelEinbettungsoptionenöffnen, sehen Sie:
- Einbettbares Modul– die vollständige Erfahrung mit Hintergrund und Karten (falls aktiviert), ideal, um sie als eigenen Abschnitt in eine Webseite einzufügen.
-
Nur Agent– eine minimale Version, die sich ausschließlich auf den Videoagenten konzentriert, perfekt für Ecken, Seitenleisten oder kleinere Layouts.
Sobald Sie das für Ihre Website passende Format ausgewählt haben, klicken Sie einfach aufKopieren, um Ihren personalisierten<iframe>-Code zu übernehmen.
Fügen Sie ihn an der Stelle in den HTML-Code Ihrer Website ein, an der die Erfahrung erscheinen soll – und Sie sind fertig.
(Es ist nicht nötig, den Code manuell zu bearbeiten, es sei denn, unser Support-Team empfiehlt dies ausdrücklich.)
Beispielcode:
< iframe
src=https://spaces.napster.ai/view/[experienceID.
style="width: 1280px; position: fixed; bottom: 0; right: 20px; side-ratio: 16/9; background: transparent; z-index: 999999999;"
frameborder="0"
allow="microphone; camera; autoplay; clipboard-write; encrypted-media"
allowtransparency="true"
allowfullscreen
referrerpolicy="strict-origin-when-cross-origin"
title="Napster Spaces Experience"
></iframe>
2. Ihrem Agenten das Sprechen und Zuhören ermöglichen
Um Sprach- und Videofunktionen zu aktivieren, muss Ihre Website dem iframe Zugriff auf Mikrofon und Kamera des Besuchers gewähren.Die Kamera wird nur verwendet, wenn die Gesichtserkennung zur besseren Geräuschunterdrückung in lauter Umgebung aktiviert ist; das Videobild wird ausschließlich lokal auf dem Gerät verarbeitet und nirgendwohin übertragen.
iFrame-Attribute
Stellen Sie sicher, dass Ihr iframe Folgendes enthält:
allow="microphone; camera; autoplay; clipboard-write; encrypted-media"Permissions Policy Header
Wenn Ihre Website Sicherheits-Header verwendet, stellen Sie sicher, dass diese Napster Spaces als zulässige Quelle enthalten:
Permissions-Policy:
microphone=(self "https://spaces.napster.ai"),
camera=(self "https://spaces.napster.ai")Fehlen diese Berechtigungen, blockieren Browser den Mikrofonzugriff stillschweigend – und Ihre Besucher wissen nicht, warum der Agent nicht startet.
3. Cookie- und Consent-Tools
Wenn Ihre Website ein Einwilligungs- oder Cookie-Management-Plug-in verwendet, kann dieses Inhalte von Drittanbietern blockieren, bis der Nutzer zustimmt. Das lässt sich einfach beheben: Hinterlegen Sie Napster im Plug-in einfach als vertrauenswürdige Quelle.
Beispiel:
Ein Kunde, der Spaces in eine WordPress-Website eingebettet hat, stellte fest, dass seinBorlabs-Cookie-Plug-in standardmäßig Inhalte von Drittanbietern blockierte. Nachdemnapster.aials vertrauenswürdige Domain hinzugefügt wurde, funktionierten iframe und Mikrofonzugriff einwandfrei.
Wenn Sie nicht sicher sind, wie Sie Napster auf die Whitelist setzen, helfen Ihnen Ihr Webadministrator oder die Dokumentation Ihres Plug-ins dabei, die Einstellungen „Vertrauenswürdige Domains“ oder „Script-Blocking“ zu finden.
4. Weitergabe von Nutzer-E-Mails an Analytics (optional)
Wenn Ihre übergeordnete Website die E-Mail-Adresse des Besuchers bereits kennt – etwa nach einer Anmeldung oder Mitgliedschaftsprüfung –, können Sie diese Information an Spaces weitergeben, indem Sie sie als Parameter in die iframe-URL einfügen.
Beispiel:
src="https://spaces.napster.ai/e/{EXPERIENCE_ID}?email={USER_EMAIL}"Wenn die E-Mail-Adresse auf diese Weise übergeben wird, erscheint sie in derSpaces-Analyseund hilft Ihnen, das Engagement zu messen und wiederkehrende Nutzer zu erkennen.
Dieser Parameter ist vollkommen optional, macht Ihre Auswertungen jedoch aussagekräftiger.
Bitte stellen Sie sicher, dass die Datenschutzrichtlinie Ihres Unternehmens diese Datenweitergabe zulässt, bevor Sie die Funktion aktivieren.
5. Testen Sie, bevor Sie live gehen
Es dauert nur wenige Minuten, um zu bestätigen, dass alles richtig funktioniert:
- Betten Sie den Code aus der Napster Spaces-Benutzeroberfläche ein.
- Öffnen Sie Ihre Seite inChrome,EdgeoderSafari.
- Starten Sie die Konversation und prüfen Sie, ob die Aufforderung zur Mikrofonberechtigung angezeigt wird.
- Achten Sie auf Konsolenmeldungen wiePermissions Policy Verstoß– das bedeutet in der Regel, dass eine Header- oder Cookie-Richtlinie angepasst werden muss.
- Führen Sie ein kurzes Gespräch, um zu bestätigen, dass sowohl Audioeingang als auch -ausgang funktionieren.
- Wenn Sie denemail-Parameter verwenden, prüfen Sie, ob die Analyseereignisse unter dem richtigen Nutzer erscheinen.
6. Netzwerk- und Firewalleinstellungen
Einige Hosting-Umgebungen oder Unternehmensnetzwerke schränken die für Echtzeit-Sprach- und Videoübertragung erforderlichen Ports ein. Weitere Einzelheiten finden Sie unterNetzwerkanforderungen zum Ausführen von Napster Spaces
7. Wann Sie sich an uns wenden sollten
Wenn weiterhin Probleme auftreten – zum Beispiel wird der iframe nicht angezeigt oder Audio funktioniert nicht –, hilft Ihnen unser Support-Team gerne weiter.
Bitte geben Sie Folgendes an:
- Die URL der Seite, auf der Sie Spaces eingebettet haben
- Browser- und Betriebssystemdetails
- Den Embed-Code
- Einen Screenshot Ihrer Browserkonsole (falls Fehler auftreten)
Mit diesen Informationen können wir die Ursache in der Regel schnell eingrenzen.
Fazit
Das Einbetten von Napster Spaces sollte mühelos funktionieren.
Sobald Ihr iframe eingerichtet ist und die Berechtigungen erteilt sind, können Ihre Besucher Ihren KI-Agenten genauso natürlich sehen, hören und mit ihm sprechen wie auf jeder von Napster gehosteten Seite – und Sie erhalten die Einblicke, die Sie brauchen, um ihre Erfahrung weiter zu verbessern.