Add a support page

HelpdeskConversations is the widget's conversation list and threads, placed in the page itself. A signed-in customer sees their own conversations and the ones their company shares with them, as in the widget, and can open a new one from the same page. It uses the same routes as the widget, so the handler from the quickstart is all it needs.

Render the pageCopy Anchor Link

Put it on a page behind your app's login, so identify knows who is reading:

import { HelpdeskConversations } from 'better-helpdesk/widget';

export default function SupportPage() {
  return (
    <main>
      <h1>Support</h1>
      <HelpdeskConversations inbox="support" locale="en" />
    </main>
  );
}

It takes the same props as HelpdeskWidget apart from label, which belongs to the launcher it does not have. inbox is where conversations opened from this page land. The widget reference lists the props, and Identity and trust explains which shared conversations a customer sees.

Size and style itCopy Anchor Link

It renders into its own shadow root, so your page's styles and its styles never meet. It reads the same --helpdesk-* custom properties as the widget, and two of them matter here: --helpdesk-page-height sets its height (640px by default) and --helpdesk-panel-border its border.

helpdesk-conversations {
  --helpdesk-page-height: 720px;
  --helpdesk-panel-border: none;
}

Theme the widget and the agent UI covers the rest.

Hide the launcher on this pageCopy Anchor Link

If your layout also renders HelpdeskWidget, the launcher floats over the support page as well. Leave it out there:

'use client';

import { HelpdeskWidget } from 'better-helpdesk/widget';
import { usePathname } from 'next/navigation';

export function SupportWidget() {
  if (usePathname().startsWith('/support')) return null;
  return <HelpdeskWidget inbox="support" locale="en" />;
}

Outside ReactCopy Anchor Link

defineHelpdeskConversations() registers <helpdesk-conversations>, with the same attributes as <helpdesk-widget>:

import { defineHelpdeskConversations } from 'better-helpdesk/widget';

defineHelpdeskConversations();

<helpdesk-conversations inbox="support" locale="de"></helpdesk-conversations>

The standalone widget.js registers only <helpdesk-widget>, so this needs a bundler that can import the package.

Of the widget's DOM events, helpdesk:message-sent and helpdesk:booking-clicked fire here too. helpdesk:open does not, since the page is never opened.