VoxImplant. Blog

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 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 Scenario

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

  1. // "Call Alerting" event is generated on incoming call into our cloud.
  2. // In a handler you can accept or decline a call based on your logic.
  3. VoxEngine.addEventListener(AppEvents.CallAlerting, function(e) {
  4. // Incoming call have "source" and "destination" number. You can
  5. // make calls to any number from our cloud, but for this demo we
  6. // will extract destination phone number from incoming call.
  7. var number = PhoneNumber.getInfo(e.destination).number;
  8. // Initiate outgoing call from our cloud. You can manage multiple
  9. // calls from within single scenario and do lots of different things
  10. // with them.
  11. var call = VoxEngine.callPSTN(number);
  12. // For this demo simply connect incoming call to outgoing, auto
  13. // handling all possible errors. You can have more fine-grained
  14. // control if you like, see our documentation.
  15. VoxEngine.easyProcess(e.call, call);
  16. });

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.
Application Rule
That’s it, we can proceed to the client application development

Web-based client application

In case of web application VoxImplant Web SDK should be used (it uses WebRTC in WebRTC-enabled browsers, like Chrome and Firefox). The latest version of the SDK is always available on our CDN http://cdn.voximplant.com/voximplant.min.js

A very simple web app with click-to-call functionality will look as follows (please check Web SDK Quickstart for details):

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script type="text/javascript" src="http://cdn.voximplant.com/voximplant.min.js"></script>
  5. <script type="text/javascript">
  6. var initialized = false,
  7. loggedIn = false,
  8. connected = false,
  9. voxAPI = VoxImplant.getInstance();
  10.  
  11. // Add event listeners
  12. voxAPI.addEventListener(VoxImplant.Events.SDKReady, handleSDKReady);
  13. voxAPI.addEventListener(VoxImplant.Events.ConnectionEstablished, handleConnectionEstablished);
  14. voxAPI.addEventListener(VoxImplant.Events.AuthResult, handleAuthResult);
  15.  
  16. function handleSDKReady() {
  17. initialized = true;
  18. logMessage("VoxImplant SDK ready");
  19. // Connection with VoxImplant Cloud can be established now
  20. voxAPI.connect();
  21. }
  22.  
  23. function handleConnectionEstablished() {
  24. connected = true;
  25. logMessage("Connection established");
  26. login();
  27. }
  28.  
  29. function handleAuthResult(e) {
  30. logMessage("AuthResult: "+e.result);
  31. if (e.result) {
  32. // Logged in successfully
  33. loggedIn = true;
  34. makeCall();
  35. } else {
  36. logMessage("Authorization failed. Please specify correct username and password");
  37. }
  38. }
  39.  
  40. function login(){
  41. // Authorization required before we can use other functions
  42. voxAPI.login("USERNAME@APPNAME.ACCNAME.voximplant.com", "USERPASSWORD");
  43. }
  44.  
  45. function logMessage(msg) {
  46. document.getElementById("log").innerHTML += msg + "\n";
  47. }
  48.  
  49. function makeCall(){
  50. // Specify your number here - Application Rule Pattern describes which VoxEngine scenario should be launched
  51. var call = voxAPI.call("SOME NUMBER");
  52. // Add event listeners for call events
  53. call.addEventListener(VoxImplant.CallEvents.Connected, handleCallConnected);
  54. call.addEventListener(VoxImplant.CallEvents.Failed, handleCallFailed);
  55. call.addEventListener(VoxImplant.CallEvents.Disconnected, handleCallDisconnected);
  56. }
  57.  
  58. function handleCallConnected() {
  59. logMessage("Call Connected");
  60. }
  61.  
  62. function handleCallFailed(e) {
  63. logMessage("Call Failed. Code: "+e.code+" Reason: "+e.reason);
  64. }
  65.  
  66. function handleCallDisconnected() {
  67. logMessage("Call Disconnected");
  68. }
  69.  
  70. function testCall() {
  71. // Initialize SDK if not it's not initialized yet
  72. if (!initialized) voxAPI.init({micRequired: true});
  73. else {
  74. // Establish connection with VoxImplant Cloud if it's not established yet
  75. if (!voxAPI.connected()) voxAPI.connect();
  76. else {
  77. // Login if not logged in yet, otherwise - make a call
  78. if (!loggedIn) login();
  79. else makeCall();
  80. }
  81. }
  82. }
  83. </script>
  84. </head>
  85. <body>
  86. <a href="javascript:testCall()">Make Call</a><br/>
  87. <textarea style="height: 400px" id="log"></textarea>
  88. </body>
  89. </html>

WebRTC security policy requirements: HTML should be loaded from a web-server, Chrome requires HTTPS for WebRTC “getUserMedia” dialog (microphone/cam access) if HTML isn’t loaded from localhost

You can also get script content at https://gist.github.com/aylarov/9d58991fcf013315e892

If you are integrating click-to-call functionality with the existing user base of your app you probably will need to use an Automated login function of the SDK.

Android client application

You can integrate “click-to-call” functionality into your native or hybrid mobile app. The latest version of Android SDK is available on our dedicated sdk webpage. See our android quickstart for usage details.

A simple integration only requires to initialize our sdk, login with user and password you defined in our control panel and instantiate a com.zingaya.voximplant.VoxImplantClient.Call object. Please note, that our SDK does not provide any user interface, so in case you want a user to control a call you need to create user interface and call corresponding events of Call object.

  1. @Override
  2. protected void onCreate(Bundle savedInstanceState) {
  3. super.onCreate(savedInstanceState);
  4. client = VoxImplantClient.instance();
  5. client.setAndroidContext(getApplicationContext());
  6. // Used to receive callbacks about SDK events.
  7. client.setCallback(this);
  8. client.login("myuser@myapp.myaccount.voximplant.com", "mypass");
  9. }
  10.  
  11. @Override
  12. public void onLoginSuccessful(String displayName) {
  13. // Make sure user can't click anything before sdk logins to cloud server.
  14. callButton.enable();
  15. }
  16.  
  17. // Assign this callback to "call" button
  18. @Override
  19. public void onCallClicked() {
  20. // Put your call center numbe here. Or provide number in VoxEngine scenario.
  21. // Or use another mobile app / web page to receive calls.
  22. String callId = client.createCall("+79261234567", false, null);
  23. Map<String, String> headers = new HashMap<String, String>();
  24. client.startCall(callId, headers);
  25. this.activeCall = new Call(callId, false, false);
  26. }

Please refer our mobile SDK documentation for more details.

iOS client application

Our mobile SDK for iOS can be used same way as Android version. The latest version of iOS SDK is available on our dedicated sdk webpage. See our iOS quickstart for usage details.

A simple integration only requires to initialize our sdk, login with user and password you defined in our control panel and use a createCall method. Please note, that our SDK does not provide any user interface, so in case you want a user to control a call you need to create user interface and call corresponding events of call object.

Comments

  • mukopaje singogo

    //after doing the above why do i get this error? when trying to test a call, why wss://platform/ ?:

    WebSocket connection to ‘wss://platform/?version=2&client=chrome&referrer=platform&extra=null&video=false&q=TAZoIHNAbo8K’ failed: Error in connection establishment: net::ERR_NAME_NOT_RESOLVED

    • Igor I. Ĺ eko

      Could you share the entire browser log?