Suche als Einstieg, Chat als Antwort

Werkstück ausprobieren →

Viele Hilfeseiten beginnen mit einer Suche und enden in einer Trefferliste, die doch nicht passt. Kürzer geht es so: Die Suchkarte selbst verwandelt sich beim Absenden in die Konversation. Die Frage ist schon getippt, das Gespräch beginnt.

Zwei Zustände, eine Karte

Die Karte enthält beide Modi: das Suchfeld mit Vorschlägen und den Chat. Das Widget wird beim Laden einmal in den zugeklappten Chat-Bereich gerendert; das Umschalten klappt nur auf und zu. Nichts lädt nach, nichts flackert.

.wk-reveal {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.55s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.wk-reveal > * {
  min-height: 0;
  overflow: hidden;
}
.wk-reveal[data-open] {
  grid-template-rows: 1fr;
}

zE('messenger', 'render', {
  mode: 'embedded',
  widget: { targetElement: '#hilfe-chat' },
});

suchFormular.addEventListener('submit', (event) => {
  event.preventDefault();
  chatBereich.setAttribute('data-open', '');
  suchBereich.removeAttribute('data-open');
});

Wichtig: Der Container muss beim Rendern Masse haben. Der grid-rows-Trick clippt ihn nur; für das Widget existiert er von Anfang an in voller Grösse.

Ein Umschalten von 0fr auf 1fr, kein Nachladen: Das Widget ist von Anfang an voll gerendert, die Karte clippt es nur. Deshalb flackert nichts.

Die Karte bringt ihren eigenen Kopf mit («Support-Team», «← Zur Suche»). Die Widget-Kopfzeile samt Minimieren-Pfeil wäre doppelt. Also weg damit:

zE('messenger:set', 'customization', {
  theme: { primary: '#2563eb', onPrimary: '#ffffff', action: '#2563eb', onAction: '#ffffff' },
  widget: { hideHeader: true },
  conversationList: { hideHeader: true },
  messageLog: { hideHeader: true },
});

Das gilt generell für eingebettete Widgets in eigenen Panels: Kopfzeile und Navigation liefert die Trägerseite, das Widget liefert die Konversation. Der Minimieren-Pfeil gehört nur zum Floating-Widget mit Custom Launcher.

Ausbaustufen

Frage direkt übergeben: Mit aktivierten Multi-Conversations lässt sich die getippte Frage per sendMessage-API direkt als erste Nachricht in die neue Konversation schicken. Der Übergang kommt ohne Bruch aus.
Suche zuerst, Chat als Fallback: Vor dem Umschalten echte Help-Center-Treffer zeigen (Guide-Suche per API) und den Chat nur anbieten, wenn nichts passt. Das entlastet das Team.

← Zurück zur Demo

Suche als Einstieg, Chat als Antwort

Zwei Zustände, eine Karte

Ohne Widget-Kopfzeile wirkt es wie ein Produkt-Feature

Ausbaustufen