Deskwerk· Workshop
DEEN

Demos

Contact Page with Live Chat: Form for Later, Chat for Now

Try the demo →

Contact forms promise “we’ll get back to you.” Chat answers now. The two don’t rule each other out: the form for case files and attachments, the chat for anything that needs to move fast.

The Widget as a Grid Element

In embedded mode the widget is an element like any other. On a contact page that means a two-column grid: the form on the left, the container for the widget on the right.

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

Brand Look in Four Lines

Theme values you don’t set fall back to the defaults. For the host page’s look, a partial theme is enough:

zE('messenger:set', 'customization', {
  theme: {
    primary: '#1d4ed8',
    onPrimary: '#ffffff',
    action: '#1d4ed8',
    onAction: '#ffffff',
  },
});

In the demo the widget deliberately wears the blue of the fictional “Muster AG” instead of Deskwerk yellow: the widget adapts to the page, not the other way around. For how the full color palette works, see the Theme Workbench blueprint.

Don’t Forget the Context

One line, and every chat request from the contact page is tagged as such:

zE('messenger:set', 'conversationTags', ['kontaktseite']);

Now routing can treat chat requests from the contact page differently from ones out of the Help Center, and the reporting knows which entry point is worth what.

The Next Build-Out Step

The chat is only as good as what answers it. On a real contact page an AI Agent belongs behind it, one that resolves the most common requests itself: opening hours, order status, change of address. That’s configuration work in the instance, not in the widget: the craft behind the 70% of requests resolved autonomously in the reference project.

← Back to the demo