The CommPeak WebCall Widget allows you to embed a Click-to-Call button directly onto your website. Using standard WebRTC protocols, it transforms any browser into a functional phone, routing calls through a SIP destination to your your PBX or VoIP infrastructure. This allows visitors to connect with your sales or support teams instantly, without ever leaving your page.

Creating Your WebCall Widget

Before integration, you must create a widget and configure it within your CommPeak account.

To create a widget:

1. Navigate to the WebCall Widgets page under the VoIP Services section in the CommPeak Portal.
2. Click Create WebCall Widget.
3. Fill in the following fields:

• Widget Name: A recognizable name to identify this specific widget.
• Destination (SIP URI): The target address where calls connect. This must be a valid SIP URI in the format <extension>@<server>:<port> (e.g., [email protected]:5060).
• JWT Secret: A secure key used to authenticate the widget. Click Generate to create a secure secret automatically.

Integrating the WebCall Widget Into Your Web Page

Integration involves two main parts: setting up a backend authentication endpoint and adding the JavaScript snippet to your frontend.

Preparing JWT Token Generation Endpoint

To prevent unauthorized use, CommPeak requires JWT authentication. You must implement an HTTP endpoint on your server that issues a signed JWT to authenticate the widget.

The JWT token's payload must include:

• sub: The UUID of the WebCall Widget (found on the WebCall Widgets page under VoIP Services)
• exp: The token expiration timestamp (we recommend setting it to 10 seconds).

Implementation Examples

You can use any library found on the official JWT site. Below is a specific implementation using Ruby and PHP. Note that we are using SHA256 algorithm for JWT Signature.

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

function generateJwt(): String {
    $signingKey = "secretSignKey";
    $header = [
        "alg" => "HS256",
        "typ" => "JWT"
    ];
    $header = base64UrlEncode(json_encode($header));
    $payload =  [
        "exp" => time() + 10,
        "sub" => "bf6da209-6cea-40b8-aa14-6a913286d442"
    ];
    $payload = base64UrlEncode(json_encode($payload));
    $signature = base64UrlEncode(hash_hmac('sha256', "$header.$payload", $signingKey, true));
    $jwt = "$header.$payload.$signature";
    return $jwt;
}

function base64UrlEncode($text): String {
    return str_replace(['+', '/', '='], ['-', '_', ''], base64_encode($text));
}

echo json_encode(["data" => generateJwt()]);

Adding the JavaScript Initialization Snippet

After setting up your JWT generation endpoint, add the following JavaScript snippet to your webpage to handle the widget loading logic. This script fetches the JWT from your endpoint and initializes the CommPeak call script.

📘

NOTE

The below 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);

Controlling Calls

Initiating a Call

To start a voice call, invoke the loadCallScript function. You can trigger this via a button click or a page load event:

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

Hanging Up a Call

To terminate an ongoing call, use the following command:

window.CommPeakWebCallWidget.callInProgress && window.CommPeakWebCallWidget.hangUp(

JavaScript Events Handling (Optional)

The WebCall Widget emits events that allow you to track call progress in your UI. Every event payload includes the UUID of the widget.

The list of supported events: