Embed a Meeto call with plain JavaScript.

Install the framework-agnostic package

Install the published core package in a browser application or a static-site build. It has no runtime dependencies.

npm install @meeto/embed-core

Create a public key in the widget dashboard and allow both your local and production origins before testing. A key that does not allow the current origin cannot load the iframe.

Create an inline or floating widget

Construct MeetoWidget only after the DOM exists. An inline widget fills the element you pass as container, so give that element a real height.

import { MeetoWidget } from "@meeto/embed-core";

const call = new MeetoWidget({
  key: "mk_live_…",
  container: "#call",
  roomName: "support",
  name: "Visitor",
  lang: "en",
});

const stop = call.on("joined", (event) => {
  console.log("joined room", event.room);
});

// Later, during page teardown:
stop();
call.destroy();

roomName is a persistent shared destination such as support. Use room when your application already has a room code. Leave both unset when the widget should create and reuse a room for the current tab.

Subscribe to typed events and controls

Call on(type, handler) to receive one event type and keep the returned function when you need to unsubscribe. The alternative onEvent option receives every event.

call.on("phase", (event) => {
  document.body.dataset.callPhase = event.phase;
});
call.on("participants", (event) => {
  console.log("participants", event.count);
});
call.on("error", (event) => {
  console.error(event.code, event.message);
});

call.join("Visitor");
call.setMicrophone(true);
call.setCamera(false);
call.leave();

open and close control the bubble panel and are no-ops for inline mode. frame exposes the iframe for advanced styling, while room reports the current room code after a join.

Use the <meeto-room> Web Component

The same package exports a custom element for plain HTML and stacks that support custom elements. Register it once in a browser, then give the element a height.

<meeto-room
  key="mk_live_…"
  room-name="support"
  name="Visitor"
  style="display:block;height:520px"
></meeto-room>
<script type="module">
  import { registerMeetoElement } from "@meeto/embed-core";
  registerMeetoElement();

  document.querySelector("meeto-room")
    ?.addEventListener("meeto:joined", (event) => {
      console.log("joined", event.detail.room);
    });
</script>

The element re-dispatches meeto:ready, meeto:phase, meeto:joined, meeto:left, meeto:participants and meeto:error as bubbling CustomEvents. Setting an observed attribute later rebuilds the iframe, so update identity options deliberately.

Production checklist and boundaries

The widget uses WebRTC encryption in transit and is not end-to-end encrypted. Keep server credentials outside browser code; only the origin-locked public embed key belongs in this package.

Frequently asked questions

Explore more with Meeto