Widget installieren

Das WebSpeaker-Widget bietet Ihren Besuchern Zugang zur KI-gestützten Suche über die Inhalte Ihrer Website und optional einen Live-Chat mit Ihrem Support-Team — ohne die aktuelle Seite verlassen zu müssen. Es erscheint in mehreren UI-Zuständen, über die Besucher von der Suche in die vollständige Konversation wechseln können.

Das Widget kann als kompaktes Suchfeld in der oberen Navigation angezeigt werden, sodass Besucher direkt im Header fragen können.

2) Erweiterte Desktop-Ansicht des Assistenten

Auf dem Desktop kann das Widget in einer erweiterten Ansicht öffnen, die Suchergebnisse und Assistentenantworten in einem größeren Bereich kombiniert.

3) Schwebender Launcher

Die schwebende Blase bietet schnellen Zugriff auf den Assistenten von jeder Seite aus.

4) Geöffnetes Konversationspanel

Nach dem Öffnen sehen Besucher ein vollständiges Konversationspanel mit Tabs für AI Assistant und Live Support.

Nachdem Sie Ihr Projekt im WebSpeaker-Portal erstellt haben, ist der nächste Schritt, das Widget auf Ihrer Website einzubetten. Das Widget wird über ein kurzes JavaScript-Snippet geladen, das Sie in den HTML-Code Ihrer Website einfügen. Diese Anleitung beschreibt, wie Sie das Snippet erhalten, es installieren und die Cookie-Consent-Integration einrichten.

Script-Snippet erhalten

Melden Sie sich bei portal.webspeaker.pro an, navigieren Sie zu Ihrem Projekt und öffnen Sie den Bereich Integration unter Widget Settings. Dort finden Sie ein einsatzbereites Script-Snippet, das den eindeutigen Zugriffsschlüssel Ihres Projekts enthält. Das Snippet sieht ähnlich aus wie folgt:

<script
  src="https://chatbot.webspeaker.pro/widget-YOUR_ACCESS_KEY.js"
  defer
></script>

Kopieren Sie das gesamte Snippet genau wie angezeigt. Der Zugriffsschlüssel identifiziert Ihr Projekt und stellt sicher, dass das Widget die richtige Konfiguration, Inhalte und Darstellungseinstellungen lädt.

Wenn Sie vermuten, dass Ihr Zugriffsschlüssel kompromittiert wurde oder auf nicht autorisierten Websites verwendet wird, können Sie ihn im Portal neu generieren. Aktualisieren Sie nach der Neugenerierung das Script-Snippet auf Ihrer Website mit dem neuen Schlüssel. Der alte Schlüssel wird sofort ungültig.

Snippet in Ihre Website einfügen

Fügen Sie das Script-Snippet in den HTML-Code Ihrer Website ein, idealerweise direkt vor dem schließenden </body>-Tag. Die Platzierung am Ende des Body stellt sicher, dass das Widget erst nach dem Seiteninhalt geladen wird und die anfängliche Renderleistung nicht beeinträchtigt. Das defer-Attribut lädt das Script, ohne das HTML-Parsing zu blockieren.

Wenn Ihre Website ein Content-Management-System (CMS) oder einen Static-Site-Generator verwendet, suchen Sie nach der Option, eigene Skripte im Footer oder Body-Bereich hinzuzufügen. Die meisten Plattformen bieten ein spezielles Feld für diesen Zweck. Bei Single-Page-Anwendungen, die mit Frameworks wie React, Angular oder Vue erstellt wurden, können Sie das Snippet in Ihre index.html-Datei einfügen.

Wenn Ihre Website einen Cookie-Consent-Manager verwendet, können Sie diesen mit dem WebSpeaker-Widget integrieren. Das Widget lauscht auf Consent-Events und passt sein Verhalten entsprechend an. Wenn keine Einwilligung erteilt wurde, werden Kontakt-Tracking-Funktionen deaktiviert, um die DSGVO-Konformität sicherzustellen. Sobald ein Besucher seine Einwilligung erteilt, aktiviert das Widget die volle Funktionalität einschließlich Kontaktidentifikation und Tracking.

