> ## 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 insluiten in een webapplicatie

> Sluit de CloudTalk Phone in via een iframe en verwerk events zoals ringing en hangup.

<Note>
  In deze handleiding leest u hoe u de interface van **CloudTalk Phone** met een `iframe` in uw eigen webapplicatie insluit.
</Note>

**Gebruikersniveau:**

* Admin

***

<h2 id="h_fd3f8a4e71">
  Het iFrame installeren
</h2>

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

CloudTalk Phone insluiten en initialiseren:

* Gebruik een `iframe` met de volgende bronnotatie:\
  [`https://phone.cloudtalk.io?partner=yourappname`](https://phone.cloudtalk.io?partner=yourappname)

* Vervang `yourappname` door de identificatie van uw systeem in de queryparameter `partner`.

**Voorbeeld**:

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

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

* **Minimale afmetingen:** 700px hoogte × 420px breedte

* CloudTalk Phone moet worden ingesloten in een **Single Page Application (SPA)**. CloudTalk Phone mag **niet opnieuw worden geladen** wanneer u binnen uw applicatie tussen weergaven navigeert.

<Warning>
  **Meldingen worden niet ondersteund** in de ingesloten versie. In sommige gevallen zien gebruikers een waarschuwing als *"Meldingen zijn niet ingeschakeld"* - dit is een bekend visueel probleem en heeft geen invloed op de werking.
</Warning>

<h2 id="h_d44a194390">
  Luisteren naar events
</h2>

U kunt zich met `window.onmessage` registreren voor events van CloudTalk Phone. Zo kan uw systeem reageren op events zoals inkomende oproepen of het ophangen van een gesprek (bijvoorbeeld door een paneel met contactgegevens te tonen of de telefoon naar de voorgrond te halen).

De ingesloten CloudTalk Phone communiceert met de bovenliggende applicatie via `window.postMessage`. U kunt luisteren met `window.onmessage` of `window.addEventListener("message", ...)`.

<h3 id="h_0f5943ef25">
  Ondersteunde events
</h3>

* `ringing` – wordt geactiveerd wanneer een melding van een inkomende oproep verschijnt (de oproep begint te rinkelen in de ingesloten telefoon)

* `dialing` – wordt geactiveerd wanneer een gebruiker een uitgaande oproep start (op bellen klikt)

* `calling` – wordt geactiveerd wanneer de oproep wordt beantwoord (de andere partij neemt op)

* `hangup` – wordt geactiveerd wanneer de gebruiker op de rode knop klikt om het gesprek te beëindigen (handeling van de gebruiker)

* `ended` – wordt geactiveerd wanneer de gesprekssessie volledig is beëindigd

* `contact_info` – wordt geactiveerd wanneer contactgegevens die bij de oproep horen beschikbaar zijn of worden bijgewerkt

<h4 id="h_4e7794e895">
  Belangrijk gedrag van events
</h4>

Als een gebruiker een gesprek handmatig beëindigt:

* wordt eerst `hangup` geactiveerd (handeling van de gebruiker)

* daarna wordt `ended` geactiveerd (afbouw van de sessie)

`ended` kan echter ook worden geactiveerd zonder voorafgaande `hangup` (bijvoorbeeld wanneer de oproep wordt geweigerd, mislukt of door een fout eindigt).

**Aanbevolen gebruik:**

* Luister naar `hangup` als u specifiek wilt reageren op een gebruiker die een gesprek handmatig beëindigt.

* Luister naar `ended` als u wilt vaststellen dat het gesprek volledig is afgerond, ongeacht hoe het is geëindigd.

Misschien wilt u **een geminimaliseerd telefoonvenster maximaliseren** bij een inkomende oproep, of **automatisch de pagina met contactgegevens van de beller openen** in uw systeem.

**Voorbeeld**:

```
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">
  Voorbeeldpayload
</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 volgen dezelfde structuur: `event` + `properties` met call\_uuid, external\_number, internal\_number en contact (indien beschikbaar).

***

*Hulp nodig of een vraag?* Neem gerust contact op via ons [Support portal](https://support.cloudtalk.io/hc/en-us/requests/new?ticket_form_id=26305535257884) — we staan voor u klaar.


## Related topics

- [Gids voor CloudTalk Phone](/nl/articles/10559000-cloudtalk-phone-guide.md)
- [Uw microfoon en luidsprekers configureren](/nl/articles/2144676-configuring-your-microphone-and-speakers.md)
- [CloudTalk Phone gebruiken](/nl/articles/2144759-using-cloudtalk-phone.md)


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