Composeur intégré

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 :

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

N’importe quel site peut intégrer le composeur. Il n’y a rien à activer côté Allo et aucun domaine à nous envoyer. Votre équipe se connecte à Allo dans le composeur la première fois. L’attribut allow="microphone" est obligatoire : le navigateur n’accorde l’accès au micro à une iframe que si la page parente l’autorise. Si votre page est elle-même dans une iframe, chaque page parente doit transmettre l’autorisation du micro.

Comment se connecter au composeur intégré

Connectez-vous avec votre e-mail ou votre numéro de téléphone et le code envoyé par Allo. La connexion avec Google ou Apple ne fonctionne pas dans le composeur intégré : Google et Apple empêchent leurs pages de connexion de s’afficher dans un autre site. Utilisez le composeur intégré dans Chrome ou Edge.

Ce que contient le composeur intégré

Le composeur intégré passe et reçoit des appels. Le Power Dialer n’est pas disponible dans le composeur intégré : pour appeler une liste de contacts à la suite, utilisez le Power Dialer dans l’application Allo.

Événements que vous pouvez envoyer

Pilotez le composeur depuis votre application :

Événement	Payload	Ce qu’il fait
`init`	Aucun	Demande au composeur de renvoyer `ready`, par exemple si votre écouteur démarre après le chargement du composeur
`dial`	`{ phone_number }`	Ouvre le composeur avec un numéro prêt à appeler
`hangup`	`{ call_id }`	Raccroche l’appel en cours, ou le refuse tant qu’il sonne

dial remplit le numéro, et votre collaborateur lance l’appel. hangup raccroche immédiatement. Passez le call_id reçu dans outgoing_call ou incoming_call, pour qu’un message en retard ne raccroche jamais un autre appel.

Événements que vous recevez

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

Événement	Payload	Quand ça se produit
`ready`	Aucun	Le composeur est chargé et prêt
`login`	`{ user_id, team_id }`	Un coéquipier se connecte
`outgoing_call`	`{ to, call_id }`	Un appel sortant démarre
`incoming_call`	`{ from, to, call_id }`	Un appel sonne
`call_answered`	`{ call_id }`	L’appel est décroché
`call_ended`	`{ call_id, duration }`	L’appel se termine. `duration` est le temps de conversation en secondes, `0` si personne n’a décroché

Le call_id identifie l’appel dans le composeur intégré uniquement. Le call_id n’est pas l’id d’appel envoyé dans les webhooks ou renvoyé par l’API. Pour relier un appel du composeur à un webhook, comparez les numéros de téléphone et l’heure de l’appel.

Exemple

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

  // Raccrocher depuis votre propre bouton
  allo.postMessage({ source: "allo-host", type: "hangup", payload: { call_id: currentCallId } }, 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>

Commencer

Appeler

Appels entrants

Après un appel

Numéros de téléphone

SMS

Équipe et compte

Intégrations

Facturation

Sécurité et conformité

Partenaires

Support

Comment connecter

Comment se connecter au composeur intégré

Ce que contient le composeur intégré

Événements que vous pouvez envoyer

Événements que vous recevez

Exemple

Besoin d’aide ?

Contacter le support

Webhooks

​Comment connecter

​Comment se connecter au composeur intégré

​Ce que contient le composeur intégré

​Événements que vous pouvez envoyer

​Événements que vous recevez

​Exemple

​Besoin d’aide ?

Contacter le support

Webhooks

Comment connecter

Comment se connecter au composeur intégré

Ce que contient le composeur intégré

Événements que vous pouvez envoyer

Événements que vous recevez

Exemple

Besoin d’aide ?