Ihren Napster Agents-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 Agents 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 Napster 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; display-capture; picture-in-picture"
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; display-capture; picture-in-picture"Permissions Policy Header
Wenn Ihre Website Sicherheits-Header verwendet, stellen Sie sicher, dass diese Napster Agents als zulässige Quelle enthalten:
Permissions-Policy:
microphone=(self "https://spaces.napster.ai" "https://spaces-embed.napster.ai"),
camera=(self "https://spaces.napster.ai" "https://spaces-embed.napster.ai")Fehlen diese Berechtigungen, blockieren Browser den Mikrofonzugriff stillschweigend – und Ihre Besucher wissen nicht, warum der Napster 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 Napster Agents 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. Lazy-Loading- und Optimierungs-Plug-ins (WordPress)
Viele WordPress-Websites nutzen Performance-Plug-ins, die Bilder und eingebettete Inhalte per „Lazy Loading“ (verzögertes Laden) zurückhalten, bis ein Besucher in ihre Nähe scrollt. Bei Bildern ist das hilfreich, kann aber das Napster-Agent-iframe stören. Das Plug-in ersetzt die echte Adresse des iframes durch einen winzigen Platzhalter und lädt die Napster-Adresse erst per Skript, nachdem die Seite vollständig geladen wurde. In diesem Fall verweigert der Browser unter Umständen den Mikrofonzugriff – der Agent erscheint, startet aber nie ein Gespräch.
Beispiel:
Auf einer WordPress-Website erschien der Agent, blieb aber bei „Taking longer…“ hängen, und die Sitzung startete nie. Die Browserkonsole zeigte für das Mikrofon die Meldung „Permissions policy violation“ (Permissions-Policy-Verstoß) an. Eine Lazy-Load-Funktion im Optimierungs-Plug-in der Website schrieb das iframe um.
So prĂĽfen Sie es
- Klicken Sie auf Ihrer Seite mit der rechten Maustaste auf den Agenten und wählen Sie Untersuchen (Inspect).
- Suchen Sie das Napster-Agent-<iframe> und sehen Sie sich sein src-Attribut an.
- Es sollte mit der Napster-Agent-Adresse aus Ihrem Einbettungscode beginnen (einer Webadresse, die napster.ai enthält). Beginnt es stattdessen mit data:image und steht Ihre echte Adresse in einem data-src-Attribut, schreibt ein Plug-in Ihre Einbettung um.
So beheben Sie es: Schließen Sie das Napster-iframe vom Lazy Loading aus. Die Einstellung unterscheidet sich je nach Plug-in. Suchen Sie nach Lazy-Load-Optionen, die iframes, eingebettete Inhalte oder Inhalte von Drittanbietern erwähnen. Beispiel in Smush:
- Gehen Sie zu Smush → Lazy Load.
- Deaktivieren Sie entweder den Medientyp iframe, oder suchen Sie Exclude content from Lazy Load und fĂĽgen Sie ein SchlĂĽsselwort aus Ihrem Napster-iframe-Code hinzu (zum Beispiel napster.ai), ein Eintrag pro Zeile.
- Speichern Sie und leeren Sie anschlieĂźend alle Caches (siehe Abschnitt 5).
Tipp: Wenn Sie nicht wissen, welches Plug-in verantwortlich ist, deaktivieren Sie Plug-ins vorübergehend, um es zu ermitteln – idealerweise auf einer Staging-Kopie Ihrer Website. Deaktivieren Sie alle und testen Sie. Funktioniert der Agent, aktivieren Sie die Plug-ins nacheinander wieder, bis das Problem erneut auftritt. Nutzen Sie dann die Ausschlusseinstellung dieses Plug-ins oder aktualisieren Sie es, statt es deaktiviert zu lassen.
Â
5. Caching: Leeren Sie nach jeder Ă„nderung jede Ebene
Wenn Sie Ihre Einbettung oder eine Plug-in-Einstellung ändern und sich nichts bessert, wird möglicherweise noch eine alte, zwischengespeicherte Kopie der Seite ausgeliefert. Verwaltete WordPress-Hosts betreiben oft mehrere Caches gleichzeitig, und das Leeren nur eines Caches reicht möglicherweise nicht aus. Prüfen Sie jede Ebene:
- Cache des Page Builders: Gehen Sie in Beaver Builder zu Settings → Beaver Builder → Tools → Clear Cache.
- Hosting-Cache: Öffnen Sie bei GoDaddy Managed WordPress in der oberen WordPress-Werkzeugleiste GoDaddy Quick Links → Flush Cache. Alternativ gehen Sie in Ihrem GoDaddy-Konto zu Settings → Tools → Flush Now der Website.
- Objekt-Cache und andere Cache-Plug-ins: PrĂĽfen Sie die Einstellungen des Plug-ins Ihres Hosters (bei GoDaddy das Plug-in GD cORe) sowie aller Caching-Plug-ins, die Sie hinzugefĂĽgt haben.
- Sicherheits-Firewall oder CDN: Verwenden Sie bei Sucuri den Tab Firewall im Plug-in oder das Sucuri-Dashboard (Performance → Clear Cache). Ist das Plug-in nicht mit einem Sucuri-Konto verbunden, gibt es hier möglicherweise nichts zu leeren.
- Ihr Browser: Testen Sie in einem privaten Fenster.
Die Reihenfolge kann eine Rolle spielen. Beginnen Sie mit den Plug-in-Caches Ihrer Website, dann dem Cache Ihres Hosters, dann einem CDN- oder Firewall-Cache, und beenden Sie mit einem Test im privaten Fenster.
Â
6. 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 Napster Agents 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 derNapster Agents-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.
7. 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 Agents-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.
8. 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 Agents
9. 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 Napster Agents 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 Agents 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.