Verwandle Ihre Website-Suchleiste in einen KI-Agenten

Die klassische Website-Suche gibt eine Liste von Links zurück. Ihre Besucher müssen dann selbst durch Seiten klicken, um die Antwort zu finden. Mit LoyJoy können Sie Ihre bestehende Suchleiste (oder eine neue) mit einem KI-Agenten verbinden: Der Besucher tippt eine Anfrage ein, drückt Enter, der Chat öffnet sich mit dieser Anfrage als erster Nachricht, und der KI-Agent beantwortet sie sofort.

Dieser Leitfaden zeigt, wie Sie dies mit wenigen Zeilen JavaScript einrichten und wie wir es auf loyjoy.com verwenden.

So funktioniert es

1. Der Besucher gibt eine Anfrage in ein Suchfeld auf Ihrer Website ein und sendet sie ab.
2. Ihre Seite ruft LoyJoy('boot', ...) mit der Anfrage im message-Parameter und open: true auf.
3. Der Chat öffnet sich und sendet die Anfrage automatisch im Namen des Besuchers.
4. Der KI-Agent antwortet, und der Besucher kann die Konversation mit Folgefragen fortsetzen.

Beispiel: loyjoy.com

Auf unserer eigenen Website sitzt das Suchsymbol in der Hauptnavigation.

Ein Klick auf das Symbol öffnet ein Such-Overlay. Der Besucher tippt eine Frage ein und drückt Enter.

Statt einer Ergebnisseite öffnet sich der LoyJoy-Chat mit der Frage als erster Nachricht, und der KI-Agent beantwortet sie direkt.

Voraussetzungen

1. Ein KI-Agent, der auf Freitext-Nachrichten antwortet. Der Prozess muss ein Message-Start-Ereignis oder ein KI-Agent-Modul im Modus "Im KI-Agent-Modul bleiben und auf Benutzereingaben warten" enthalten. Andernfalls wird die Anfrage gesendet, aber der KI-Agent antwortet nicht.
2. Wissen für den KI-Agenten. Der KI-Agent kann nur beantworten, was er weiß. Verbinden Sie Ihre Website und andere relevante Quellen als Wissen, damit er die Fragen beantworten kann, die Besucher normalerweise in eine Suchleiste tippen.
3. Die Prozess-ID. Sie finden sie im LoyJoy Manager im Publish-Tab Ihres KI-Agenten.
4. Content Security Policy. Wenn Ihre Website eine CSP verwendet, fügen Sie die erforderlichen LoyJoy-Einträge hinzu. Siehe Content Security Policy (CSP).

Schritt 1: Das LoyJoy-Skript laden

Fügen Sie das LoyJoy-Widget-Skript auf jeder Seite hinzu, die die Suchleiste enthält.

<script src="https://stable.loyjoy.com/widget.js"></script>

info

Wenn der LoyJoy-Chat bereits über das Snippet aus dem Publish-Tab auf Ihrer Website eingebettet ist, müssen Sie das Skript nicht erneut hinzufügen. Der Code aus Schritt 2 funktioniert in beiden Fällen.

Schritt 2: Das Suchformular verbinden

Fügen Sie Ihrem Suchformular einen Submit-Handler hinzu. Er liest die Anfrage, entfernt einen bereits auf der Seite vorhandenen Chat und bootet den KI-Agenten mit der Anfrage als erster Nachricht.

<form id="loyjoy-search">
  <label for="loyjoy-search-input" class="sr-only">Search</label>
  <input id="loyjoy-search-input" name="query" type="text" placeholder="Search..." autocomplete="off">
  <button type="submit">Search</button>
</form>

<script>
document.getElementById('loyjoy-search').addEventListener('submit', function (event) {
  event.preventDefault()

  var query = this.query.value.trim()
  if (!query) return

  LoyJoy('remove')
  LoyJoy('boot', {
    process: 'PROCESS_ID',
    message: query,
    open: true
  })

  this.reset()
})
</script>

Ersetzen Sie PROCESS_ID durch die Prozess-ID Ihres KI-Agenten.

