adding more five9 embedding development

This commit is contained in:
Peter Morton 2025-04-23 17:24:45 -05:00
parent 967c338b02
commit 95abb1b621
3 changed files with 370 additions and 332 deletions

View File

@ -0,0 +1 @@
INSERT INTO CSO_CONFIG (ID, ENV_ID, RELEASE_ID, TENANT_ID, NAME, URL, IS_DELETED) VALUES (1, 666, 1, 'default', 'Five9 Softphone', 'https://five9-softphone.mortons.site','N');

View File

@ -3,7 +3,7 @@
<head lang="en"> <head lang="en">
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>IFrame API</title> <title>IFrame API</title>
<script type="text/javascript" src="libs/five9.crm.sdk.js"></script> <script type="text/javascript" src="https://app.five9.com/dev/sdk/crm/latest/five9.crm.sdk.js"></script>
</head> </head>
<body> <body>
<script> <script>
@ -12,368 +12,369 @@
var customComponentsApi = window.Five9.CrmSdk.customComponentsApi(); var customComponentsApi = window.Five9.CrmSdk.customComponentsApi();
var crmApi = window.Five9.CrmSdk.crmApi(); var crmApi = window.Five9.CrmSdk.crmApi();
// =======CRM API======= // // =======CRM API=======
crmApi.registerApi({ // crmApi.registerApi({
getAdtConfig: function (params) { // getAdtConfig: function (params) {
var config = { // var config = {
providerName: 'Demo CRM ADT adapter', // providerName: 'Verint Channel Automation adapter',
myCallsTodayEnabled: true, // myCallsTodayEnabled: true,
myChatsTodayEnabled: true, // myChatsTodayEnabled: true,
myEmailsTodayEnabled: true, // myEmailsTodayEnabled: true,
showContactInfo: false // showContactInfo: false
}; // };
debugStream.debug({ // debugStream.debug({
callee: arguments.callee.name, // callee: arguments.callee.name,
data: params // data: params
}); // });
return Promise.resolve(config); // return Promise.resolve(config);
}, // },
search: function (params) { // search: function (params) {
debugStream.debug({ // debugStream.debug({
callee: arguments.callee.name, // callee: arguments.callee.name,
data: params // data: params
}); // });
var crmObjects = [{id: "123", label: "Contact", name: "Joe", isWho: true, isWhat: false, fields:[{displayName: "Company", value: "ABC"}]}]; // var crmObjects = [{id: "123", label: "Contact", name: "Joe", isWho: true, isWhat: false, fields:[{displayName: "Company", value: "ABC"}]}];
return Promise.resolve({crmObjects: crmObjects, screenPopObject: crmObjects[0]}); // return Promise.resolve({crmObjects: crmObjects, screenPopObject: crmObjects[0]});
}, // },
saveLog: function (params) { // saveLog: function (params) {
debugStream.debug({ // debugStream.debug({
callee: arguments.callee.name, // callee: arguments.callee.name,
data: params // data: params
}); // });
}, // },
screenPop: function (params) { // screenPop: function (params) {
debugStream.debug({ // debugStream.debug({
callee: arguments.callee.name, // callee: arguments.callee.name,
data: params // data: params
}); // });
}, // },
getTodayCallsCount: function (params) { // getTodayCallsCount: function (params) {
debugStream.debug({ // debugStream.debug({
callee: arguments.callee.name, // callee: arguments.callee.name,
data: params // data: params
}); // });
return Promise.resolve(77); // return Promise.resolve(77);
}, // },
getTodayChatsCount: function (params) { // getTodayChatsCount: function (params) {
debugStream.debug({ // debugStream.debug({
callee: arguments.callee.name, // callee: arguments.callee.name,
data: params // data: params
}); // });
return Promise.resolve(77);; // return Promise.resolve(77);;
}, // },
getTodayEmailsCount: function (params) { // getTodayEmailsCount: function (params) {
debugStream.debug({ // debugStream.debug({
callee: arguments.callee.name, // callee: arguments.callee.name,
data: params // data: params
}); // });
return Promise.resolve(11);; // return Promise.resolve(11);;
}, // },
openMyCallsToday: function (params) { // openMyCallsToday: function (params) {
debugStream.debug({ // debugStream.debug({
callee: arguments.callee.name, // callee: arguments.callee.name,
data: params // data: params
}); // });
}, // },
openMyChatsToday: function (params) { // openMyChatsToday: function (params) {
debugStream.debug({ // debugStream.debug({
callee: arguments.callee.name, // callee: arguments.callee.name,
data: params // data: params
}); // });
}, // },
contactSelected: function (contactModel) { // contactSelected: function (contactModel) {
debugStream.debug({ // debugStream.debug({
callee: arguments.callee.name, // callee: arguments.callee.name,
data: params // data: params
}); // });
}, // },
enableClickToDial: function (params) { // enableClickToDial: function (params) {
debugStream.debug({ // debugStream.debug({
callee: arguments.callee.name, // callee: arguments.callee.name,
data: params // data: params
}); // });
}, // },
disableClickToDial: function (params) { // disableClickToDial: function (params) {
debugStream.debug({ // debugStream.debug({
callee: arguments.callee.name, // callee: arguments.callee.name,
data: params // data: params
}); // });
} // }
// });
// // ======Interaction API EVENTS========
// interactionApi.subscribe({
// callStarted: function (params) {
// debugStream.debug({
// callee: arguments.callee.name,
// data: params
// });
// setCallId(params.callData.interactionId);
// },
// callFinished: function (params) {
// debugStream.debug({
// callee: arguments.callee.name,
// data: params
// });
// setCallId('');
// },
// callAccepted: function (params) {
// debugStream.debug({
// callee: arguments.callee.name,
// data: params
// });
// },
// callRejected: function (params) {
// debugStream.debug({
// callee: arguments.callee.name,
// data: params
// });
// },
// callEnded: function (params) {
// debugStream.debug({
// callee: arguments.callee.name,
// data: params
// });
// },
// emailOffered: function (params) {
// debugStream.debug({
// callee: arguments.callee.name,
// data: params
// });
// },
// emailAccepted: function (params) {
// debugStream.debug({
// callee: arguments.callee.name,
// data: params
// });
// },
// emailRejected: function (params) {
// debugStream.debug({
// callee: arguments.callee.name,
// data: params
// });
// },
// emailFinished: function (params) {
// debugStream.debug({
// callee: arguments.callee.name,
// data: params
// });
// },
// chatOffered: function (params) {
// debugStream.debug({
// callee: arguments.callee.name,
// data: params
// });
// },
// chatAccepted: function (params) {
// debugStream.debug({
// callee: arguments.callee.name,
// data: params
// });
// },
// chatRejected: function (params) {
// debugStream.debug({
// callee: arguments.callee.name,
// data: params
// });
// },
// chatEnded: function (params) {
// debugStream.debug({
// callee: arguments.callee.name,
// data: params
// });
// },
// chatFinished: function (params) {
// debugStream.debug({
// callee: arguments.callee.name,
// data: params
// });
// }
}); });
// //======== F9 API REGISTRATION======
// ======Interaction API EVENTS======== // window.Five9.CrmSdk.customComponentsApi().registerCustomComponents({template: `<adt-components>
interactionApi.subscribe({ // <adt-component location="3rdPartyComp-li-call-tab" label="3rdPartyComp-li-call-tab" style="flex-direction: column">
callStarted: function (params) { // <adt-input value="Initial value" id="aaa1" name="input1" label="Credit card1" placeholder="this is placeholder1"
debugStream.debug({ // onchange="callTabInputCallback"></adt-input>
callee: arguments.callee.name, // <adt-btn-group label="Group of buttons">
data: params // <!-- comments are ignored and styles are filtered by whitelisting -->
}); // <adt-button name="button1" label="Yes" class="btnPrimary" style="flex-grow: 1; justify-content: center;"
setCallId(params.callData.interactionId); // onclick="callTabYesCallback">Yes</adt-button>
}, // <adt-button name="button2" label="No" class="btnSecondary" style="flex-grow: 1"
// onclick="callTabNoCallback"></adt-button>
callFinished: function (params) { // </adt-btn-group>
debugStream.debug({ // </adt-component>
callee: arguments.callee.name, // <adt-component location="3rdPartyComp-li-call-details-bottom" label="3rdPartyComp-li-call-details-bottom" style="flex-direction: row; justify-content: space-between; align-items: flex-end;">
data: params // <adt-input value="Initial value" name="input2" label="Credit card2" placeholder="this is placeholder1"
}); // onchange="callDetailsInputCallback"></adt-input>
setCallId(''); // <adt-button name="button3" label="Verify" class="btnPrimary" style="justify-content: center;"
}, // onclick="callDetailsButtonCallback"></adt-button>
// </adt-component>
callAccepted: function (params) { // </adt-components>
debugStream.debug({ // `,
callee: arguments.callee.name, // callbacks: {
data: params // callTabInputCallback: function(params){
}); // debugStream.debug({
}, // callee: arguments.callee.name,
// data: params
callRejected: function (params) { // });
debugStream.debug({
callee: arguments.callee.name,
data: params
});
},
callEnded: function (params) {
debugStream.debug({
callee: arguments.callee.name,
data: params
});
},
emailOffered: function (params) {
debugStream.debug({
callee: arguments.callee.name,
data: params
});
},
emailAccepted: function (params) {
debugStream.debug({
callee: arguments.callee.name,
data: params
});
},
emailRejected: function (params) {
debugStream.debug({
callee: arguments.callee.name,
data: params
});
},
emailFinished: function (params) {
debugStream.debug({
callee: arguments.callee.name,
data: params
});
},
chatOffered: function (params) {
debugStream.debug({
callee: arguments.callee.name,
data: params
});
},
chatAccepted: function (params) {
debugStream.debug({
callee: arguments.callee.name,
data: params
});
},
chatRejected: function (params) {
debugStream.debug({
callee: arguments.callee.name,
data: params
});
},
chatEnded: function (params) {
debugStream.debug({
callee: arguments.callee.name,
data: params
});
},
chatFinished: function (params) {
debugStream.debug({
callee: arguments.callee.name,
data: params
});
}
});
//======== F9 API REGISTRATION======
window.Five9.CrmSdk.customComponentsApi().registerCustomComponents({template: `<adt-components>
<adt-component location="3rdPartyComp-li-call-tab" label="3rdPartyComp-li-call-tab" style="flex-direction: column">
<adt-input value="Initial value" id="aaa1" name="input1" label="Credit card1" placeholder="this is placeholder1"
onchange="callTabInputCallback"></adt-input>
<adt-btn-group label="Group of buttons">
<!-- comments are ignored and styles are filtered by whitelisting -->
<adt-button name="button1" label="Yes" class="btnPrimary" style="flex-grow: 1; justify-content: center;"
onclick="callTabYesCallback">Yes</adt-button>
<adt-button name="button2" label="No" class="btnSecondary" style="flex-grow: 1"
onclick="callTabNoCallback"></adt-button>
</adt-btn-group>
</adt-component>
<adt-component location="3rdPartyComp-li-call-details-bottom" label="3rdPartyComp-li-call-details-bottom" style="flex-direction: row; justify-content: space-between; align-items: flex-end;">
<adt-input value="Initial value" name="input2" label="Credit card2" placeholder="this is placeholder1"
onchange="callDetailsInputCallback"></adt-input>
<adt-button name="button3" label="Verify" class="btnPrimary" style="justify-content: center;"
onclick="callDetailsButtonCallback"></adt-button>
</adt-component>
</adt-components>
`,
callbacks: {
callTabInputCallback: function(params){
debugStream.debug({
callee: arguments.callee.name,
data: params
});
}, // },
callTabYesCallback: function(params){ // callTabYesCallback: function(params){
debugStream.debug({ // debugStream.debug({
callee: arguments.callee.name, // callee: arguments.callee.name,
data: params // data: params
}); // });
}, // },
callTabNoCallback: function(params){ // callTabNoCallback: function(params){
debugStream.debug({ // debugStream.debug({
callee: arguments.callee.name, // callee: arguments.callee.name,
data: params // data: params
}); // });
}, // },
callDetailsInputCallback: function(params){ // callDetailsInputCallback: function(params){
debugStream.debug({ // debugStream.debug({
callee: arguments.callee.name, // callee: arguments.callee.name,
data: params // data: params
}); // });
}, // },
callDetailsButtonCallback: function(params){ // callDetailsButtonCallback: function(params){
debugStream.debug({ // debugStream.debug({
callee: arguments.callee.name, // callee: arguments.callee.name,
data: params // data: params
}); // });
} // }
}}); // }});
function clearList(list) { // function clearList(list) {
var listNode = document.getElementById(list); // var listNode = document.getElementById(list);
while (listNode.lastChild) { // while (listNode.lastChild) {
listNode.removeChild(listNode.lastChild); // listNode.removeChild(listNode.lastChild);
} // }
} // }
function setCallId(callId) { // function setCallId(callId) {
document.getElementById('callId').innerHTML = callId; // document.getElementById('callId').innerHTML = callId;
} // }
function getCallId() { // function getCallId() {
return document.getElementById('callId').innerHTML; // return document.getElementById('callId').innerHTML;
} // }
var debugStream = { // var debugStream = {
debug: function (arg) { // debug: function (arg) {
console.debug("IframeV2: " + JSON.stringify(arg)); // console.debug("IframeV2: " + JSON.stringify(arg));
updateListComponent('events_list', [arg]); // updateListComponent('events_list', [arg]);
} // }
}; // };
var updateListComponent = function (name, params) { // var updateListComponent = function (name, params) {
if (params && params.length > 0) { // if (params && params.length > 0) {
var list = document.getElementById(name); // var list = document.getElementById(name);
for (var i = 0; i < params.length; i++) { // for (var i = 0; i < params.length; i++) {
list.insertAdjacentHTML('beforeend', '<li>' + JSON.stringify(params[i]) + '</li>'); // list.insertAdjacentHTML('beforeend', '<li>' + JSON.stringify(params[i]) + '</li>');
} // }
} // }
}; // };
var reset_btn = document.getElementById('reset_btn'); // var reset_btn = document.getElementById('reset_btn');
reset_btn.addEventListener('click', function () { // reset_btn.addEventListener('click', function () {
clearList('cav_list'); // clearList('cav_list');
clearList('disp_list'); // clearList('disp_list');
clearList('events_list'); // clearList('events_list');
}); // });
var get_btn = document.getElementById('get_btn'); // var get_btn = document.getElementById('get_btn');
get_btn.addEventListener('click', function () { // get_btn.addEventListener('click', function () {
clearList('cav_list'); // clearList('cav_list');
interactionApi.getCav({interactionId: getCallId()}).then(function (cavList) { // interactionApi.getCav({interactionId: getCallId()}).then(function (cavList) {
console.debug('IframeV2 got cavList: ' + JSON.stringify(cavList)); // console.debug('IframeV2 got cavList: ' + JSON.stringify(cavList));
updateListComponent('cav_list', cavList); // updateListComponent('cav_list', cavList);
}); // });
}); // });
var set_cav_btn = document.getElementById('set_cav_btn'); // var set_cav_btn = document.getElementById('set_cav_btn');
set_cav_btn.addEventListener('click', function () { // set_cav_btn.addEventListener('click', function () {
var cavId = document.getElementById('cavId').value; // var cavId = document.getElementById('cavId').value;
var cavValue = document.getElementById('cavValue').value; // var cavValue = document.getElementById('cavValue').value;
interactionApi.getCav({interactionId: getCallId()}).then(function (cavList) { // interactionApi.getCav({interactionId: getCallId()}).then(function (cavList) {
console.debug('IframeV2 got cavList: ' + JSON.stringify(cavList)); // console.debug('IframeV2 got cavList: ' + JSON.stringify(cavList));
updateListComponent('cav_list', cavList); // updateListComponent('cav_list', cavList);
console.debug('IframeV2 set cavList: ' + JSON.stringify(cavList)); // console.debug('IframeV2 set cavList: ' + JSON.stringify(cavList));
interactionApi.setCav({interactionId: getCallId(), cavList: [{id: cavId, value: cavValue}]}); // interactionApi.setCav({interactionId: getCallId(), cavList: [{id: cavId, value: cavValue}]});
}); // });
}); // });
var get_disp_btn = document.getElementById('get_disp_btn'); // var get_disp_btn = document.getElementById('get_disp_btn');
get_disp_btn.addEventListener('click', function () { // get_disp_btn.addEventListener('click', function () {
clearList('disp_list'); // clearList('disp_list');
interactionApi.getDispositions({interactionType: 'Call', interactionId: getCallId()}).then(function (dispList) { // interactionApi.getDispositions({interactionType: 'Call', interactionId: getCallId()}).then(function (dispList) {
console.debug('IframeV2 got dispList: ' + JSON.stringify(dispList)); // console.debug('IframeV2 got dispList: ' + JSON.stringify(dispList));
updateListComponent('disp_list', dispList); // updateListComponent('disp_list', dispList);
}); // });
}); // });
var set_disp_btn = document.getElementById('set_disp_btn'); // var set_disp_btn = document.getElementById('set_disp_btn');
set_disp_btn.addEventListener('click', function () { // set_disp_btn.addEventListener('click', function () {
var dispId = document.getElementById('dispId').value; // var dispId = document.getElementById('dispId').value;
interactionApi.setDisposition({interactionType: 'Call', interactionId: getCallId(), dispositionId: dispId}); // interactionApi.setDisposition({interactionType: 'Call', interactionId: getCallId(), dispositionId: dispId});
}); // });
var c2d_btn = document.getElementById('c2d_btn'); // var c2d_btn = document.getElementById('c2d_btn');
c2d_btn.addEventListener('click', function () { // c2d_btn.addEventListener('click', function () {
var num = document.getElementById('c2dNum').value; // var num = document.getElementById('c2dNum').value;
crmApi.click2dial({click2DialData: {clickToDialNumber: num}}); // crmApi.click2dial({click2DialData: {clickToDialNumber: num}});
//crmApi.click2dial({click2DialData: {clickToDialNumber: num, crmObject: {id: "789", label: "Account", name: "XYZ", isWho: false, isWhat: true}}}); // //crmApi.click2dial({click2DialData: {clickToDialNumber: num, crmObject: {id: "789", label: "Account", name: "XYZ", isWho: false, isWhat: true}}});
}); // });
var objectVisited_btn = document.getElementById('objectVisited_btn'); // var objectVisited_btn = document.getElementById('objectVisited_btn');
objectVisited_btn.addEventListener('click', function () { // objectVisited_btn.addEventListener('click', function () {
crmApi.objectVisited({crmObject: {id: "456", label: "Case", name: "Broken microwave", isWho: false, isWhat: true}}); // crmApi.objectVisited({crmObject: {id: "456", label: "Case", name: "Broken microwave", isWho: false, isWhat: true}});
}); // });
var suggestedNumbers_btn = document.getElementById('suggestedNumbers_btn'); // var suggestedNumbers_btn = document.getElementById('suggestedNumbers_btn');
suggestedNumbers_btn.addEventListener('click', function () { // suggestedNumbers_btn.addEventListener('click', function () {
crmApi.suggestedNumbers( // crmApi.suggestedNumbers(
{suggestedNumbers: [ // {suggestedNumbers: [
{clickToDialNumber:"9250000111", crmObject: {id: "441", label: "Case", name: "Engine broken", isWho: false, isWhat: true}}, // {clickToDialNumber:"9250000111", crmObject: {id: "441", label: "Case", name: "Engine broken", isWho: false, isWhat: true}},
{clickToDialNumber:"9250000112", crmObject: {id: "789", label: "Account", name: "XYZ", isWho: false, isWhat: true}}, // {clickToDialNumber:"9250000112", crmObject: {id: "789", label: "Account", name: "XYZ", isWho: false, isWhat: true}},
{clickToDialNumber:"9250000113", crmObject: {id: "731", label: "Contact", name: "Tim", isWho: true, isWhat: false}}]}); // {clickToDialNumber:"9250000113", crmObject: {id: "731", label: "Contact", name: "Tim", isWho: true, isWhat: false}}]});
}); // });
}); // });
</script> </script>
<!-- <div class="panel-body">
<div class="panel-body"> --> <iframe id="iframe-api-v2-panel" src="https://app.five9.com/clients/integrations/adt.main.html?f9crmapi=true&f9verticalthreshold=300px" style="position: relative; float: right; height: 600px; width: 299p; border: 0;""></iframe>
<iframe id="iframe-api-v2-panel" src="https://app.five9.com/clients/integrations/adt.li.main.html?f9crmapi=true&f9verticalthreshold=300px" style="position: relative; float: right; height: 600px; width: 299p; border: 0;""></iframe> </div>
<!-- </div> --> <!-- <div class="panel-body">
<iframe id="iframe-api-v2-panel" src="https://app.five9.com/clients/integrations/adt.li.main.html?f9crmapi=true&f9verticalthreshold=300px" style="position: relative; float: right; height: 600px; width: 299px"></iframe>
</div> -->
<!-- <!--
<p>Call Variables for callId: </p> <p id='callId'></p> <p>Call Variables for callId: </p> <p id='callId'></p>
<button id="get_btn">Get Cav</button> <button id="get_btn">Get Cav</button>

36
inception.html Normal file
View File

@ -0,0 +1,36 @@
<div
class="ui-dialog ui-widget ui-widget-content ui-corner-all embeddedSoftphone-dialog"
tabindex="-1"
role="dialog"
aria-labelledby="ui-id-1"
style="
outline: 0px;
z-index: 1000;
height: auto;
width: 300px;
position: absolute;
top: 32px;
right: 295.891px;
"
>
<div
class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"
>
<span id="ui-id-1" class="ui-dialog-title">Softphone</span
><a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button"
><span class="ui-icon ui-icon-closethick">close</span></a
>
</div>
<div
id="f31_embeddedSoftphone_dialog"
class="ui-dialog-content ui-widget-content"
style="width: auto; min-height: 0px; height: 468.953px"
>
<iframe
src="https://localhost:443/iframe_api_v2.html"
allow="microphone; autoplay"
title="Amazon Connect CCP"
style="width: 100%; height: 100%"
></iframe>
</div>
</div>