Support modal
MedianSupportModal, the support widget with its panel centered over the page.
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.
What differs from the 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.