The webphone can be used in two ways:
-as a ready to use customizable solution for webmasters/users
-or as a JavaScript library for developers to add VoIP capability to any web application

You can quickly try it from the online demo page, however for better understanding you should download the demo package and experiment with it. Here are some details about how it works.

Just copy the webphone to your webserver (or test it from your local file system) and configure it like you do with a usual SIP client such as an IP Phone or softphone like X-Lite. 

The only most important setting is the serveraddress. Make sure to set this correctly to your SIP server address (domain or IP:port).
Rarely some SIP servers might require also some other settings such as proxyaddress, realm, transport or different username/sipusername. See the "Parameters" chapter in the documentation for the full list of available settings.

You can configure the web phone via it’s settings (parameters) in multiple ways:

• Set the parameters object in the webphone_config.js file
• Or pass the setting as URI query parameters (all parameters prefixed with "ws_"; for example "ws_username=1234")
• Or change at run-time from JavaScript with the setparameter API
• Or dynamically set by any server side script such as PHP, .NET, java servlet, J2EE or Node.js.
• Or if you are using an existing skin (such as the softphone.html) then you can configure the webphone also from the login and settings page

For webmasters:

The webphone package contains a fully customizable turn-key web softphone and other templates.
Follow these steps to deploy the softphone or click to call button to your website:

1. Extract and copy the webphone folder to your web server.
   For a quick test you can launch it from your PC file system, however for production we recommend a HTTPS enabled webhosting.
2. Set your SIP server address (domain or IP:port) in the webphone_config.js file ("serveraddress" setting) and other settings if you need so: 
        webphone_api.parameters = {
              serveraddress: 'yourvoipserver.com', //enter your SIP server URI (domain or IP:port)             
              loglevel: 5 //enable detailed logs          
              //add any other parameters here if you need (such as ringtimeout, username/password)
              //see the "Parameters" section in documentation for the full list of possible settings
        };
3. Launch any of the html’s. For example the /webphone/softphone_launch.html will present you a full featured ready to use web softphone or you can use the other html files directly: softphone.html, click2call.html or the examples from the samples folder.
4. Optionally further customize it after your needs by changing the settings or changing the design by modifying the HTML/CSS. See the "Parameters" section in the documentation for the full list of configurable settings.
   We can also deliver a ready to use customized web softphone preconfigured with your server details and with all your preferences preset (such as your brand-name, company name, links to your website, integration with your website and others)
5. Include the webphone page to your website (in a DIV, in a iFrame or link to it to open in a separate page)

For simple click-to-call, you can also launch the webphone from URL query parameters. Example link:
https://www.webvoipphone.com/webphone_online_demo/click2call.html?wp_serveraddress=voip.mizu-voip.com&wp_username=webphonetest1&wp_password=webphonetest1&wp_callto=testivr3&wp_autoaction=1

Note: you can configure the above way (via URL parameters) not only the click2call.htm, but also any others such as the softphone.html or your own custom html containing the webphone.

For developers:

Create a custom VoIP solution or integrate the webphone with your application using the JavaScript library.

The public JavaScript API can be found in "webphone_api.js" file, under global javascript namespace "webphone_api". You can use it from plain/vanilla JS or from any framework such as Rust, React, Angular, JQuery, Ember and others.

Simple example:

<head>
      <!--include the webphone_api.js to your webpage-->
      <script src="webphone_api.js"></script>
</head>
<body>
      <script>
      //wait for the webhone to be loaded before to work with it
      webphone_api.onAppStateChange(function (state)
     {
        if (state === 'loaded') //Webphone library is fully loaded here, don't touch any API before this event
        {
                //set parameters (alternatively these can be also preset in your html, in the webphone_config.js or passed as URL parameters)
                //replace the UPPER CASE worlds below
                webphone_api.setparameter('serveraddress', SERVERADDRESS);  //Specify your SIP server IP or domain (:port)
                webphone_api.setparameter('username', USERNAME);  //A SIP username (extension/account)
                webphone_api.setparameter('password', PASSWORD);  //The password for the above SIP account
                //see the “Parameters” section in the documentation for more options
     
                //start the webphone (optional but recommended)
                webphone_api.start();
                //make a call (usually initiated by user action, such as click on a click to call button)
                webphone_api.call(number);
                //hangup (usually called on "disconnect" button click)
                webphone_api.hangup();
                //send instant message (usually from a "send chat" button)
                webphone_api.sendchat(number, message);
           }  
      });
      //you should also handle events from the sip web phone and change your GUI accordingly (onXXX callbacks)
      </script>
</body>

You can find more examples and ready to use templates in the downloadable demo package. See the "Development" chapter in the documentation.

If you are more comfortable with server side web development (ASP, .NET, java or others) then you can still control the webphone in many ways by:

• dynamically write out the webphone settings or generate its URL with the desired parameters depending on the user/session
• write a HTTP (AJAX) API to catch events such as login/call start/disconnect and drive your app logic accordingly (see the custom "HTTP API Integration" sections in the documentation for these)
• use the curl_xxx webphone parameter to setup server callbacks

For more details consult the documentation or contact us with any questions.

WebPhone