Control from code

Open, close and watch the support and feedback panels from your own code, with or without React.

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

<MedianSupport apiKey="median_pk_..." launcher="hidden" />;

"use client";

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

export function HelpButton() {
  const support = useMedianSupport();

  return (
    <button onClick={support.open}>
      Help
      {support.unreadCount > 0 && <span>{support.unreadCount}</span>}
    </button>
  );
}

Mount the component once, near the root. Call the hook from any component. No provider is needed.

Support panel

useMedianSupport() returns the controls for MedianSupport and MedianSupportModal. medianSupport is the same set as a plain object, for code outside components.

• open() called before the panel mounts is kept. The panel opens as soon as it mounts.
• MedianSupport and MedianSupportModal share one open state. Mount one of them.
• Details for the members that are not about opening: attach, reportError, reset.

Open from your own button

Set launcher to take the round button out of the corner:

<MedianSupport apiKey="median_pk_..." launcher="hidden" />

With launcher="hidden":

• Open the panel with open() or toggle() from the hook or medianSupport.
• The corner panel opens where the button would be. MedianSupportModal still opens in the middle of the screen.
• There is no count or reply card to show new replies. Put unreadCount on your own button, as in the example at the top. The count in the tab title still works. Turn it off with titleCount={false}.
• Closing the panel returns focus to the element that had focus when it opened.

You can also keep the bubble and add your own trigger. launcher and the controls are independent.

Controlled open state

Pass open to hold the state yourself. Pass onOpenChange to hear every open and close, whatever asked for it.

const [open, setOpen] = useState(false);

<MedianSupport
  apiKey="median_pk_..."
  launcher="hidden"
  open={open}
  onOpenChange={setOpen}
/>;

<button onClick={() => setOpen(true)}>Help</button>;

• While open is passed, the panel shows exactly open. Everything in the table calls onOpenChange and changes nothing until you update open.
• Without the open prop, the panel changes directly and onOpenChange still hears about it.
• isOpen from the hook follows the open prop.

Feedback panel

useMedianFeedback() and medianFeedback control MedianFeedback the same way. The feedback panel keeps its own state. Opening it never opens the support panel.

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

function FeedbackMenuItem() {
  const feedback = useMedianFeedback();

  return <MenuItem onSelect={feedback.open}>Share feedback</MenuItem>;
}

A MedianFeedback with no children and no anchor has no trigger. It opens in the bottom right corner when you call open(). To hang it off a button inside a dropdown, see Feedback panel.

MedianFeedback takes open and onOpenChange too.

The same rules apply as for the support panel.

Without React

Each component has a mount function for pages with no React of their own: Vue, Svelte, Rails templates, plain HTML. It takes the component’s props as one options object.

import "@mediansh/widget/styles.css";
import { medianSupport, mountMedianSupport } from "@mediansh/widget";

const support = mountMedianSupport({
  apiKey: "median_pk_...",
  launcher: "hidden",
});

document.querySelector("#help")?.addEventListener("click", () => {
  medianSupport.open();
});

// When someone signs in.
support.update({ user: { name: "Ada", email: "ada@example.com" } });

Install the package as described in Install the widget. The package is an ES module and imports react, react-dom and convex, so the page needs a bundler and those three installed. Your own code does not use React.

Callbacks such as onOpenChange, onNavigate, onSignIn and onSent work as options.

The instance

Every mount function returns the same two methods.

• update() after unmount() changes nothing. Mount again to bring the component back.
• update() cannot move the contact form. To change target, unmount and mount again.
• Each call mounts a new copy. Two support widgets, or two feedback panels, share one open state and open together.

The target option

target says where the contact form goes. It is a CSS selector or an element.

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

mountMedianContactForm({
  target: "#contact",
  apiKey: "median_pk_...",
  fields: [{ name: "name", label: "Name", required: true }],
});

• The selector is looked up once, when you call the function. The element must exist by then.
• The form renders into its own container inside the target. Anything else in the target stays.
• If nothing matches, nothing is mounted, the console says so, and the returned instance does nothing.
• An invalid selector throws a SyntaxError from mountMedianContactForm. Nothing is logged.

Console messages

Warnings print only in development builds, where your bundler sets process.env.NODE_ENV to "development". Errors always print.