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/okpeabepajdgiepelmhkfhkjlhhmofmaStep 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();