Support modal

MedianSupportModal, the support widget with its panel centered over the page.

Live preview. Press the button.

import { MedianSupportModal } from "@mediansh/widget";

<MedianSupportModal apiKey="median_pk_..." />;

The launcher stays in the corner. Only the open panel moves to the middle of the screen. The thread, the composer, the email question, unread counts, the unread card, ratings, destinations and the sign in panel all work as they do in the support widget.

	Widget	Modal
Open panel	Grows out of the launcher	Centered over a dimmed, blurred backdrop
Size	28rem wide, 40rem tall	50rem wide, 40rem tall
Expand control	Expand the panel grows it to 34rem by 52rem	None
Fits in	The window, less 1rem on each side	The window, less 2rem on each side
Text and composer	16px bubbles, a pill composer	14px bubbles, a box composer with its buttons underneath
Page behind	Scrolls and takes clicks	Dimmed, and scrolling is locked
Press outside the panel	Nothing	Closes
Drag	The launcher, or the open panel by its header	The launcher only
Destination press	The panel stays open	The panel closes
Stacking	`z-index: 50`	`z-index: 2147483000`, rendered into `<body>`
Screen readers	A `section` labelled Acme support	A `dialog` with `aria-modal`, labelled Acme support
Phones, 40rem wide or less	A full screen sheet that closes on a destination press	The same sheet

Escape and the close button close both. Focus moves into the panel on open. On close it returns to the launcher, or with launcher="hidden" to the element that opened the panel.

Props

MedianSupportModalProps is MedianSupportProps. Every prop works the same, and none are dropped. The modal keeps the corner launcher, so launcher, messagePreview and titleCount apply too.

<MedianSupportModal
  apiKey="median_pk_..."
  launcher="hidden"
  onNavigate={router.push}
/>;

With launcher="hidden", nothing shows until your code opens the modal.

Open it from your code

useMedianSupport() and medianSupport drive whichever of the two is mounted. See Control from code.

import { useMedianSupport } from "@mediansh/widget";

function HelpLink() {
  const support = useMedianSupport();

  return <button onClick={support.open}>Get help</button>;
}

Mount the modal or the widget, not both. Two share one open state and open together.

Without React

import { mountMedianSupportModal } from "@mediansh/widget";

const support = mountMedianSupportModal({ apiKey: "median_pk_..." });

It takes the same options and returns the same update and unmount as mountMedianSupport. See Without React.

Console messages

The modal prints the widget’s messages. They name <MedianSupport>, except the apiKey shape error, which names <MedianSupportModal>, and the no-document error from mountMedianSupportModal(), which names that function.

Support modal

What differs from the widget

Props

Open it from your code

Without React

Console messages