DTMF pad
The in-call keypad: sends tones on the active call — dial an extension, enter a PIN, answer a press-1 menu. Disabled until a call is active; each press plays the real dual-tone frequencies locally.
No active call
Once the call is active, keys play the real dual-tone frequencies locally.
Installation
npx shadcn@latest add @handset/dtmf-padUsage
import { DTMFPad } from "@/components/handset/dtmf-pad";
<DTMFPad softphone={softphone} />Prefer it attached to the in-call bar? CallHUD takes a keypad prop that pops this pad underneath — no separate wiring.
The pad also accepts keyboard input while focused: digits, *, and # send directly.
Server-side DTMF
This component sends tones from the browser's media stream. The API can also press keys and ask keypad questions on any call — including ones no browser is on — via POST /v1/calls/{id}/dtmf and /gather; see the API reference.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| softphone | Softphone | — | The connected softphone instance. |
| tones | boolean | true | Play local dual-tone feedback on each press. |
| onDigit | (digit: string) => void | — | Called after each digit is sent. |
| className | string | — | Merged onto the pad wrapper. |