Your first VoxImplant application

Welcome to VoxImplant! This tutorial will help you to create your first VoxImplant application. You will need to complete 3 simple steps:

  1. Create your first call scenario
  2. Configure your VoxImplant account
  3. Make call using WebSDK

Please note that you need go through all 3 steps to make your first call

Create your first call scenario

All call control scenarios for VoxImplant are written in JavaScript.

To begin, we'll go over a simple example: someone makes a call. Then VoxImplant answers it and plays a voice message. The code for this case is pretty straightforward:

VoxEngine.playSoundAndHangup("http://cdn.voximplant.com/hello.mp3");

You need to go to the Scenarios tab of VoxImplant control panel and add the scenario with the text above.

To learn more about how VoxImpant call control scenarios work, you can see this set of tutorials.

Configure your VoxImplant account

To start using VoxImplant, you need to create user account and an application.

Each user can log into certain applications (you will need define which ones) using the VoxImplant Web SDK or SIP and make calls using the rules defined in these applications.

To create a user, open Users tab in control panel, press Create User button, and enter a name and password for the new user.

An application is a set of rules that define which call processing scenarios are applied to each call. You will need to go to the Applications tab of the VoxImplant control panel, and create a new application. Please note that the name can only contain alphanumeric characters, dashes, and underscores.

You will also need to select and move the user you created earlier from Available to Assigned in this dialog.

After the application has been created, you will need to create a rule in it. Enter the edit application dialog, and in the Rules tab, create a new rule. You don't need to modify any patterns; just enter a name and select and move the scenario you created in step 1 from Available to Assigned.

To learn more about the overall architecture of applications, users, and rules in VoxImplant, you can refer to this documentation.

Make a call using WebSDK

Now you need to create a simple HTML page that contains the following code:

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