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

# Intégrer CloudTalk Phone dans une application web

> Intégrez CloudTalk Phone via une iframe et gérez des événements comme la sonnerie ou le raccrochage.

<Note>
  Ce guide explique comment intégrer l'interface **CloudTalk Phone** dans votre propre application web à l'aide d'une `iframe`.
</Note>

**Niveau utilisateur :**

* Admin

***

<h2 id="h_fd3f8a4e71">
  Installer l'iFrame
</h2>

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

Pour intégrer et initialiser CloudTalk Phone :

* Utilisez une `iframe` avec le format de source suivant :\
  [`https://phone.cloudtalk.io?partner=yourappname`](https://phone.cloudtalk.io?partner=yourappname)

* Remplacez `yourappname` par l'identifiant de votre système dans le paramètre de requête `partner`.

**Exemple** :

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

<h3 id="h_d707360075">
  Prérequis
</h3>

* **Dimensions minimales :** 700px de hauteur × 420px de largeur

* CloudTalk Phone doit être intégré dans une **application monopage (SPA)**. Il ne doit **pas être rechargé** lorsque vous naviguez entre les vues de votre application.

<Warning>
  **Les notifications ne sont pas prises en charge** dans la version intégrée. Dans certains cas, les utilisateurs peuvent voir un avertissement du type *« Les notifications ne sont pas activées »* - il s'agit d'un problème d'affichage connu, sans impact sur le fonctionnement.
</Warning>

<h2 id="h_d44a194390">
  Écouter les événements
</h2>

Vous pouvez vous abonner aux événements de CloudTalk Phone via `window.onmessage`. Votre système peut ainsi réagir à des événements comme les appels entrants ou les raccrochages (par exemple en affichant un panneau de détails du contact ou en mettant le téléphone au premier plan).

Le CloudTalk Phone intégré communique avec l'application parente via `window.postMessage`. Vous pouvez écouter avec `window.onmessage` ou `window.addEventListener("message", ...)`.

<h3 id="h_0f5943ef25">
  Événements pris en charge
</h3>

* `ringing` – déclenché lorsqu'une notification d'appel entrant apparaît (l'appel commence à sonner dans le téléphone intégré)

* `dialing` – déclenché lorsqu'un utilisateur lance un appel sortant (clic sur composer)

* `calling` – déclenché lorsque l'appel est décroché (l'interlocuteur répond)

* `hangup` – déclenché lorsque l'utilisateur clique sur le bouton rouge de fin d'appel (action de l'utilisateur)

* `ended` – déclenché lorsque la session d'appel est entièrement terminée

* `contact_info` – déclenché lorsque les données de contact liées à l'appel sont disponibles ou mises à jour

<h4 id="h_4e7794e895">
  Comportement important des événements
</h4>

Si un utilisateur met fin à un appel manuellement :

* `hangup` se déclenche en premier (action de l'utilisateur)

* `ended` se déclenche ensuite (fermeture de la session)

Cependant, `ended` peut aussi se déclencher sans `hangup` préalable (par exemple lorsque l'appel est rejeté, échoue ou se termine à cause d'une erreur).

**Utilisation recommandée :**

* Écoutez `hangup` si vous devez réagir spécifiquement à un appel terminé manuellement par l'utilisateur.

* Écoutez `ended` si vous devez détecter qu'un appel est entièrement terminé, quelle qu'en soit la cause.

Vous souhaiterez peut-être **agrandir une fenêtre de téléphone réduite** lors d'un appel entrant, ou **ouvrir automatiquement la fiche de contact de l'appelant** dans votre système.

**Exemple** :

```
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">
  Exemple de charge utile
</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"]
    }
  }
}
```

Tous les événements suivent cette même structure : `event` + `properties` contenant call\_uuid, external\_number, internal\_number et contact (si disponible).

***

*Besoin d'aide ou vous avez une question ?* Écrivez-nous simplement via notre [Portail Support](https://support.cloudtalk.io/hc/en-us/requests/new?ticket_form_id=26305535257884) — nous sommes là pour vous.


## Related topics

- [Guide CloudTalk Phone](/fr/articles/10559000-cloudtalk-phone-guide.md)
- [Utiliser CloudTalk Phone](/fr/articles/2144759-using-cloudtalk-phone.md)
- [Configurer votre microphone et vos haut-parleurs](/fr/articles/2144676-configuring-your-microphone-and-speakers.md)


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