Jabra

Jabra is a leading developer of call center headsets.

Integration steps

callstats.io has integrated the Jabra headset API, enabling you to visualize a range of Jabra headset metrics on the callstats.io dashboard. Our integration varies by CPaaS SDK. Please follow the integration instructions carefully because the order of library inclusion affects the stats reported to the callstats.io monitoring service.

Step 1: Start by installing the Jabra Chrome extension

https://chrome.google.com/webstore/detail/jabra-browser-integration/okpeabepajdgiepelmhkfhkjlhhmofma

Step 2: Install native Chrome-host

https://github.com/gnaudio/jabra-browser-integration#native-chromehost-downloads

Step 3: Follow the instructions corresponding with your CPaaS SDK

Amazon Connect

NOTE: You must use shim version 1.1.7 or later. https://api.callstats.io/static/csio-callstats-amazon-connect-shim.js

After integrating with callstats.io https://www.callstats.io/integrate/amazon-connect-integration, import the jabra-browser-integration and callstats-jabra-shim and place them below callstats.js inside the HEAD tag. The order of the library import should be strictly followed for the stats to be reported correctly. 

<script src="https://api.callstats.io/static/callstats.min.js"></script>
// Insert the listener code below 
<script src="https://api.callstats.io/static/jabra-browser-integration-2.0.js"></script>
<script src="https://api.callstats.io/static/callstats-jabra-shim.js"></script>
// Insert end

Then add “enableJabraCollection” parameter and set it to true in the configParams

const configParams = { 
  ……,
  // Insert the code below 
  enableJabraCollection: true
  // Insert end
}
......
var callstats = window.CallstatsAmazonShim.initialize(connect, appId, appSecret, localUserId, configParams, csInitCallback, csStatsCallback);

Twilio Flex

After integrating with callstats.io https://www.callstats.io/integrate/twilio-flex, import the jabra-browser-integration and callstats-jabra-shim and place them below callstats.js inside the HEAD tag. The order of the library import should be strictly followed for the stats to be reported correctly.

 

<script src="https://api.callstats.io/static/callstats.min.js"></script>
// Insert the listener code below 
<script src="https://api.callstats.io/static/jabra-browser-integration-2.0.js"></script>
<script src="https://api.callstats.io/static/callstats-jabra-shim.js"></script>
// Insert end

Then In src/App.js add the following function inside the App class to stop listening to Jabra events when call ends:

 

render() {
  const { manager } = this.props;
  if (!manager) {
    return null;
  }
  Flex.Actions.addListener("afterAcceptTask", (payload) => {
    window.$callData = payload
  })

  // Insert the listener code below 
  Flex.Actions.addListener("afterHangupCall", (payload) => {
    window.CallstatsJabraShim.stopJabraMonitoring()
  })
  Flex.Actions.addListener("afterCompleteTask", (payload) => {
    window.CallstatsJabraShim.stopJabraMonitoring()
  })
  // Listener code ends

  return (
    <Flex.ContextProvider manager={manager}>
      <Flex.RootContainer />
    </Flex.ContextProvider>
  );
}
 

Other SDKs

After integrating with callstats.io, import the jabra-browser-integration and callstats-jabra-shim and place them below callstats.js inside the HEAD tag. The order of the library import should be strictly followed for the stats to be reported correctly.

 

<script src="https://api.callstats.io/static/callstats.min.js"></script>
// Insert the listener code below 
<script src="https://api.callstats.io/static/jabra-browser-integration-2.0.js"></script>
<script src="https://api.callstats.io/static/callstats-jabra-shim.js"></script>
// Insert end

Call CallstatsJabraShim.initialize function after importing the libraries

CallstatsJabraShim.initialize(callstats);

Call startJabraMonitoring function when the conference begins

CallstatsJabraShim.startJabraMonitoring(conferenceID);

Call stopJabraMonitoring function when the conference ends

CallstatsJabraShim.stopJabraMonitoring();