NXCC Iframe

NXCloud Call Center Iframe Integration Documentation

1. Iframe URL

https://nxlink.nxcloud.com/admin/#/nxcc

// Create iframe
// Recommended width is 380px, height is 690px
<iframe id="iframe" allow="camera *; microphone *; autoplay *; hid *" src="https://nxlink.nxcloud.com/admin/#/nxcc"></iframe>

2. Initialize Configuration Parameters and Register Phone

Field	Description
email	Account (email)
password	Password
lang	Language, currently supports Chinese (zh-CN), English (en-US), Spanish (es-MX)

const message = {
    type: 'init',
    content: {
        email：email，
    	password： password，
        lang: "zh-CN",
    }
}

const mapFrame = document.getElementById("iframe")
mapFrame.onload = function() {
	const iframeWin = mapFrame.contentWindow;
	iframeWin.postMessage(message, '*');
}

3. Iframe Page Callback

// iframe sends message to the system via postMessage
window.parent.postMessage(data, '*');

1. Account Login Successful

   If the login account has an agent, the following fields are passed; if there is no agent, no fields are passed.

   Field	Description
   email	Login account
   sipNum	Phone number
   groupNo	Agent group number

   // Callback data
   event.data:{
       type: 'login',
       content: {
         email: '',
         sipNum: '',
         groupNo: ''    
       }
   }

2. Whether the Login Account Has an Agent

   code	Description
   1	The account has an agent
   2	The account does not have an agent or the agent status is closed

   // Callback data
   event.data:{
       type: 'agentExists',
       content: {
         code: 1
       }
   }

3. Phone Status and Callback Messages

   Code	Phone Status
   0	Dialing out
   1	Incoming call
   2	In call
   3	Phone disconnected
   4	Phone registered successfully
   5	Hung up
   6	Account not logged in
   -1	Phone registration failed

   When the phone status is dialing out (0), incoming call (1), in call (2), or hung up (5), the following fields are returned:

   Field	Description
   callId	Call ID
   direction	Call scenario: 0 for incoming, 1 for outgoing, 2 for auto-dial to agent
   caller	Caller number
   callee	Callee number
   orderId	Custom user ID, string, 32 characters
   params	Custom user fields, supports JSON string
   callStartTimestamp	Timestamp when call is initiated/received
   callConnectedTimestamp	Timestamp when call is connected
   callHangUpTimestamp	Timestamp when call is hung up

   // Callback data
   event.data:{
       type: 'dialStatus',
       content: {
         code: 0,
         callId: '',
         orderId: '',
         direction: 1,
         caller: '',
         callee: '',
         params: '',
         callStartTimestamp: '',
         callConnectedTimestamp: '',
         callHangUpTimestamp: ''
       }
   }

4. Agent Status (default is available)

   code	Description
   1	Available
   2	Busy (including initiating a call/receiving a call, in call, in wrap-up)

   // Callback data
   event.data:{
       type: 'agentStatus',
       content: {
         code: 1
       }
   }

5. Logout

   // Callback data
   event.data:{
       type: 'logout'
   }

6. Token Expired

   // Callback data
   event.data:{
       type: 'tokenInvalid'
   }

4. Initiate a Call

const message = {
    type: 'callOut',
    content: {
        caller: '', // varchar(32)，caller, if left empty a random number will be used
        callee: "8524444", // varchar(32)，callee, should include country code, e.g., for Hong Kong:852***
        countryCode: "852", // callee country code
        orderId: "66493f1afaa3",  // varchar(32)，custom orderId, optional
        params： "" // custom fields
    }
}

const mapFrame = document.getElementById("iframe")
const iframeWin = mapFrame.contentWindow;
iframeWin.postMessage(message, '*');