Das Chat-Widget von Kookee hatte eine Aufgabe, und die hat es gut erledigt: Ein Besucher stellt eine Frage, der Assistent antwortet aus dem Hilfecenter und zitiert den Artikel, den er genutzt hat. Dann klickt der Besucher auf die Quelle, und das Widget lässt ihn im Stich. Die Seite wechselt, oder ein neuer Tab öffnet sich, und die Unterhaltung, aus der die Antwort kam, liegt jetzt irgendwo hinter ihm.
Der Klick, der der beste Moment des Gesprächs hätte sein sollen, hat es beendet.
Also habe ich das Widget neu gebaut. Es ist nicht mehr nur ein Chat: Es hat drei Tabs, Startseite, KI fragen und Hilfe, und einen Artikel-Reader. Das ist heute live gegangen, und nach diesen Regeln habe ich es gebaut.
1. Ein Artikel öffnet sich dort, wo die Frage gestellt wurde
Eine Quelle unter einer Antwort, ein Link darin, ein Artikel in einer Liste: All das öffnet sich jetzt im Widget, in einem Reader mit Zurück-Button. Die Seite dahinter bewegt sich nicht, die Unterhaltung auch nicht.
Der Reader ist die Artikelseite des Hilfecenters im Widget-Format: ein Inhaltsverzeichnis, dieselbe Abstimmung „War dieser Artikel hilfreich?“ und ein Button Frage zu diesem Artikel stellen, der den Titel des Artikels in den Chat übernimmt. Ein Blogbeitrag oder ein Changelog-Eintrag öffnet sich genauso und bekommt Reaktions-Buttons statt der Abstimmung.
Wenn deine Website Klicks auf Quellen schon selbst behandelt, ändert sich nichts: Dein Handler hat weiter Vorrang, und der Reader hält sich raus.
2. Nicht jeder Besuch beginnt mit einer Frage
Ein leerer Chat verlangt vom Besucher zuerst den schwierigsten Teil: das Problem in Worte zu fassen. Viele Leute öffnen ein Support-Widget, um sich umzusehen: ob gerade etwas kaputt ist, was sich geändert hat oder ob es einen Artikel mit ungefähr dem richtigen Titel gibt.
Für sie gibt es die Startseite. Sie zeigt deine neueste Ankündigung, deine eigenen Links, die neuesten Changelog-Einträge und Blogbeiträge und die meistgelesenen Hilfeartikel, und oben ein Fragefeld für alle, die schon wissen, was sie fragen wollen. Hilfe ist das Hilfecenter selbst: ein Suchfeld und deine Sammlungen, jede mit der Zahl ihrer Artikel.
Nichts davon ist neuer Inhalt. Startseite und Hilfe entstehen aus dem, was du ohnehin veröffentlichst, und eine Liste ohne Einträge wird weggelassen statt leer angezeigt.
KI fragen ist der Chat wie bisher, mit deiner Begrüßung und ein paar vorgeschlagenen Fragen, die man direkt antippen kann.
3. Jeder Link auf deiner Seite kann einen Artikel öffnen
Der beste Platz für Hilfe ist direkt neben dem, was sie erklärt: ein Fragezeichen neben einem Einstellungsfeld, ein Link „Wie funktioniert die Abrechnung?“ auf der Preisseite. Bisher musste dieser Link woandershin führen.
Gib einem beliebigen Element ein Attribut, und ein Klick öffnet den Artikel im Widget:
<a href="/help/getting-started" data-kookee-article="getting-started">Erste Schritte</a>Zwei Details sind hier wichtig. Das href bleibt, sodass der Link auch funktioniert, wenn das Widget blockiert ist oder noch nicht geladen hat. Und ein Klick mit gedrückter Strg-, Cmd- oder Shift-Taste oder mit der mittleren Maustaste bleibt unangetastet: Wer einen neuen Tab will, bekommt einen neuen Tab. Alle Regeln stehen in Hilfeartikel im Widget öffnen.
4. Die Texte gehören ins Dashboard, das Aussehen in deinen Code
Hier habe ich lange hin und her überlegt. Ein Widget hat zwei Arten von Einstellungen, und sie gehören an verschiedene Orte.
Was es sagt – Tabs, Titel, Begrüßung, vorgeschlagene Fragen und Links – ändert sich oft und ist selten Sache der Entwickler. Das wird im Dashboard gespeichert, im Tab Anpassen, mit Live-Vorschau, und eine gespeicherte Änderung erreicht deine Website in etwa einer Minute, ohne Deploy.
Wie es aussieht – Theme, Position, Akzentfarbe, Launcher – wird gar nicht gespeichert. Das bleibt im Snippet auf deiner Website. Ein Aussehen, das vom Server kommt, trifft erst ein, nachdem der Launcher schon gezeichnet ist, und flackert deshalb. Außerdem läuft dasselbe Projekt oft auf mehr als einer Website, und die sollen nicht gleich aussehen. Das Dashboard hilft trotzdem: Der Tab Installation ist ein kleiner Baukasten mit Vorschau, der das Snippet für dich schreibt.
Wo sich beides überschneidet, gewinnt der Code, Schlüssel für Schlüssel. Eine mehrsprachige Website übergibt übersetzte Texte im Code und lässt das Dashboard den Rest entscheiden.
5. Die Anfrage nach den Einstellungen darf nie der Grund sein, dass das Widget ausfällt
Gespeicherte Einstellungen bedeuten, dass das Widget den Server jetzt danach fragt, und jede neue Anfrage ist eine neue Möglichkeit zu scheitern. Deshalb hat diese Anfrage so wenig Gewicht, wie ich ihr geben konnte:
Sie läuft einmal pro Seitenaufruf, und der Browser behält die Antwort eine Minute lang.
Sie wird nicht auf dein monatliches API-Kontingent angerechnet. Für einen Abruf der Einstellungen bei jedem Seitenaufruf ist ein Kontingent nicht gedacht.
Schlägt sie fehl, fällt das Widget auf den einfachen Chat zurück, der es vorher war. Ein Besucher sieht weniger Tabs, aber nie einen Fehler.
Was ich weggelassen habe
Das ist kein Live-Chat. Auf der anderen Seite wartet kein Mitarbeiter: Der Assistent antwortet aus deinen Artikeln, und deine Anweisungen sagen ihm, wohin er Leute schicken soll, wenn er keine Antwort weiß.
Es schaltet sich auch nicht von selbst ein. Jedes bereits installierte Widget bleibt ein einfacher Chat, bis du die Tabs im Dashboard einschaltest.
So bekommst du es
Das Script-Tag übernimmt das ohne Änderung an deiner Website. In React aktualisierst du auf @kookee/react 1.11.0 und @kookee/sdk 1.11.0. Öffne dann in deinem Projekt Website-Widget → Anpassen und schalte die Tabs ein. Tabs Startseite und Hilfe zum Widget hinzufügen führt dich Schritt für Schritt durch, und Das Website-Widget auf deiner Website installieren erklärt die erste Installation.