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

# Embedded Dialer

> Add the Allo dialer inside your own app

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:

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

Your team signs in to Allo inside the dialer the first time. To turn it on for your website, email [support@withallo.com](mailto:support@withallo.com) with the domains you want to embed from.

## Events you can send

Control the dialer from your app:

| Event  | What it does                                       |
| ------ | -------------------------------------------------- |
| `dial` | Opens the dialer with a phone number ready to call |

## Events you receive

Stay in sync with what happens on each call:

| Event           | When it happens                |
| --------------- | ------------------------------ |
| `ready`         | The dialer is loaded and ready |
| `login`         | A teammate signs in            |
| `outgoing_call` | An outbound call starts        |
| `incoming_call` | A call is ringing              |
| `call_answered` | The call is picked up          |
| `call_ended`    | The call ends                  |

## Example

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

  // Send a number to call
  allo.postMessage({ source: "allo-host", type: "dial", payload: { phone_number: "+15551234567" } }, 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>
```

## Need help?

<CardGroup cols={2}>
  <Card title="Activate your domain" icon="headset" href="mailto:support@withallo.com">
    Ask the Allo team to turn on embedding for your website
  </Card>

  <Card title="Webhooks" icon="bolt" href="/en/integrations/webhooks">
    Get server-side notifications for calls and messages
  </Card>
</CardGroup>