# Drop-in Dialer

> Add a floating browser phone keypad to any page or CRM custom-HTML block with one script tag and your token URL.

Source: https://edesy.in/docs/webrtc/drop-in-dialer

The Edesy drop-in dialer adds a floating phone button and keypad to any web page with one script tag. Point `data-token-url` at an endpoint on your server that returns the JSON from Edesy's token endpoint. Users type a number, press Call and talk through the browser. No front-end code is needed.

## Embed code

```html
<script src="https://webrtc.edesy.in/sdk/edesy-dialer.js"
        data-token-url="https://your-backend.example.com/edesy-token"></script>
```

Paste it before `</body>`, or into a CRM or site builder custom-HTML block.

## Attributes

| Attribute | Required | Description |
|---|---|---|
| `data-token-url` | yes | Your server URL. The dialer sends it a `POST` and expects the JSON from [`/api/v1/token`](https://edesy.in/docs/webrtc/sdk/token-endpoint) |
| `data-color` | no | Accent colour for the button and header, as a CSS colour such as `#0f766e` |

## What the user sees

| Element | Behaviour |
|---|---|
| Phone button | Fixed at the bottom-right corner. Opens and closes the panel |
| Status | connecting, ready, calling, ringing, in call, call failed, offline |
| Number display | Shows the digits typed on the keypad |
| Keypad | `0`-`9`, `*`, `#`. During a call, keys send DTMF digits |
| Call / Hang up | Places the call, then turns into Hang up |

## How it works

1. **Load.** The script adds the button and loads the SDK from `webrtc.edesy.in` the first time the panel opens.
2. **Connect.** It `POST`s to your `data-token-url`, then registers with the returned config.
3. **Call.** The user enters a number with its country code and presses Call.
4. **Talk.** The status line follows the call through ringing and in call. DTMF keys work during the call.
5. **Reset.** When the call ends, the panel clears and returns to ready.

## Your token URL

Your token URL should check that the user is signed in to your app, call Edesy's token endpoint with your API key, and return the JSON. See the server example in the [Quick Start](https://edesy.in/docs/webrtc/getting-started/quick-start#2-expose-it-on-your-own-url-server).

## FAQ

### Do I need to write any JavaScript?

No. One script tag is enough, plus a token URL on your server.

### Can I change the colour?

Yes. Set `data-color` to any CSS colour.

### Can I move the button to the left side?

Not in the current version. The button sits at the bottom right. For a custom layout, build your own UI with the [SDK](https://edesy.in/docs/webrtc/sdk/connect-and-call).

### Where does the user type the number?

On the keypad in the panel. Enter the country code and number, for example `919876543210`.

### Why does the status say offline?

The dialer could not get a token or register. Check that your token URL returns `200` with the token JSON and is reachable from the page.

### Does it receive incoming calls?

No. The drop-in dialer is for outbound calls only.

### Does it work inside a CRM?

Yes, in any CRM or tool that lets you add custom HTML with a script tag and serves the page over HTTPS.

### Is my API key exposed?

No. The dialer only knows your token URL. The API key stays on your server.