Click-to-call for web and mobile application

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.

We recommend to check our Quickstart before you proceed.


VoxEngine Application and 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 let's create a ClickToCallPSTN scenario with the following code:

// "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(, call);

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

Application Rule

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

That's it, we can proceed to the client application development

Client application

Voximplant can handle calls from PSTN (phone network), Web pages, Android apps and iOS apps. The following tutorials showcase client applications development:

Tags:web sdkpstn
B6A24216-9891-45D1-9D1D-E7359CEB8282 Created with sketchtool.


Add your comment

Please complete this field.


Sign up for a free Voximplant developer account or talk to our experts