mq-router

The full Mediquo app shell — conversations, appointments, schedules, and more — as a single embeddable web component.

<mq-router> renders the complete Mediquo patient/professional experience in a single custom element. It manages its own internal routing, authentication state, and locale.

Installation

npm install @mediquo/web-components

import "@mediquo/web-components/mq-router";
import { setEnv } from "@mediquo/web-components/env";

setEnv("production"); // call once per app

Usage

HTML

<mq-router
  base-url="/app"
  token="<your-token>"
  api-key="<your-api-key>"
  locale="es_ES"
  padded
  theme="mediquo"
></mq-router>

React / Next.js

Load the component client-side only (Lit web components cannot SSR):

"use client";
import { useEffect, useRef } from "react";
import { setEnv } from "@mediquo/web-components/env";

setEnv("production");

export function RouterSection() {
  useEffect(() => {
    import("@mediquo/web-components/mq-router");
  }, []);

  return (
    <div style={{ height: "600px" }}>
      {/* @ts-expect-error — custom element */}
      <mq-router
        base-url="/app"
        token={token}
        api-key={apiKey}
        locale="es_ES"
        padded
        theme="mediquo"
      />
    </div>
  );
}

Attributes

Attribute	Type	Required	Description
`base-url`	`string`	Yes	The URL prefix the router mounts under. Internal navigation appends paths here.
`token`	`string`	Yes	JWT authentication token.
`api-key`	`string`	Yes	API key for the Mediquo platform.
`locale`	`string`	No	BCP 47-style locale code: `es_ES`, `en_US`, `pt_PT`, `de_DE`, `ca_ES`. Defaults to `es_ES`.
`theme`	`string`	No	Preset name (`mediquo`, `adeslas`, `default`) or `custom` when using a token theme.
`padded`	`boolean`	No	Adds internal padding to the root container.

Events

Event	Detail	Description
`mq-event-received`	`{ name: string; data: unknown }`	Fired when the Mediquo backend emits a socket event. Useful for notification badges and unread counts.
`download-file`	`{ url: string; filename: string }`	Fired when the user triggers a file download inside the router. The host app is responsible for fetching and saving the file.

Listening to events

const router = document.querySelector("mq-router");

router.addEventListener("mq-event-received", (e) => {
  console.log(e.name, e.data);
});

router.addEventListener("download-file", async (e) => {
  const { url, filename } = e;
  const blob = await fetch(url).then((r) => r.blob());
  const link = document.createElement("a");
  link.href = URL.createObjectURL(blob);
  link.download = filename;
  link.click();
});

Theming

Wrap the component with <mq-theme-provider> to apply CSS token overrides:

import "@mediquo/web-components/mq-theme-provider";
import { createTheme } from "@mediquo/web-components/theme";

const myTheme = createTheme({
  "--color-primary": "#e63946",
  "--border-radius-md": "0.75rem",
});

<mq-theme-provider theme="custom" style="...tokens">
  <mq-router ... theme="custom"></mq-router>
</mq-theme-provider>

Interactive playground

Documentation pages show usage only. For a full-page, interactive demo with sidebar → Devtools (dialog: API key and token), open the standalone demo route on this site:

/web-components/mq-router/demo

The demo mounts <mq-router> with base-url="/web-components/mq-router/demo" so in-app navigation stays under that prefix.

On this page