CloudTalk Phone insluiten in een webapplicatie

In deze handleiding leest u hoe u de interface van CloudTalk Phone met een iframe in uw eigen webapplicatie insluit.

Gebruikersniveau:

Admin

Het iFrame installeren

Initialisatie

CloudTalk Phone insluiten en initialiseren:

Gebruik een iframe met de volgende bronnotatie:
https://phone.cloudtalk.io?partner=yourappname
Vervang yourappname door de identificatie van uw systeem in de queryparameter partner.

Voorbeeld:

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

Vereisten

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.

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.

Luisteren naar events

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", ...).

Ondersteunde events

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

Belangrijk gedrag van events

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

Voorbeeldpayload

{
  "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 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 — we staan voor u klaar.

Aan de slag

Nummers & portering

AI

AI Sales Dialer

CloudTalk Phone & Go

Berichten

Dashboard

Integraties

Facturering & abonnement

Technisch nieuws & updates

Oude Dashboard

CloudTalk Phone insluiten in een webapplicatie

Het iFrame installeren

Initialisatie

Vereisten

Luisteren naar events

Ondersteunde events

Belangrijk gedrag van events

Voorbeeldpayload

​Het iFrame installeren

​Initialisatie

​Vereisten

​Luisteren naar events

​Ondersteunde events

​Belangrijk gedrag van events

​Voorbeeldpayload

Het iFrame installeren

Initialisatie

Vereisten

Luisteren naar events

Ondersteunde events

Belangrijk gedrag van events

Voorbeeldpayload