How to display an HTML popup window when my phone rings with JavaScript API

Below you can find an excellent way on how to follow your calls easily using
JavaScript API. By displaying an HTTP popup window, it is quite simple to
receive notifications about the calls made through your own website.

After these steps, you will receive a notification in the form of Popup on your own
site every time when a call is created in the system. Of course, there are
more possibilities in JavaScript API, but this article gives information about about
the call created and call state changed events.

Step 2: Generate Security Token for the authentication

In order to be able to see the created calls in the system, you have to get
access from the PBX for your application. You can do this by generate a Security Token
for your program and with that token you can connect to PBX.

You have the possibility to use a generated Security Token for the signin.
In case of the Security Token it can be given what it can be used for and until what time,
1 day is default. Such possibilities for usage are:

Sending a message

Initiating calls inside or outside the system (mobile and line calls)

Query of the Call Information

and a lot of others

We can get a Security Token through HTTP API (if it is enabled), or we can
generate it in the system after logging in with the GenerateSecurityToken
Command of the HTTP API Tester.

To get a Security Token through HTTP API, you should send a simple
HTTP request to the PBX and the needed token is going to be in the given response.

In the code example below you can see what request parameters should be sent to the PBX.

The specified url parameter list and the whole request is in the code below.
You can send the request like you copy the url encoded text below to the
headline of your browser. Of course you have to change the IP address to
the address of the PBX here, too:

On the summary page below you can get
further information about the HTTP API and the commands of it.

The other method for getting the needed Security Token is that you login
to the PBX and generate the token on your own with the aid of HTTP API Tester.

For this, choose the Productivity/HTTP API menu fom the menu line above in the PBX.
Then choose the GenerateSecurityToken Command, click on the Test tab, then to the Send request button!

Figure 2 - Generate Security Token with HTTP API Tester

The generated Security Token can be found in the received response
between the <SecurityToken> tags.

Step 3: Connect to Ozeki Phone System XE through JavaScript API

As for the start create a simple HTML page where you refer a few scripts and
JavaScript API, too. The created file has to be hosted and run on a Web-server,
because it will result in an error if it is simply run on the file system (for
example from Windows Explorer).

The numberToSubscribe should be a phone number. We take it as a basic that we are
curious for the events of only this phone number. But in case of a need it is
extendable, of course, and this requirement can even be left.

After clarifying the role of the variables we can see the real connection.
Before we connect, we should subscribe for the OzWebClient.onConnectionStateChanged
event. We can achieve this by subscribing the connectionStateChanged method that
is going to be mentioned later. After this we should call the OzWebClient.connect
method. There is the address of the PBX and the requested Security Token.

Step 4: Subscribe for the sessionCreated and sessionStateChanged event

We have already initiated the connection request towards the server earlier,
and we get the response from it in the subscribing connectionStateChange method:

Code example 7 - Subscribing function that gives back the response of the PBX to the login request.

We can see that the info.State parameter of the function carries the response of the server.
If the login was successful, we subscribe for the OzWebClient.onSessionCreated event.
So when a new call is created in the PBX, the subscribing method will be called:

We subscribe for the changes of the call state in the function, so every time
when it gets into another state (Setup, Ringing, Incall, Completed etc. )
we receive a notification through the sessionStateChanged method.

We get the actual session in the function, that carries the information about
the actual call in its parameters. In the function above we check whether the
phone number of the caller or the callee is the same as the phone number given
by us (numberToSubscribe), and if it is, then we call the showPopUp method with the parameters of the call: