> ## Documentation Index
> Fetch the complete documentation index at: https://help.cloudtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# CloudTalk Phone in eine Webanwendung einbetten

> Betten Sie das CloudTalk Phone per iframe ein und verarbeiten Sie Events wie Klingeln und Auflegen.

<Note>
  In dieser Anleitung erfahren Sie, wie Sie die Oberfläche von **CloudTalk Phone** mithilfe eines `iframe` in Ihre eigene Webanwendung einbetten.
</Note>

**Benutzerebene:**

* Admin

***

<h2 id="h_fd3f8a4e71">
  Das iFrame installieren
</h2>

<h3 id="h_4020b74e0a">
  Initialisierung
</h3>

So betten Sie CloudTalk Phone ein und initialisieren es:

* Verwenden Sie ein `iframe` mit folgendem Quellformat:\
  [`https://phone.cloudtalk.io?partner=yourappname`](https://phone.cloudtalk.io?partner=yourappname)

* Ersetzen Sie `yourappname` im Abfrageparameter `partner` durch die Kennung Ihres Systems.

**Beispiel**:

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

<h3 id="h_d707360075">
  Voraussetzungen
</h3>

* **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.

<Warning>
  **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.
</Warning>

<h2 id="h_d44a194390">
  Events abhören
</h2>

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.

<h3 id="h_0f5943ef25">
  Unterstützte Events
</h3>

* `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

<h4 id="h_4e7794e895">
  Wichtiges Verhalten der Events
</h4>

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);
  }
});
```

<h3 id="h_9ef8c42217">
  Beispiel-Payload
</h3>

```json theme={"system"}
{
  "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": [
        "john.doe@company.io",
        "j.doe@gmail.com"
      ],
      "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](https://support.cloudtalk.io/hc/en-us/requests/new?ticket_form_id=26305535257884) an uns – wir sind für Sie da.


## Related topics

- [Leitfaden zu CloudTalk Phone](/de/articles/10559000-cloudtalk-phone-guide.md)
- [Mikrofon und Lautsprecher konfigurieren](/de/articles/2144676-configuring-your-microphone-and-speakers.md)
- [CloudTalk Phone verwenden](/de/articles/2144759-using-cloudtalk-phone.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.