📞 How to Integrate the Speechpath JavaScript SDK into Your Web App

Want to add real-time call data, presence updates, and SIP stats to your web app? The Speechpath JavaScript SDK lets you plug into a live stream of PBX data using a simple script.

In this post, we’ll show you how to set it up and start receiving live data in just a few steps.

🔧 What Is the Speechpath JavaScript SDK?

The Speechpath SDK uses PubNub’s publish/subscribe messaging to deliver live SIP data to your front-end. You’ll get:

  • Active calls

  • Presence updates

  • Call statistics

You’ll need your App ID, Token, and PBX code from the Speechpath portal. Make sure PubNub is enabled on your account.

✅ Step 1: Add the SDK to Your Website

Paste the following script into your HTML (inside the <head> or before the closing </body> tag):


<script type="text/javascript" src="https://speechpath.app/js/plugins/sdk.js"></script>

🛠 Step 2: Configure Your Credentials

Use your actual credentials in the config object like this:


<script>
  var config = {
    id: 303,
    token: '42DAHhgtTGslaTFatfFKiobE6CynU3ee',
    channels: ['presence','activeCalls', 'stats']
  };
</script>

🧩 Step 3: Hook Into the Data Events

Here are the event handlers you can use to listen for live updates:

📞 Active Calls


sip2web.on('activeCalls', function(data) { console.log('Active Calls:', data); });

👤 Presence


sip2web.on('presence', function(data) { console.log('Presence:', data); });

📊 Statistics


sip2web.on('stats', function(data) { console.log('Stats:', data); });

💡 Example: Full Integration in HTML

You can test the full integration with this HTML template. It displays real-time data in three boxes:


<!DOCTYPE html>
<html>
    <head>
        <title>Speechpath SIP data</title>
        <meta charset="UTF-8">
        <script src="https://speechpath.app/js/plugins/sdk.js"></script>
        <style>
            .wrapper{width:1000px; margin:10vh auto;}
            .output {
                padding:10px; margin:5px; background-color:#555; overflow: hidden;
                color:#fff; width:300px; height: 400px; display:inline-block
             }
        </style>
    </head>
    <body>
         <div class="wrapper">
            <div class="output" id="activeCalls"></div>
            <div class="output" id="stats"></div>
            <div class="output" id="presence"></div>
        </div>
        
        <script>
            var myApp = {
                handle: function (data, channel) {                    
                    document.getElementById(channel)
                        .innerHTML = `<pre>${JSON.stringify(data, null, 2)}</pre>`;
                }
            };
        
            // These values should be substituted with your own credentials.
            var config = {
                id: 303,
                token: '42DAHhgtTGslaTFatfFKiobE6CynU3ee',
                channels: ['presence','activeCalls', 'stats']
            };

            window.addEventListener('load', function(){
                const sip2web = new Sip2Web(config);
                sip2web.on('activeCalls', myApp.handle); 
                sip2web.on('stats', myApp.handle); 
                sip2web.on('presence', myApp.handle); 
            });

        </script>       
    </body>
</html>

🚀 Wrapping Up

And that’s it! You’ve now got live SIP data flowing into your frontend, ready to display or process however you like.

Want to go deeper? Check out the official documentation at Speechpath SDK Docs.