Embedded Dialer

You can embed your own Allo dialer directly inside your app. Your team makes and receives calls without leaving your product, and your app stays in sync with what happens on every call. It works with a single iframe.

How to connect

Add this iframe wherever you want the dialer to appear:

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

Any website can embed the dialer. There is nothing to activate on Allo’s side and no domain to send us. Your team signs in to Allo inside the dialer the first time. The allow="microphone" attribute is required: the browser only grants microphone access to an iframe whose parent allows it. If your page is itself inside another iframe, every parent must pass the microphone permission down. Sign in with your email or phone number and the code Allo sends you. Google and Apple sign-in don’t work inside the embedded dialer, because Google and Apple block their sign-in pages from loading inside another website. Use the embedded dialer in Chrome or Edge.

What the embedded dialer includes

The embedded dialer places and receives calls. Power Dialer is not available in the embedded dialer: to call a list of contacts back to back, use Power Dialer in the Allo app.

Events you can send

Control the dialer from your app:

Event	Payload	What it does
`init`	None	Asks the dialer to send `ready` again, for example when your listener starts after the dialer loaded
`dial`	`{ phone_number }`	Opens the dialer with a phone number ready to call
`hangup`	`{ call_id }`	Ends the current call, or declines it while it rings

dial fills in the number, and your teammate presses call. hangup ends the call right away. Pass the call_id you got from outgoing_call or incoming_call, so a late message never ends a different call.

Events you receive

Stay in sync with what happens on each call:

Event	Payload	When it happens
`ready`	None	The dialer is loaded and ready
`login`	`{ user_id, team_id }`	A teammate signs in
`outgoing_call`	`{ to, call_id }`	An outbound call starts
`incoming_call`	`{ from, to, call_id }`	A call is ringing
`call_answered`	`{ call_id }`	The call is picked up
`call_ended`	`{ call_id, duration }`	The call ends. `duration` is the talk time in seconds, `0` if nobody answered

The call_id identifies the call inside the embedded dialer only. The call_id is not the call id sent in webhooks or returned by the API. To match a dialer call with a webhook, compare the phone numbers and the time of the call.

Example

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

  // Send a number to call
  allo.postMessage({ source: "allo-host", type: "dial", payload: { phone_number: "+15551234567" } }, ALLO);

  // End the call from your own button
  allo.postMessage({ source: "allo-host", type: "hangup", payload: { call_id: currentCallId } }, ALLO);

  // React to call events
  window.addEventListener("message", ({ origin, data }) => {
    if (origin !== ALLO || data?.source !== "allo-dialer") return;
    console.log("Allo event:", data.type, data.payload);
  });
</script>

Get started

Calling

Incoming calls

After a call

Phone numbers

SMS

Team and account

Integrations

Billing

Security and compliance

Partners

Support

How to connect

What the embedded dialer includes

Events you can send

Events you receive

Example

Need help?

Contact support

Webhooks

​How to connect

​How to sign in to the embedded dialer

​What the embedded dialer includes

​Events you can send

​Events you receive

​Example

​Need help?

Contact support

Webhooks

How to connect

How to sign in to the embedded dialer

What the embedded dialer includes

Events you can send

Events you receive

Example

Need help?