Search as the way in, chat as the answer

Plenty of help pages start with a search box and end in a list of hits that miss the point. Here’s the shorter way: the search card itself turns into the conversation on submit. The question is already typed, the conversation starts.

Two states, one card

The card holds both modes: the search field with suggestions, and the chat. On load, the widget renders once into the collapsed chat area; switching only expands and collapses it. Nothing loads late, nothing flickers.

.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');
});

One thing matters: the container has to have dimensions when it renders. The grid-rows trick only clips it; as far as the widget is concerned, it exists at full size from the start.

Without the widget header, it reads like a product feature

The card brings its own header (“Support team”, “← Back to search”). The widget’s header, minimize arrow and all, would just double up. So off it goes:

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

This holds for embedded widgets in your own panels generally: the host page supplies the header and the navigation, the widget supplies the conversation. The minimize arrow belongs only to the floating widget with a Custom Launcher.

Ways to take it further

• Hand the question straight over: With multi-conversations enabled, the typed question goes straight into the new conversation as its first message via the sendMessage API. The transition has no break in it.
• Search first, chat as the fallback: Before switching, show real help center hits (Guide search via API) and only offer the chat when nothing fits. That takes load off the team.