A step-by-step guide to making your first browser call with Alloqui: enter your Twilio credentials, grab a project key, and drop one React component into your app.
By the end of this guide you will have a working phone dialer in your React app that makes real outbound calls — dial pad, call timer, mute, and DTMF included. No backend code, no webhook configuration, no TwiML.
You need three things:
From the Twilio Console, copy two values off the dashboard:
AC...If you do not have a phone number yet, buy one under Phone Numbers → Manage → Buy a number (about $1/month; trial accounts get one free).
That is all you need from Twilio. Alloqui creates the API keys and TwiML app for you in the next step.
When you save, Alloqui validates the credentials and auto-configures everything on the Twilio side: a TwiML app for browser calling, an API key pair for token generation, and webhook URLs on your number. Your credentials are stored encrypted with AES-256-GCM.
al_live_abc123...pnpm add @alloqui/dialer
(or npm install / yarn add, as you prefer.)
import { Dialer } from "@alloqui/dialer";
export function SupportPage() {
return (
<div>
<h1>Call us</h1>
<Dialer projectKey="al_live_abc123" />
</div>
);
}
That single component handles the full call lifecycle: it fetches a short-lived access token from Alloqui, initializes the Twilio Voice SDK in the browser, requests microphone permission, and renders the dial pad and in-call controls.
Run your app, type a number in E.164 format (like +15550123456), and hit call.
Behind the scenes:
The component accepts event hooks if you want to log calls or update your own UI:
<Dialer
projectKey="al_live_abc123"
onCallStarted={(call) => console.log("dialing", call.to)}
onCallConnected={(call) => console.log("connected", call.id)}
onCallEnded={(call) => console.log("ended after", call.durationSeconds, "s")}
/>
The dialer is styled with CSS variables, so matching your product is a stylesheet away:
.alloqui-dialer {
--alloqui-accent: #e5484d;
--alloqui-radius: 12px;
}
Full API reference lives in the documentation.