Creating the iframe

<iframe 
  src="https://yourInstance.ucontactcloud.com/uphone/" 
  scrolling="no" 
  allow="camera;microphone">
</iframe>

Event notifications

Messages will be sent to the parent page when these events occur:

For subscribing uPhone events, window proxy API will have to be used.

This is an example of how to subscribe to events from the page that has the iframe.

window.addEventListener('message', e =>{
	console.log(e.data.action);
	console.log(e.data.params.number);
});

The information will be received in the following format

Make call 

{
  "action":"makeCall",
  "params":{
	"number":1234
	"campaign":"campaign->"
  }
}

Receiving a call

{
  "action":"gettingCall",
  "params":{
    "number":1234
    "campaign":"campaign->"
  }
}

Finished call

{
  "action": "finishedCall",
  "params": {
    "campaign": "Incoming<-",
    "clientId": "9999",
    "date": "2022-6-17 12:51:59",
    "direction": "incoming",
    "duration": "123",
    "guid": "6353dfa0-2a90-4d57-b145-1c3826cde381"
  }
}

Sent dispositions

{
  "action": "sentDispositions",
  "params":{
    "campaign": "Incoming<-",
    "clientId": "9999",
    "date": "2022-6-17 12:51:59",
    "direction": "incoming",
    "dispositions": {
      "action": "NOACTION"
      "comment": "comment"
      "value1": "Venta"
      "value2": ""
      "value3": ""
    },
    "duration": "123",
    "guid": "6353dfa0-2a90-4d57-b145-1c3826cde381"
  }
}

Execute actions

You can execute actions on uPhone by using the window proxy API. 

//Get the iframe window
var w = document.getElementsByTagName('iframe')[0].contentWindow;

const call = {
  action: "makecall",
  params:{
    number:1113,
    campaign: "campaign->"
  }
};
//Send message
w.postMessage(call, '*');

Here is an example of how to obtain the iframe window and sending to the uPhone.