Das Widget lauscht auf Standard-Consent-Events auf der Seite. Konsultieren Sie die Dokumentation Ihrer Cookie-Consent-Plattform für Details zur Auslösung von Consent-Events und stellen Sie sicher, dass das WebSpeaker-Widget-Script in der entsprechenden Consent-Kategorie enthalten ist (typischerweise „Funktionalität” oder „Analytik”).

Das Snippet in Abschnitt 3 der Integration-Seite enthält eine webspeakerSetConsent-Funktion, die Sie aufrufen können, um Consent-Präferenzen an das Widget zu übergeben. Sie akzeptiert zwei Flags:

webspeakerSetConsent({ allowTelemetry: true, allowProfiling: false });

allowTelemetry — wenn aktiviert, sendet das Widget Fehlerberichte an den WebSpeaker-Server. Jeder Bericht enthält die aktuelle Seiten-URL, den User-Agent-String des Browsers und die Build-Kennung des Widgets. Diese Daten helfen dem WebSpeaker-Team, Integrationsprobleme auf Ihrer Website zu diagnostizieren. Wenn deaktiviert, werden Widget-Fehler nur in der Browser-Konsole protokolliert und nicht an den Server übertragen. Hinweis: Das Setzen von allowProfiling auf true aktiviert implizit auch die Telemetrie.

allowProfiling — wenn aktiviert, erstellt das Widget eine persistente Kontakt-ID, die im Browser des Besuchers (localStorage) gespeichert wird, und sendet diese mit jeder Chat-Nachricht mit. Zusätzlich zur Kontakt-ID werden folgende Metadaten pro Nachricht erfasst: Browsersprache, User-Agent, aktuelle Seiten-URL, Gerätetyp (Desktop / Tablet / Mobilgerät) sowie Bildschirmabmessungen (Auflösung, Viewport-Größe, Geräte-Pixelverhältnis). Diese Daten werden im Verwaltungsportal verwendet, um wiederkehrende Besucher zu identifizieren und Support-Mitarbeitern Kontext bereitzustellen. Wenn deaktiviert, werden Chat-Nachrichten anonym ohne Kontakt-ID oder Gerätemetadaten gesendet.

Fehlerprotokoll

Das Fehlerprotokoll im Bereich Integration Ihrer Projekteinstellungen zeigt alle Probleme an, die beim Widget auf Ihrer Website aufgetreten sind. Dazu gehören Ladefehler, Konfigurationsprobleme, Netzwerkausfälle und andere Laufzeitfehler. Jeder Eintrag enthält einen Zeitstempel, den Fehlertyp, eine Beschreibung und die Seiten-URL, auf der der Fehler aufgetreten ist. Regelmäßiges Überprüfen des Fehlerprotokolls hilft Ihnen, Probleme zu erkennen und zu beheben, die das Erlebnis Ihrer Besucher beeinträchtigen könnten.

Installation überprüfen

Öffnen Sie nach dem Hinzufügen des Snippets Ihre Website in einem Browser und prüfen Sie, ob das WebSpeaker-Widget erscheint — typischerweise als schwebende Chat-Blase in der unteren rechten Ecke der Seite. Klicken Sie auf die Blase, um das Widget zu öffnen und zu bestätigen, dass es korrekt lädt. Wenn das Widget nicht erscheint, überprüfen Sie die Entwicklerkonsole des Browsers auf Fehler. Häufige Probleme sind falsche Zugriffsschlüssel, Domain-Einschränkungen, die die Anfrage blockieren, oder ein falsch platziertes Script-Snippet im HTML. Sie können auch das Widget-Fehlerprotokoll im Portal unter Integration auf gemeldete Probleme überprüfen.