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

# Composeur intégré

> Ajoutez le composeur Allo dans votre propre application

Vous pouvez intégrer votre propre composeur Allo directement dans votre application. Votre équipe passe et reçoit des appels sans quitter votre produit, et votre application reste synchronisée avec ce qui se passe sur chaque appel.

Ça fonctionne avec une seule iframe.

## Comment connecter

Ajoutez cette iframe là où vous voulez afficher le composeur :

```html theme={null}
<iframe
  src="https://web.withallo.com?variant=dialer"
  allow="microphone; autoplay"
  style="width: 376px; height: 640px; border: 0;"
></iframe>
```

Votre équipe se connecte à Allo dans le composeur la première fois. Pour l'activer sur votre site, écrivez à [support@withallo.com](mailto:support@withallo.com) avec les domaines depuis lesquels vous voulez l'intégrer.

## Événements que vous pouvez envoyer

Pilotez le composeur depuis votre application :

| Événement | Ce qu'il fait                                    |
| --------- | ------------------------------------------------ |
| `dial`    | Ouvre le composeur avec un numéro prêt à appeler |

## Événements que vous recevez

Restez synchronisé avec ce qui se passe sur chaque appel :

| Événement       | Quand ça se produit             |
| --------------- | ------------------------------- |
| `ready`         | Le composeur est chargé et prêt |
| `login`         | Un coéquipier se connecte       |
| `outgoing_call` | Un appel sortant démarre        |
| `incoming_call` | Un appel sonne                  |
| `call_answered` | L'appel est décroché            |
| `call_ended`    | L'appel se termine              |

## Exemple

```html theme={null}
<iframe id="allo" src="https://web.withallo.com?variant=dialer" allow="microphone; autoplay"></iframe>

<script>
  const allo = document.getElementById("allo").contentWindow;
  const ALLO = "https://web.withallo.com";

  // Envoyer un numéro à appeler
  allo.postMessage({ source: "allo-host", type: "dial", payload: { phone_number: "+15551234567" } }, ALLO);

  // Réagir aux événements d'appel
  window.addEventListener("message", ({ origin, data }) => {
    if (origin !== ALLO || data?.source !== "allo-dialer") return;
    console.log("Événement Allo :", data.type, data.payload);
  });
</script>
```

## Besoin d'aide ?

<CardGroup cols={2}>
  <Card title="Activer votre domaine" icon="headset" href="mailto:support@withallo.com">
    Demandez à l'équipe Allo d'activer l'intégration pour votre site
  </Card>

  <Card title="Webhooks" icon="bolt" href="/fr/integrations/webhooks">
    Recevez des notifications côté serveur pour les appels et messages
  </Card>
</CardGroup>