WebCall Widget for In-page VoIP Calls Directly From Your Website

Give your website a voice.

With the CommPeak WebCall Widget integration, you can embed a "Click-to-Call" button that connects visitors directly to your PBX system or any other VoIP destination. It utilizes standard WebRTC protocols to turn any browser into a phone, routing calls straight to your sales team or support agents without them ever leaving your website.

Create your WebCall Widget

You can begin by configuring your widget on the WebCall Widgets page, found within the VoIP Services section. Use the "Create WebCall Widget" button to setup your first widget.

To create your widget, please fill in the fields below:

• Widget Name: Choose a recognizable name to help you identify this widget later.
• Destination (SIP URI): The target address where calls will be connected. This must be a valid SIP URI in the format <extension>@<server>:<port> (e.g., [email protected]:5060).
• JWT Secret: The secret key used to securely authenticate the WebCall Widget with CommPeak's infrastructure. You can use the "Generate" button to allow us generate a secret for you.

Integrate the WebCall Widget into your Web Page

Prepare JWT Token generation endpoint

We use standard JWT authentication to prevent abuse and authorize requests. Therefore, you are required to implement an HTTP endpoint that issues a signed JWT to authenticate the widget.

The JWT Token's payload must include the following claims:

• sub: The UUID of the WebCall Widget.
• exp: The token expiration timestamp (we recommend setting this to 10 seconds)."

UUID of the widget can be obtained from the WebCall Widgets page under VoIP Services:

Here is an example of generating JWT Token in Ruby. You can use any library provided at the official site of JWT

You can use any library found on the official JWT site. Below is a specific implementation using Ruby.

def webcall_jwt
  # UUID of the WebCall Widget and expiration set to 30 seconds from now
  payload = { uuid: 'bf6da209-6cea-40b8-aa14-6a913286d442', exp: Time.now.to_i + 30 }
  # JWT Secret used to sign the token
  secret = 'xxxxxsdfgsdfsd'
  # Generate a signed JWT
  token = JWT.encode(payload, secret, 'HS256')
  # Return the signed JWT within the response body
  render json: { data: token }
end

Integrate WebCall Widget's initialization JavaScript Snippet to you page

After setting up your JWT generation endpoint, add the following JavaScript snippet to your webpage. This code is provided as an example; feel free to adapt the implementation to fit your specific requirements.

(function(window, document) {
  // Widget initialization code
  window.CommPeakWebCallWidget = window.CommPeakWebCallWidget || {};
  window.CommPeakWebCallWidget.loadCallScript = function(jwtEndpointUrl, jwtEndpointMethod) {
    var req = new XMLHttpRequest();

    req.responseType = 'json';
    req.open(jwtEndpointMethod, jwtEndpointUrl);
    req.addEventListener('load', function(_event) {
      // in 1st step we are returning JSON response with "data" attribute holding the signed JWT
      var token = req.response.data;
      // importing the CommPeak WebCall Widget script with JWT token
      var scriptElement = document.createElement('script');
      scriptElement.src = `https://my.commpeak.com/web_calls/embedded-${token}.js`;
      scriptElement.async = true;
      scriptElement.defer = true;

      (document.head || document.body || document.documentElement).appendChild(scriptElement);
    });

    req.send();
  };
})(window, document);

Create an outgoing voice call

To start a voice call using the WebCall Widget, run the following JavaScript code:

// Replace parameters with your actual ones
window.CommPeakWebCallWidget.loadCallScript('/webcall_jwt', 'GET');

Feel free to invoke this logic whenever needed, whether upon a button click or automatically when the page loads.

JavaScript Events handling (optional)

The WebCall Widget emits several events that you can subscribe to in order to track the progress of a call. Each event payload includes a uuid field representing the specific WebCall Widget ID. The complete list of supported events is below:

• web_call:connecting - fired when the voice call is being initialized
• web_call:progress - fired when the originating voice call gets a ringing signal from destination (optional)
• web_call:accepted - fired when the voice call is being answered by receiving party
• web_call:failed - fired when call fails, the reason for the failure is provided in the cause field of the event payload
• web_call:ended - fired when the call ends. If the call failed, the reason for the failure is provided in the cause field of the event payload