CloudTalk Phone in eine Webanwendung einbetten

In dieser Anleitung erfahren Sie, wie Sie die Oberfläche von CloudTalk Phone mithilfe eines iframe in Ihre eigene Webanwendung einbetten.

Benutzerebene:

Admin

Das iFrame installieren

Initialisierung

So betten Sie CloudTalk Phone ein und initialisieren es:

Verwenden Sie ein iframe mit folgendem Quellformat:
https://phone.cloudtalk.io?partner=yourappname
Ersetzen Sie yourappname im Abfrageparameter partner durch die Kennung Ihres Systems.

Beispiel:

<iframe src="https://phone.cloudtalk.io?partner=mycrm" allow="microphone *" height="700px" width="420px"></iframe>

Voraussetzungen

Mindestabmessungen: 700px Höhe × 420px Breite
Das CloudTalk Phone muss in eine Single Page Application (SPA) eingebettet werden. Es darf nicht neu geladen werden, wenn Sie innerhalb Ihrer Anwendung zwischen Ansichten wechseln.

Benachrichtigungen werden in der eingebetteten Version nicht unterstützt. In manchen Fällen wird Benutzern eine Warnung wie „Benachrichtigungen sind nicht aktiviert” angezeigt – dies ist ein bekanntes Anzeigeproblem und beeinträchtigt die Funktionalität nicht.

Events abhören

Sie können sich mit window.onmessage für Events des CloudTalk Phone registrieren. So kann Ihr System auf Events wie eingehende Anrufe oder das Auflegen reagieren (z. B. indem es ein Panel mit Kontaktdetails anzeigt oder das Phone in den Vordergrund holt). Das eingebettete CloudTalk Phone kommuniziert über window.postMessage mit der übergeordneten Anwendung. Sie können mit window.onmessage oder window.addEventListener("message", ...) mithören.

Unterstützte Events

ringing – wird ausgelöst, wenn eine Benachrichtigung über einen eingehenden Anruf erscheint (der Anruf beginnt im eingebetteten Phone zu klingeln)
dialing – wird ausgelöst, wenn ein Benutzer einen ausgehenden Anruf startet (auf Wählen klickt)
calling – wird ausgelöst, wenn der Anruf angenommen wird (die Gegenseite hebt ab)
hangup – wird ausgelöst, wenn der Benutzer auf die rote Schaltfläche zum Beenden des Anrufs klickt (Benutzeraktion)
ended – wird ausgelöst, wenn die Anrufsitzung vollständig beendet ist
contact_info – wird ausgelöst, wenn Kontaktdaten zum Anruf verfügbar sind oder aktualisiert werden

Wichtiges Verhalten der Events

Wenn ein Benutzer einen Anruf manuell beendet:

hangup wird zuerst ausgelöst (Benutzeraktion)
ended wird danach ausgelöst (Beenden der Sitzung)

ended kann jedoch auch ohne vorheriges hangup ausgelöst werden (zum Beispiel, wenn der Anruf abgelehnt wird, fehlschlägt oder aufgrund eines Fehlers endet). Empfohlene Verwendung:

Hören Sie auf hangup, wenn Sie gezielt darauf reagieren möchten, dass ein Benutzer einen Anruf manuell beendet.
Hören Sie auf ended, wenn Sie erkennen möchten, dass der Anruf vollständig abgeschlossen ist – unabhängig davon, wie er beendet wurde.

Vielleicht möchten Sie bei einem eingehenden Anruf ein minimiertes Telefonfenster maximieren oder automatisch die Kontaktdetailseite des Anrufers in Ihrem System öffnen. Beispiel:

window.addEventListener("message", function (e) {
  try {
    const eventData = JSON.parse(e.data);
    console.log(eventData);

    switch (eventData.event) {
      case "ringing":
        console.log("Incoming call from:", eventData.properties.external_number);
        break;

      case "dialing":
        console.log("Outbound call started");
        break;

      case "calling":
        console.log("Call answered");
        break;

      case "hangup":
        console.log("User ended the call");
        break;

      case "ended":
        console.log("Call fully terminated");
        break;

      case "contact_info":
        console.log("Contact data received:", eventData.properties.contact);
        break;
    }
  } catch (error) {
    console.error("Invalid event data:", error);
  }
});

Beispiel-Payload

{
  "event": "ringing",
  "properties": {
    "call_uuid": "12345678-1234-1234-123a-012345a6789b",
    "external_number": "+44 20 3868 0167",
    "internal_number": "+1 888 487 1675",
    "contact": {
      "id": 1234,
      "name": "John Doe",
      "company": "Company Inc.",
      "contact_emails": [
        "[email protected]",
        "[email protected]"
      ],
      "contact_numbers": [
        "+44 20 3868 0167",
        "+44123123123"
      ],
      "external_urls": [
        {
          "external_system": "mycrm",
          "external_url": "https://mycrm.io/contact/123"
        }
      ],
      "tags": ["VIP", "Europe"]
    }
  }
}

Alle Events folgen derselben Struktur: event + properties mit call_uuid, external_number, internal_number und contact (sofern verfügbar).

Brauchen Sie Hilfe oder haben Sie eine Frage? Wenden Sie sich einfach über unser Support-Portal an uns – wir sind für Sie da.

Erste Schritte

Nummern & Portierung

KI

AI Sales Dialer

CloudTalk Phone & Go

Nachrichten

Dashboard

Integrationen

Abrechnung & Abonnement

Tech-News & Updates

Altes Dashboard

CloudTalk Phone in eine Webanwendung einbetten

Das iFrame installieren

Initialisierung

Voraussetzungen

Events abhören

Unterstützte Events

Wichtiges Verhalten der Events

Beispiel-Payload

​Das iFrame installieren

​Initialisierung

​Voraussetzungen

​Events abhören

​Unterstützte Events

​Wichtiges Verhalten der Events

​Beispiel-Payload

Das iFrame installieren

Initialisierung

Voraussetzungen

Events abhören

Unterstützte Events

Wichtiges Verhalten der Events

Beispiel-Payload