Skip to main content

Integration

Frontend integration of the agent bar into other web applications.

Getting Started​

overview

The agent bar application is a JavaScript bundle that is embedded into the CRM web application using an iframe. The connection consists of binding callbacks and calling methods via the SDK.

<iframe src="https://ucs.customer.com/operator/" id="operator-app" allow="microphone autoplay"></iframe>
<script src="https://ucs.customer.com/operator/sdk.js" type="text/javascript"></script>
<script type="text/javascript"
const operatorIframe = document.getElementById('operator-app');
const targetOrigin = 'https://crm.customer.com/';
const integration = {
  onStateChange: (status) => {
    console.log('Agent switched their status to:', status);
  },
  onCallRinging: (call) => {
    console.log('Agent got a call:', call);
  },
  onCallHangup: (call) => {
    console.log('Agent finished a call:', call);
  },
};
window.ucsOperator = new UcsOperatorSDK(operatorIframe, targetOrigin, integration);

// to switch agent status
window.ucsOperator.changeStatus("READY");

// to dial a call
window.ucsOperator.dial("+420800123456");

// to hangup a call
window.ucsOperator.hangup();

</script>

The SDK is a simple bridge between the CRM and the UCS operator application, ensuring secure integration using postMessage.

Login​

In the production environment, user login is handled via SSO directly through the operating system (e.g., Active Directory and GSSAPI). Alternatively, a trust can be established between CRM and UCS using PSK, and then the CRM can log users in via the sso method.

For development and debugging purposes, it is possible to log in with a username and password using the login method.

// login using credentials
configuration.onCredentials = () => {
  ucsOperator.login('alice', 'password1234');
}