Menggabungkan flash-softphone di website dengan 3CX IPPBX

Menggabungkan flash-softphone di website dengan 3CX Phone System

Salah satu hal yang menarik dari produk-produk yang kami jual adalah ternyata diantara produk tersebut dapat saling berinteraksi. Salah satunya adalah produk OZEKI Webphone dengan 3CX Phone System, silahkan simak dibawah ini.

How to add a Flash softphone to your webpage, if you use 3CX phone system

This guide explains how to connect Ozeki Webphone to 3cx Phone System. This solution provides you an efficient system for managing VoIP calls arriving from your website. Watch the video tutorial and follow the configuration steps to realize this excellent solution.

Video:

How to add a Flash softphone to your webpage, if you use 3CX phone system

Ozeki Webphone is a browser to phone solution that uses Voice over IP (VoIP) technology to place calls over the Internet. Ozeki Webphone includes two components: a website component, called Webphone and a server side component called Ozeki Webphone gateway.

Using VoIP technology is less expensive than traditional phone services. A fully featured webpone (such as Ozeki Webphone) offers all the functions of a traditional phone to establish calls. Your Website visitors can use the keypad to dial the assigned phone number and its display will inform them about the exact status of calls. The advantage of a fully featured webphone is that it ensures real calling experience plus its keypad can also be used for IVR or for other telephone functions.

This configuration guide demonstrates how easy to connect Ozeki Webphone to your 3cx PBX.

System architecture

If you follow the configuration guide below you will have a telephone system that works as follows:

Let's see how this system works with the help of an example. Let's say you have two VoIP telephones connected to your PBX. After this configuration below, Ozeki Webphone Manager will also be connected to your PBX as the third extension. So the Ozeki Webphone Manager will be handled as a client such as the VoIP phones.

When a website visitor decide to call you using Ozeki Webphone on your webpage the following will happen:

Figure 1 - Incoming call from the web

1. Ozeki Webphone Manager will register in the PBX
2. The incoming call is forwarded to the PBX by the Ozeki Webphone Manager
3. The assigned phone will be ringing
4. The connection is created and you can start to talk with your website visitor

That's simple but effective. Now learn the steps how to realize this excellent telephone system!

Configuration steps

Before you start to configure this solution it is assumed that you have already installed the follows:

• 3cx Phone System
• IIS with a basic website

Step 1 - Download and install Ozeki Webphone

First of all, I downloaded Ozeki Webphone installer and extracted it to the PC (Figure 2).

Figure 2 - Ozeki Webphone setup

Start Ozeki Webphone Installer. The installer will check the prerequisites. One of the prerequisites is the .Net Framework 4. If you do not have Microsoft .Net Framework 4 installed on your PC then the installer will install this component. Accept the license agreement to start the installation (Figure 3).

Figure 3 - Accept license agreement

The installer downloads and install .Net Framework 4 automatically (Figure 4).

Figure 4 - Installation of .Net Framework 4.0

Then the installation wizard of Ozeki Webphone also starts. First you need to select how do you wish to serve the content that is required for Ozeki Webphone. In this example I use an external webserver so I select I want to serve the content from an external webserver option and click Next (Figure 5).

Figure 5 - Ozeki Webphone installation wizard

After installation the Help window of Ozeki Webphone appears automatically. Here you can find detailed description of the webphone (Figure 6).

Figure 6 - Help window of Ozeki Webphone

Step 2 - 3cx configuration

Now start the Windows Management Console of 3cx from Start menu (Figure 7).

Figure 7 - Start Windows Management Console

Login with your username and password (Figure 8).

Figure 8 - Login

Go to Extensions menu and click on Add extension (Figure 9). In this example clients can register in two extensions. To extension 100 a land line telephone will register in, to extension 101 the Webphone Manager will register in our example.

Figure 9 - Add extension

On the configuration form specify the Extension Number. For authentication also enter ID and Password (Figure 10).

Figure 10 - Specify the parameters

Click on OK to save the changes (Figure 11).

Figure 11 - Save changes

Ozeki Webphone settings

Now go to Settings menu in Ozeki Webphone Manager and click on SIP accounts menu item. In this way SIP accounts window appears. Click on Add to add the extension that have been registered in the PBX (Figure 12).

Figure 12 - SIP accounts window

Enter the following parameters: Display name, User name, Register name, Register password. In this example I have registered Ozeki Webphone Manager with extension number 101. In Domain server field enter the IP address of the computer on which the PBX has been installed. Finally, click Save to save changes (Figure 13).

Figure 13 - Add a component

Click on Save in SIP accounts window, as well (Figure 14).

Figure 14 - Save changes

Now I copy the content of Webcontent directory of Ozeki Webphone to the directory of my webserver. To do so go to the install directory (Program Files\Ozeki\Ozeki Webphone) and open Webcontent directory (Figure 15).

Figure 15 - Webcontent directory

I copy the content of Webcontent directory into inetpub\wwwroot\testwebphone directory (Figure 16).

(Webcontent directory contains files that are need to be served for the proper functioning of Webphone. The IIS webserver has the following file structure: C\inetroot\wwwroot\... The files can be found here will be the root directory for the website. For example: index.html. Testwebphone directory will include the webphone (the html).)

Figure 16 - Copy the content of Webcontent directory

In order to create the html file for the webphone go to Ozeki Webphone Manager\Generate html\Fully featured webphone (Figure 17).

Figure 17 - Generate html

In the html generator window select Webphone. The HTML code will be generated. Click on Copy to clipboard (Figure 18).

Figure 18 - Generated html

Now start a simple text editor that is able to save texts into plain text format e.g. Notepad and create a basic html document. Then Paste the generated html code between the body tags (Figure 19).

Figure 19 - Paste the html code

Save the html document (Figure 20).

Figure 20 - Save html document

In this example the html document is saved as "test.html" into wwwroot\testwebphone directory (Figure 21).

Figure 21 - Test.html file

After you saved the html document navigate to the created html file. In this example the path is: http://localhost/testwebphone/test.html (Figure 22).

Figure 22 - Full path to the html document

Finally the Ozeki Webphone interface appears. If the registration is successful then you can see Successfully registered notification on its display (Figure 23).

Figure 23 - Successfully registered webphone

Testing the system

For demonstration I call extension 100 (that is the VoIP hard phone) from the Ozeki Webphone (Figure 24). Use the keypad to enter digits.

Figure 24 - Test call

Then camera and microphone access needs to be allowed (Figure 25).

Figure 25 - Allow camera and microphone access

Finally the land line phone is ringing so the first call is successful (Figure 26).

Figure 26 - Successful call

In conclusion...

Now the configuration is complete and you can start to use your improved telephone system efficiently. You can enjoy the instant benefit: from now on your website visitors can call you from your websites free of charge.