Add a video call to React or Next.js.

Install the React wrapper

Install the published package in the app that will render the call. It declares React 18 or newer as a peer dependency and uses the Meeto core widget underneath.

npm install @meeto/embed-react

Create the key before testing the component. In the widget dashboard, add both your local origin (for example http://localhost:3000) and the production origin. An origin mismatch prevents the iframe from loading even when the React code is correct.

Render an inline room

MeetoRoom owns the iframe lifecycle and gives it the height of its container. Pass the public key as embedKey; React's reserved key prop is not used for authentication.

import { MeetoRoom } from "@meeto/embed-react";

export function SupportCall() {
  return (
    <MeetoRoom
      embedKey="mk_live_…"
      roomName="support"
      style={{ height: 520, width: "100%" }}
      onJoined={(event) => console.log("joined", event.room)}
    />
  );
}

Use roomName for a persistent shared destination such as support or sales. Everyone using that configured key and room name reaches the same room. For an appointment-specific destination, use a booking page or pass an existing room code instead.

Connect call events to your UI

Use the typed callback props for common states or one onEvent stream when your product has a single analytics or state handler.

<MeetoRoom
  embedKey="mk_live_…"
  style={{ height: 520 }}
  onPhase={(event) => setPhase(event.phase)}
  onParticipants={(event) => setCount(event.count)}
  onError={(event) => reportError(event.code)}
  onLeft={(event) => recordDuration(event.durationSec)}
/>

For imperative controls, use useMeetoRoom. It returns join, leave, setMicrophone and setCamera, plus a container ref. Do not call the hook from a server component; place the hook in a client component boundary.

Production checklist and limits

Media uses WebRTC encryption in transit. It is not end-to-end encrypted. Keep any API or host credentials on your server; only the origin-locked public embed key belongs in browser code. See privacy details before documenting your own data flow.

Frequently asked questions

Explore more with Meeto