Voximplant. Blog

Step-by-step call center tutorial part 2

Redirecting an incoming call to a web browser

Answering an incoming call automatically can be useful in some situations, but in the real world, you are most likely want to communicate with the caller and/or connect the caller with other people. So let’s improve the application created at the previous step by forwarding the user call to a web browser or mobile app. Such a solution is popular among the distributed call centers where operators typically work from home and accept and initiate calls via a web browser.

To add the call handling features to a browser, we need two things. First, the browser should be connected to the Voximplant cloud to be able to accept an incoming call. Second, the browser should have a unique identifier to distinguish it among all the browsers connected to our cloud. Both tasks are solved via our web SDK. It allows any webpage to establish a real-time connection to the Voximplant cloud. Each connection is identified by the user name.

First of all, you need to create a Voximplant user. On the Voximplant control panel, select Users on the top menu and click Create user. The user creation interface will be displayed. For now, use ‘user’ both as the user name and the display name and choose a password. Click Save to confirm the user creation.

create-user

In the production version, you will definitely use the Web SDK to add voice and video capabilities to your web project. In this example, we will use a pre-built phone interface. Note that this interface is for demonstration purposes only and we cannot guarantee its uptime. Visit the above webpage and log in using the user name and password you have just created. Use ‘callcenter’ as the name of the application you have already created at the previous step. Use the account name you have specified at the previous step when you registered at the VoxImplant control panel:

webphone_login

If you receive a login error, it most probably means that there are no applications associated with the user. To form an association, select User on the top menu, click Edit to the right of the user name, select the application from the Applications drop-down list and click Save to confirm the changes.

Logging in from a phone web app will establish a connection from the web browser to the VoxImplant cloud. After that, the webpage can initiate and receive calls. In this example, we will forward all incoming calls to the webpage. To solve this task, we will need to make a few changes in the existing scenario.

First, we need to initiate an outgoing call. There are lots of ways how VoxImplant can initiate calls; in this tutorial, we will use the VoxEngine.callUser method that allows calling a user connected via the web or mobile sdk:

  1. VoxEngine.addEventListener(AppEvents.CallAlerting, function(inc) {
  2. var out = VoxEngine.callUser("user", "callerid", "callername");
  3. out.addEventListener(CallEvents.Connected, function() {
  4. inc.call.startEarlyMedia();
  5. inc.call.say("outgoing call connected");
  6. });
  7. });

Second, we need to answer the incoming call. In telephony, an incoming call can remain in the unanswered state for some time (we limit this time to 40 seconds). This is called the early media state. While the call remains in this state, it is not billed but audio can be sent only in one direction — to the caller. Normally, such state is used to play a progress tone while the call is being forwarded to another person. The process of adding a progress tone will be covered later in other tutorials. At this step, we will answer the incoming call and make sure that both parties can hear each other. The call is answered via the answer method; audio is sent in both ways via the VoxEngine.sendMediaBetween method. There are more fine-grained methods such as sendMediaTo, which we will examine later:

  1. VoxEngine.addEventListener(AppEvents.CallAlerting, function(e) {
  2. var inc = e.call;
  3. var out = VoxEngine.callUser("user", "callerid", "callername");
  4. out.addEventListener(CallEvents.Connected, function() {
  5. inc.answer();
  6. VoxEngine.sendMediaBetween(inc, out);
  7. });
  8. });

Call the rented phone number and the Incoming call popup window will appear on the webpage. Click Answer, and you will be able to hear the voice and answer back. This illustrates how calls can be redirected from phones to webpages.

Comments

  • Bruno Gomes

    Thank you, can you please add part 3, showing how we can:
    1) Put a call on hold
    2) Join another user to this call
    3) transfer the call to another user
    4) Leave the call but let the other parts talking

    • Alexey Aylarov

      Hi Bruno, we are working on other parts, stay tuned!