Add a video call to an Angular app.

Install the Angular package

Install the published package in the Angular app that will show the call. It brings @meeto/embed-core along and has no other runtime dependencies besides tslib.

npm install @meeto/embed-angular

Create the key before you test. In Settings → Website widget, add every origin that will host the component, for example http://localhost:4200 for ng serve and your production domain. A key that does not allow the current origin refuses to load the call.

Render an inline call room

Import MeetoRoomComponent into a standalone component and place <meeto-room> in its template. The call fills the element, so give it a display and a height.

import { Component } from "@angular/core";
import { MeetoRoomComponent } from "@meeto/embed-angular";

@Component({
  selector: "app-support-call",
  standalone: true,
  imports: [MeetoRoomComponent],
  template: `
    <meeto-room
      embedKey="mk_live_…"
      roomName="support"
      name="Visitor"
      style="display:block;height:520px"
      (joined)="onJoined($event.room)"
    ></meeto-room>
  `,
})
export class SupportCallComponent {
  onJoined(room: string) {
    console.log("joined", room);
  }
}

roomName sends every visitor to one persistent room, such as support, and the key owner joins it as host from the dashboard. Pass room instead when your server already made an open room: POST /api/embed/rooms with the secret key returns its code on every plan, and such a room expires after 24 hours without activity (on Free, also once its free hour is used). Meetings scheduled through the REST API use password rooms, and the widget cannot pass the password, so share their joinUrl instead. With neither, the widget creates a room and reuses it for the browser tab.

Which inputs does the component take?

Changing any of these inputs later destroys the iframe and builds a new one, which drops the visitor out of a running call. Set them before the call starts.

<meeto-room
  embedKey="mk_live_…"
  mode="bubble"
  roomName="sales"
  position="bottom-left"
  label="Talk to sales"
></meeto-room>

In bubble mode the element itself stays empty and the widget draws its own button and panel over the page. With a roomName, the button shows how many people are in the room. Closing the panel does not end the call.

Outputs, methods and the widget instance

Each widget event has its own output, and (meetoEvent) carries all of them as one stream. Note that the error output is named widgetError, not error.

import { Component, ViewChild } from "@angular/core";
import { MeetoRoomComponent } from "@meeto/embed-angular";

@Component({
  selector: "app-consultation",
  standalone: true,
  imports: [MeetoRoomComponent],
  template: `
    <meeto-room
      embedKey="mk_live_…"
      [room]="roomCode"
      style="display:block;height:520px"
      (phase)="phase = $event.phase"
      (participants)="count = $event.count"
      (left)="onLeft($event.reason, $event.durationSec)"
      (widgetError)="onError($event.code)"
    ></meeto-room>
    <button type="button" (click)="call.setMicrophone(false)">Mute me</button>
    <button type="button" (click)="call.leave()">Leave</button>
  `,
})
export class ConsultationComponent {
  @ViewChild(MeetoRoomComponent) call!: MeetoRoomComponent;
  // An open room your server created with POST /api/embed/rooms
  roomCode = "misty-fox-a18f493cb027fe823cb6";
  phase = "prejoin";
  count = 0;

  onLeft(reason: string, durationSec: number) {
    console.log("left", reason, durationSec);
  }
  onError(code: string) {
    console.error("Meeto widget error", code);
  }
}

Through @ViewChild(MeetoRoomComponent) you can call join(name?), leave(), setMicrophone(on) and setCamera(on). The meeto getter returns the underlying MeetoWidget for open() and close() of the bubble panel and for the current room code. In a room with knocking, a password or a lock, join() keeps the visitor in the lobby and the widget reports join_not_allowed.

Does it work with Angular server-side rendering?

Only in the browser. The component creates the call in ngOnInit, and the widget refuses to start outside a browser, so a server-rendered route must not render it on the server. Wrap it in a plain @defer block, without hydrate triggers: Angular renders the placeholder on the server and the call in the browser.

@defer {
  <meeto-room embedKey="mk_live_…" roomName="support" style="display:block;height:520px"></meeto-room>
} @placeholder {
  <div style="height:520px">Loading the call…</div>
}

An isPlatformBrowser check around the element works too. Zone-wise you need nothing extra: the iframe and its message listener run outside the Angular zone, and outputs re-enter it only when they fire.

Production checklist and limits

Calls are encrypted in transit and run through Meeto's media servers; they are not end-to-end encrypted. Keep the server key mk_secret_… out of the Angular bundle; only the public key belongs there. See the website video call widget for the inline and bubble layouts in action.

Frequently asked questions

Explore more with Meeto