Click-to-call for web and mobile application

One of the most popular scenarios for our Web/Mobile SDK is about enabling true click-to-call/tap-to-call function in web and mobile applications. True click-to-call means that it's not about callback version when a call is initiated from the platform to both parties and connects them together, it means that call is initiated from the client side and goes via IP to the platform and then routed to the required destination. True click-to-call is cheaper, faster and offers better UX; of course, you need to have the internet connection to use it (shouldn't be an issue these days). This tutorial explains how to easily embed click-to-call into your app using VoxImplant SDKs and setup call routing using VoxEngine scenarios.

VoxEngine Scenario

We assume that you have already created some VoxImplant application and bound some demo user to the app in the control panel. Our click-to-call app will call a real phone number, so its VoxEngine scenario will look as follows:

// "Call Alerting" event is generated on incoming call into our cloud.
// In a handler you can accept or decline a call based on your logic.
VoxEngine.addEventListener(AppEvents.CallAlerting, (e) => {
// Incoming call have "source" and "destination" number. You can
// make calls to any number from our cloud, but for this demo we
// will extract destination phone number from incoming call.
const number = PhoneNumber.getInfo(e.destination).number;
// Rented or verified phone number to display on callee's phone
// as a number to call back.
const callerId = "+1234567890";
// Initiate outgoing call from our cloud. You can manage multiple
// calls from within single scenario and do lots of different things
// with them.
const call = VoxEngine.callPSTN(number, callerId);
// For this demo simply connect incoming call to outgoing, auto
// handling all possible errors. You can have more fine-grained
// control if you like, see our documentation.
VoxEngine.easyProcess(e.call, call);
});

This simple scenario receives call from SDK and forwards it to PSTN assigning all standard event handlers using easyProcess function.

Application Rule

The next step is to create application rule that will launch the scenario on incoming call. Edit the app via this link, then open Rules tab, then click the Add Rule button. Name new scenario as CallToPSTN, specify \+?[1-9]\d{1,14} as Pattern to handle calls from all number and then click the assign button to complete a scenario creation process.