Voximplant. Blog

Step-by-step call center tutorial part 1

Handling an incoming call

This tutorial will walk you through the entire process of setting up a call center based on the VoxImplant platform from the very basics up to the advanced features. While many topics covered in this tutorial are also useful for other types of applications, we will focus on a call center as a popular environment that can be challenging to implement. You are welcome to check our other tutorials devoted to various use cases.

To begin with, let’s review the simplest possible setup: answering an incoming call and playing a message to the caller automatically. The VoxImplant architecture is based on scenarios, that is, a JavaScript code created by a client and executed automatically upon receiving an incoming call or the application request. To create a scenario, you need to be registered at the VoxImplant control panel:

https://manage.voximplant.com

During the registration, you will need to define a unique user name, which will be referred to as the account name in this tutorial. After registering or logging in, open the control panel, select Scenarios on the top menu, and click Create scenario:

Screenshot

This will open the New scenario editor window where you can enter the scenario name and the source code. If needed, you can rename the scenario or change the source code later, or upload them automatically via the HTTP API. At this step, name your scenario ‘callcenter’ and enter the following source code:

  1. VoxEngine.addEventListener(AppEvents.CallAlerting, function(e) {
  2. // this code is executed in the cloud on every incoming call
  3. e.call.startEarlyMedia();
  4. e.call.say("hello from the cloud", Language.US_ENGLISH_FEMALE);
  5. });

Later, we will make this code able to be executed automatically when an incoming call is received. For now, let’s see what this code actually does. The VoxImplant cloud platform is fully asynchronous: there are no waiting or blocking operations. All method calls start corresponding operations and return immediately. If you place two “say” methods one after another, second playback will immediately replace first one. Later we will show how to subscribe to events and wait for the operations to complete.

You subscribe to events, schedule actions, and your code is called when some event happens. The code starts with the addEventListener method of a global VoxEngine object. The method allows subscribing to global events, and here we subscribe to CallAlerting so that the handler function will be called in the cloud right after an incoming voice or video call arrives.

After the call arrives, we will have full control over it via JavaScript. We can inspect the caller’s phone number, accept or reject the call, deliver some audio to the caller and so on. In this example, we are calling the startEarlyMedia method of the call object to inform the caller’s phone service provider that we want to send some audio to the caller. Then we call the say method to synthesize voice from text.

To complete the setup process, we need a phone number to call. The VoxImplant platform can use your existing phone numbers, or you can rent a number from us. In this example, we will rent a virtual phone number accessible as an extension. On the VoxImplant control panel, select Phone number on the top menu and then select Buy new phone number in the drop-down list.

cp-buy-phone-number

The phone number interface will be displayed. Click the Real number switch to change it to Test number. Then click Buy to buy a virtual phone number.

cp-number-switch

joxi_screenshot_1491309783137 (2)

After you’ve bought a real or virtual phone number, click the Phone numbers top menu again and select My phone numbers in the drop-down list. There you can associate a phone number with the JavaScript scenario you created earlier so that if someone calls your phone number, your code will be executed and a voice greeting will be played.

To associate a phone number with a scenario, you need one more thing — an application. The VoxImplant applications allow you to group related scenarios in one place. In this simple example, there is no real need for an application, yet you have to create one because the phone number interface only works with applications. To create an application, click Applications on the top menu and then click Create application.

cp-app-create

This will open the New application editor window where you should enter the application name. At this step, name it ‘callcenter’ and confirm by clicking Create. The window will change into the application editor where you can associate your JavaScript scenario with the incoming call.

joxi_screenshot_1491310003118

Click the Rules tab and then click Add rule. This will open the new rule editor window where you can enter the rule name and select JavaScript scenarios. For now, name the rule ‘incoming’ and click the ‘callcenter’ scenario so that it switches from ‘available’ to ‘assigned’. Click Add to confirm the rule creation.

vox-assign-scenario

Now you can finally connect your phone number with your JavaScript code! Go back to My phone numbers and select the application with the rule in the drop-down list next to your phone number. Select the corresponding check box to confirm the operation.

joxi_screenshot_1491310159987

You have completed the setup process. Now you can call a virtual phone number using one of the access number displayed on the page, followed by an extension. When the connection is established, you will hear a synthesized voice that reads your text: this is the VoxImplant cloud that has just executed your JavaScript code and carried out your instructions.

Comments