Meeto Widget: Entwicklerdoku

Wähle deinen Stack, ersetze YOUR_KEY durch deinen Schlüssel und gib dem Container eine Höhe — das Widget füllt sie zu 100 %.

<div id="meeto-call" style="height: 520px"></div>
<script src="https://meeto.me/widget.js" data-key="YOUR_KEY" data-target="#meeto-call"></script>

npm-Pakete: @meeto/embed-core (ohne Abhängigkeiten), @meeto/embed-react, @meeto/embed-vue, @meeto/embed-angular. Das einfache Skript widget.js funktioniert ohne Build-Schritt.

Attribute des Tags <script src="https://meeto.me/widget.js"> (* — erforderlich). Dieselben Optionen gibt es in der JavaScript-API (key, container, room, name, lang, accent, autoJoin, baseUrl) und als Attribute der Web-Komponente <meeto-room>.

Raum-Links bleiben gültig: Jeder Widget-Raum lässt sich auch unter meeto.me/<code> öffnen.

Abonniere über widget.on(type, handler) (gibt eine Funktion zum Abbestellen zurück), die Option onEvent, Framework-Komponenten-Props oder meeto:*-CustomEvents des Elements <meeto-room>.

const widget = new MeetoWidget({ key: "mk_live_…", container: "#call" });
const off = widget.on("joined", (e) => console.log(e.room));
widget.on("participants", (e) => console.log("in call:", e.count));

Methoden der Widget-Instanz:

In einem Raum mit Anklopfen, Passwort oder Sperre lässt join() den Besucher in der Lobby, und das Widget löst error mit dem Code join_not_allowed aus — lassen Sie ihn stattdessen selbst aus der Lobby beitreten.

Für serverseitige Abläufe (Räume aus deinem Backend erstellen, Links versenden, entscheiden, wer Host wird) verwende den geheimen Schlüssel mk_secret_… — er wird beim Erstellen des Embeds einmal angezeigt:

curl -X POST https://api.meeto.me/api/embed/rooms \
  -H "Authorization: Bearer mk_secret_…"
# → 201 { "slug": "misty-fox-42", "hostSecret": "…" }

curl -X POST https://api.meeto.me/api/v1/meetings \
  -H "Authorization: Bearer mk_secret_…" \
  -H "Content-Type: application/json" \
  -H "Idempotency-Key: appointment-872" \
  -d '{
    "title": "Project review",
    "startsAt": "2027-03-22T10:00:00+02:00",
    "durationMin": 45,
    "timezone": "Europe/Tallinn"
  }'
# → 201 { "meeting": { "id": "…", "joinUrl": "https://meeto.me/…?k=…" }, "hostSecret": "…" }

curl https://api.meeto.me/api/v1/meetings \
  -H "Authorization: Bearer mk_secret_…"

hostSecret macht seinen Inhaber zum Raum-Host: Übergib den Raum per data-room an das Widget und gib hostSecret nur an deine eigenen Mitarbeiter. Anfragen mit dem geheimen Schlüssel überspringen die Domain-Prüfung — gib ihn niemals im Browser-Code preis.

Die versionierte API (/api/v1) ist im Pro-Tarif verfügbar: Anfragen mit dem Schlüssel eines Free-Kontos erhalten 402 plan_required. Das Widget selbst funktioniert in jedem Tarif.

Native Wrapper betten dasselbe Widget in Ihre App ein: ein WebView mit einer typisierten Ereignis-/Befehlsbrücke. Registrieren Sie den App-Ursprung app://<bundle-id> in den Domains des Schlüssels.

iOS (Swift Package, iOS 14+)

// Xcode → File → Add Package Dependencies…
https://github.com/meeto-app/meeto-widget-ios.git   // from: 0.1.2

import MeetoWidget

MeetoWidget(config: .init(key: "mk_live_…", roomName: "support")) { event in
    if event.type == "left" { /* close the screen */ }
}

Swift Package; fügen Sie NSCameraUsageDescription und NSMicrophoneUsageDescription zur Info.plist hinzu.

Android (Kotlin, minSdk 24)

// settings.gradle.kts
dependencyResolutionManagement { repositories { maven("https://jitpack.io") } }

// module's build.gradle.kts
dependencies { implementation("com.github.meeto-app:meeto-widget-android:0.1.3") }

val widget = MeetoWidgetView(this)
widget.onEvent = { event -> if (event.type == "left") finish() }
container.addView(widget)
widget.load(MeetoWidgetConfig(key = "mk_live_…", roomName = "support"))

Gradle-Modul; deklarieren Sie CAMERA / RECORD_AUDIO / INTERNET und fordern Sie Laufzeitberechtigungen an, bevor Sie das Widget anzeigen.

Ereignisse (ready, joined, left, participants, error) und Befehle (join, leave, setMicrophone, setCamera) sind mit dem Web-SDK identisch.

Quellcode und Releases: meeto-app/meeto-widget-ios ↗meeto-app/meeto-widget-android ↗

Fügen Sie das Widget ohne Programmierung zu einer WordPress-Website hinzu: eine schwebende Anrufschaltfläche auf jeder Seite oder einen eingebetteten Anruf per Shortcode.

1. Öffnen Sie in der WordPress-Verwaltung Plugins → Installieren → Plugin hochladen und laden Sie die zip-Datei hoch.
2. Aktivieren Sie das Plugin und öffnen Sie Einstellungen → Meeto Widget.
3. Fügen Sie Ihren Embed-Schlüssel ein (mit der hinzugefügten Domain Ihrer Website) — die Anrufschaltfläche ist aktiv.

Für ein eingebettetes Widget deaktivieren Sie in den Einstellungen das automatische Einfügen und platzieren Sie den Shortcode auf einer beliebigen Seite: [meeto_widget room_name="support" height="600"]

Widget-Räume folgen dem Tarif des Schlüsselinhabers:

• Kostenlos — bis zu 10 Teilnehmer, Gruppenanrufe bis 60 Minuten, bis zu 1080p.
• Pro — bis zu 25 Teilnehmer, kein Zeitlimit für 2 gleichzeitige Meetings und bis zu 4K auf unterstützten Desktop-Geräten. Das Meeto-Branding bleibt sichtbar.

• Der öffentliche Schlüssel ist kein Geheimnis: Er ist im Quelltext deiner Seite sichtbar, das ist beabsichtigt.
• Das Widget funktioniert nur auf Domains, die für den Schlüssel registriert sind. Der Browser meldet den Origin der einbettenden Website auf eine Weise, die Seiten nicht fälschen können (postMessage event.origin), und das Meeto-Backend prüft ihn.
• Der geheime Schlüssel mk_secret_… wird gehasht gespeichert und nur einmal angezeigt. Verwende ihn ausschließlich server-to-server.
• Ein durchgesickerter oder ungenutzter Schlüssel kann jederzeit im Dashboard widerrufen werden — das Widget stoppt sofort.