Warum LoyJoy('remove') vor boot? Wenn der Chat bereits auf der Seite ist, z. B. über das Snippet aus dem Publish-Tab, wird ein zweiter boot-Aufruf ignoriert und die Anfrage nicht gesendet. Das Entfernen des bestehenden Chats zuerst sorgt dafür, dass die Suche funktioniert, egal ob der Chat vorher geladen wurde oder nicht.

Wenn Sie nur eine minimale Inline-Version benötigen, reicht dieser Einzeiler:

<form onsubmit="LoyJoy('boot', {process: 'PROCESS_ID', message: this.query.value, open: true}); return false;">
  <input name="query" type="text" placeholder="Search...">
  <button type="submit">Search</button>
</form>

Optionale Einstellungen

Sie können message mit den anderen Konfigurationsparametern der JavaScript-API kombinieren.

1. Kontext für den KI-Agenten. Übergeben Sie frei ausgewählte Parameter, z. B. den Einstiegspunkt oder die aktuelle Seite, und werten Sie sie im Prozess mit der GetParam-Funktion aus.

   LoyJoy('boot', {
     process: 'PROCESS_ID',
     message: query,
     open: true,
     params: {
       entry: 'search',
       page: window.location.pathname
     }
   })

2. Sprache. Legen Sie auf mehrsprachigen Websites das locale passend zur Seitensprache fest, z. B. locale: 'en-US' auf englischen Seiten.

3. Tracking. Verwenden Sie Ereignis-Listener, um Chat-Ereignisse an Ihre Web-Analytics zu senden, damit Sie messen können, wie viele Suchen zu einer Konversation führen.

4. Anderer KI-Agent für die Suche. Die Suchleiste kann einen anderen KI-Agenten booten als die Chat-Sprechblase, z. B. einen dedizierten Such-KI-Agenten. Nach der Suche bleibt der Besucher in diesem KI-Agenten.

Best Practices

1. Platzieren Sie die Suchleiste dort, wo Besucher sie erwarten. Navigation und Hero-Bereiche funktionieren am besten. Behalten Sie das vertraute Suchsymbol und die Formulierungen wie "Search" oder "Eine Frage stellen", damit Besucher wissen, was zu tun ist.
2. Registrieren Sie den Submit-Handler nur einmal. Wenn Ihr Such-Overlay über einen Button geöffnet wird, hängen Sie den Submit-Listener beim Laden der Seite an, nicht im Klick-Handler. Andernfalls fügt jeder Klick einen weiteren Listener hinzu und eine einzige Suche bootet den Chat mehrfach.
3. Leere Anfragen ignorieren. Booten Sie den Chat nicht, wenn die Eingabe leer ist.
4. Schließen Sie Ihr Such-Overlay beim Senden, damit der Chat sofort sichtbar ist.
5. Testen Sie typische Suchbegriffe. Besucher tippen kurze Schlüsselwörter ("pricing", "WhatsApp", "DSGVO") statt vollständiger Fragen. Stellen Sie sicher, dass der KI-Agent beides verarbeitet und bei einem mehrdeutigen Schlüsselwort eine Folgefrage stellt.

Fehlerbehebung

1. Der Chat öffnet sich, aber der KI-Agent antwortet nicht. Der KI-Agent antwortet nicht auf Freitext-Nachrichten. Prüfen Sie die oben genannten Voraussetzungen.
2. Es passiert nichts oder der Chat öffnet sich ohne die Anfrage. Der Chat war bereits auf der Seite gebootet, sodass der neue boot-Aufruf ignoriert wird. Rufen Sie LoyJoy('remove') vor LoyJoy('boot') auf, wie in Schritt 2 gezeigt.
3. Die Anfrage wird doppelt oder mehrfach gesendet. Der Submit-Listener wurde mehrfach registriert. Registrieren Sie ihn nur einmal beim Laden der Seite.
4. LoyJoy is not defined. Das Widget-Skript ist noch nicht geladen oder wird blockiert. Stellen Sie sicher, dass widget.js vor Ihrem Code eingebunden ist und dass Ihre CSP LoyJoy erlaubt.

Verwandte Dokumente

1. Widget-Code-Snippet & erweiterte JavaScript-API
2. Widget-Parameter
3. KI-Agent-Modul
4. Go-Live-Checkliste