pierrick | 2018-05-02 12:46:42 UTC | #1
Hi,
I am testing the new embeddable framework and noticed that the example provided here (in the View Full Example section) does not work.
It throws the following error:
Here is my code (line 35 is the one that starts with window.PureCloud.subscribe):
window.Framework = {
config: {
name: "TKB",
clientIds: {
'mypurecloud.ie': '2061875f-dcf2-4f82-8f54-cf6e3e2954f6'
},
settings: {
embedWebRTCByDefault: true,
hideWebRTCPopUpOption: false,
enableCallLogs: true,
hideCallLogSubject: false,
hideCallLogContact: false,
hideCallLogRelation: false
},
helpLinks: {},
customInteractionAttributes: [],
getUserLanguage: function (callback) {
callback("en-US");
}
},
initialSetup: function () {
console.log('Initial setup called');
},
screenPop: function (searchString, interaction) {
console.log('screenPop called');
},
processCallLog: function (callLog, interaction, eventName, onSuccess, onFailure) {
console.log('processCallLog called');
},
openCallLog: function (callLog) {
console.log('openCallLog called');
}
}
window.PureCloud.subscribe([{
type: 'Interaction',
callback: function (category, interaction) {
console.log('callback for interaction called');
}
}, {
type: 'UserAction',
callback: function (category, data) {
console.log('callback for useraction called');
}
}]);
function Call() {
window.PureCloud.clickToDial({ number: '+33680854089', autoPlace: true });
}
What is the correct way of calling Actions?
Thanks.
Junji_Sawada | 2018-05-02 19:38:28 UTC | #2
Hi Pierrick,
If you are serving your framework.js locally (at https://localhost/framework.js) and using the URL parameter "crm=framework-local-secure" in your URL, you should not see such an error in the console unless I'm missing something.
How are you loading your framework.js in your environment?
Junji
pierrick | 2018-05-03 07:57:30 UTC | #3
Hey @Junji_Sawada,
I am indeed serving framework.js locally. See screenshot below:
Here is the HTML that shows how I load framework.js:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="framework.js"></script>
</head>
<body>
<button onclick="Call()">Call</button>
<iframe src="https://apps.mypurecloud.ie/crm/index.html?crm=framework-local-secure" frameborder="0" width="600" height="600"></iframe>
</body>
</html>
While the code in window.Framework works fine, I am unable to call any window.PureCloud functions
Here is my framework.js file:
window.Framework = {
config: {
name: "TKB",
clientIds: {
'mypurecloud.ie': '2061875f-dcf2-4f82-8f54-cf6e3e2954f6'
},
settings: {
embedWebRTCByDefault: true,
hideWebRTCPopUpOption: false,
enableCallLogs: true,
hideCallLogSubject: false,
hideCallLogContact: false,
hideCallLogRelation: false
},
helpLinks: {},
customInteractionAttributes: [],
getUserLanguage: function (callback) {
callback("en-US");
}
},
initialSetup: function () {
console.log('Initial setup called');
},
screenPop: function (searchString, interaction) {
console.log('screenPop called');
},
processCallLog: function (callLog, interaction, eventName, onSuccess, onFailure) {
console.log('processCallLog called');
},
openCallLog: function (callLog) {
console.log('openCallLog called');
}
}
window.PureCloud.subscribe([{
type: 'Interaction',
callback: function (category, interaction) {
console.log('callback for interaction called');
}
}, {
type: 'UserAction',
callback: function (category, data) {
console.log('callback for useraction called');
}
}]);
function Call() {
window.PureCloud.clickToDial({ number: '+33680854089', autoPlace: true });
}
Here is the full console.log (see the subscribe error that comes up right away).
framework.js:35 Uncaught TypeError: Cannot read property 'subscribe' of undefined
at framework.js:35
(anonymous) @ framework.js:35
externals.js:3318 This appears to be Chrome
externals.js:3867 This appears to be Chrome
app.js:73 9:54:52_780 AM => Stopping client heart beat
app.js:73 9:54:52_784 AM => Stopping client heart beat
app.js:73 9:54:52_846 AM => Checking for GrandCentral Features
index.html:1 GET https://dhqbrvplips7x.cloudfront.net/crm/2384/assets/sound/phone-ringtone.mp3 0 ()
app.js:73 9:54:53_827 AM => Waiting for Partners Library to be available...
app.js:73 9:54:53_828 AM => ...found Partners Library.
app.js:73 9:54:53_829 AM => No user language found in cache, checking for provided partner method
app.js:73 9:54:53_830 AM => Got user language from the CRM connector: "en-US"
app.js:73 9:54:53_833 AM => Retrieved call center settings: {"createCallLogs":true,"callLogEnabled":true,"enableWorkspaceTransfers":false,"hideCallLogSubject":false,"hideCallLogContact":false,"hideCallLogRelation":false}
app.js:73 9:54:53_834 AM => Setting feature toggle for key: createCallLogs value: true
app.js:73 9:54:53_835 AM => Setting feature toggle for key: hideCallLogSubject value: false
app.js:73 9:54:53_836 AM => Setting feature toggle for key: hideCallLogContact value: false
app.js:73 9:54:53_837 AM => Setting feature toggle for key: hideCallLogRelation value: false
app.js:73 9:54:53_838 AM => Setting feature toggle for key: enableWorkspaceTransfers value: false
framework.js:22 Initial setup called
app.js:73 9:54:53_858 AM => Completed HTTP GET /platform/api/v2/organizations/me | Correlation Id: 469e392e-3741-47fb-bf52-fe7097ad42e7
app.js:73 9:54:53_874 AM => Completed HTTP GET /platform/api/v2/featuretoggles?feature=cwcFEATURE_feedback&feature=cwcFEATURE_useRealtimeCarrierPigeon&feature=cwcSocialSupport&feature=cwcWebRtcPersistentConnection&feature=cwcStandaloneClient&feature=cwcWebRtcBypassPublicAPI&feature=cwcOutboundEmail&feature=cwccreateCallLogs&feature=cwccallLogEnabled&feature=cwcenableWorkspaceTransfers&feature=cwcautoAssociation&feature=cwcembedScriptsInConsole&feature=cwconQueue&feature=cwcqueueActivation&feature=cwccanRecordInteractions&feature=cwccanForwardCall&feature=cwccanViewUserAggregate&feature=cwccanViewConversationAggregate&feature=cwccanSecurePause&feature=cwccanCreateEmail | Correlation Id: b0e2e9a3-d4d1-4b8a-b82a-020fa1c6c67d
app.js:73 9:54:53_879 AM => Attempting to enable cwcOutboundEmail
app.js:73 9:54:53_880 AM => Setting feature toggle for key: OutboundEmail value: true
app.js:73 9:54:53_880 AM => Attempting to enable cwcWebRtcPersistentConnection
app.js:73 9:54:53_880 AM => Setting feature toggle for key: WebRtcPersistentConnection value: true
app.js:73 9:54:54_137 AM => Completed HTTP GET /platform/api/v2/users/me?expand=authorization,station | Correlation Id: e70222ed-3960-4eb5-8c62-c124c2b889cd
app.js:73 9:54:54_139 AM => Setting feature toggle for key: onQueue value: true
app.js:73 9:54:54_139 AM => Setting feature toggle for key: queueActivation value: true
app.js:73 9:54:54_140 AM => Setting feature toggle for key: queueActivation value: true
app.js:73 9:54:54_141 AM => Setting feature toggle for key: queueActivation value: true
app.js:73 9:54:54_388 AM => Translation found for: en-us
app.js:73 9:54:54_390 AM => Repopulate contacts and relates after translation is done
app.js:73 9:54:54_494 AM => Completed HTTP GET /platform/api/v2/users/d5427627-415c-4b47-89e9-fab8f79d10dc/queues?pageSize=100&pageNumber=1&joined=true | Correlation Id: 79d23444-0376-4b22-979b-6536a389782c
app.js:73 9:54:54_516 AM => Completed HTTP GET /platform/api/v2/users/d5427627-415c-4b47-89e9-fab8f79d10dc/queues?pageSize=100&pageNumber=1&joined=false | Correlation Id: 2fe8dca1-bc3b-469a-bf57-2eb585dc316e
app.js:73 9:54:54_571 AM => Completed HTTP PUT /platform/api/v2/notifications/channels/L1ZaM0LtzdaCzo03evFyi3XulM64n6nW1Jn1gUAMcg2w4gL83qawMCQTh2GCHDW8GmaOX27wTpREVJO5o3nFwg/subscriptions | Correlation Id: 086b491b-73c2-4ace-8034-9355afbb8ae0
app.js:73 9:54:54_581 AM => Waiting on realtime to become available.
app.js:73 9:54:54_868 AM => Subscribing to realtime event: rtcIceServers
app.js:73 9:54:54_869 AM => Subscribing to realtime event: carrierPigeonSubscribed
app.js:73 9:54:54_869 AM => Subscribing to realtime event: carrierPigeonMessage
app.js:73 9:54:54_878 AM => Attempting to connect to realtime
realtime.full.js:4773 realtime connected, but not bound yet
app.js:73 9:54:55_237 AM => CRM Web Client connected.
app.js:73 9:54:55_239 AM => Navigating to InteractionList in UI
app.js:73 9:54:55_240 AM => Saving current page to storage: InteractionList
framework.js:43 callback for useraction called
framework.js:43 callback for useraction called
app.js:73 9:54:55_250 AM => Successfully obtained user info: {"canRecord":true,"canForwardCall":true,"canViewUserAggregate":true,"canViewConversationAggregate":true,"canSecurePause":true,"canCreateEmail":true,"id":"d5427627-415c-4b47-89e9-fab8f79d10dc","name":"Pierrick Lozach"}
app.js:73 9:54:55_255 AM => Setting feature toggle for key: canRecordInteractions value: true
app.js:73 9:54:55_256 AM => Setting feature toggle for key: canForwardCall value: true
app.js:73 9:54:55_258 AM => Setting feature toggle for key: canViewUserAggregate value: true
app.js:73 9:54:55_259 AM => Setting feature toggle for key: canViewConversationAggregate value: true
app.js:73 9:54:55_260 AM => Setting feature toggle for key: canSecurePause value: true
app.js:73 9:54:55_262 AM => Setting feature toggle for key: canCreateEmail value: true
app.js:73 9:54:55_263 AM => Redirecting to current page: InteractionList
app.js:73 9:54:55_264 AM => Navigating to InteractionList in UI
app.js:73 9:54:55_266 AM => Saving current page to storage: InteractionList
framework.js:43 callback for useraction called
app.js:73 9:54:55_269 AM => Realtime connected
app.js:73 9:54:55_281 AM => Stopping client heart beat
app.js:73 9:54:55_289 AM => This tab is the primary tab now
app.js:73 9:54:55_481 AM => Completed HTTP GET /platform/api/v2/date | Correlation Id: e303bb13-901c-4492-8945-936d7a72a605
app.js:73 9:54:55_486 AM => Calculated server time offset: 7.4945 seconds
app.js:73 9:54:55_534 AM => Completed HTTP GET /platform/api/v2/conversations | Correlation Id: 5558e44d-559a-497d-a1ed-dcc4b35a6d60
app.js:73 9:54:55_539 AM => Fetched 0 conversations.
app.js:73 9:54:55_541 AM => Setting current interaction: interactionId = , participantId = undefined, callId = undefined
app.js:73 9:54:55_543 AM => Beginning Loop for setting association per interaction: []
app.js:73 9:54:55_545 AM => Removing all associations from local storage. No interactions.
app.js:73 9:54:55_547 AM => Removing all call logs. No current Interactions.
app.js:73 9:54:55_548 AM => [onInteractionsLoaded] {"entities":[],"pageSize":0,"pageNumber":1,"total":0,"selfUri":"/api/v2/conversations?pageSize=0&pageNumber=1","firstUri":"/api/v2/conversations?pageSize=0&pageNumber=1","lastUri":"/api/v2/conversations?pageSize=0&pageNumber=1","pageCount":0}
app.js:73 9:54:55_569 AM => Completed HTTP GET /platform/api/v2/timezones?pageSize=1000 | Correlation Id: 00adc513-176b-471f-ad95-67a3fec91c87
app.js:73 9:54:55_741 AM => Successfully obtained 467 time zones.
app.js:73 9:54:55_754 AM => Completed HTTP GET /platform/api/v2/users/d5427627-415c-4b47-89e9-fab8f79d10dc/callForwarding | Correlation Id: 64247c47-2f14-4751-ae22-a6caa0a64f33
app.js:73 9:54:55_774 AM => Completed HTTP GET /platform/api/v2/presencedefinitions?pageSize=25 | Correlation Id: fad66c4c-8cec-4c19-ae2c-9ac5cd56b90b
app.js:73 9:54:55_779 AM => fetching valid presence definitions
app.js:73 9:54:55_783 AM => Adding out of office as a selectable status
app.js:73 9:54:55_846 AM => Subscribed to Carrier Pigeon (CP)
app.js:73 9:54:55_869 AM => Completed HTTP GET /directory/api/v1/org | Correlation Id: 9de9b0d6-8120-40c2-8006-d965970fe849
app.js:73 9:54:55_871 AM => User line appearance ID: 566eb70fd728b6156dcddfd2+purecloud-france.orgspan.com
app.js:73 9:54:55_872 AM => Station login Information check station uri: {"id":"66191038-e457-44f5-a2cf-abe6a08aec6f","associatedUser":{"id":"d5427627-415c-4b47-89e9-fab8f79d10dc","selfUri":"/api/v2/users/d5427627-415c-4b47-89e9-fab8f79d10dc"},"associatedDate":"2018-03-22T14:16:33.030Z","providerInfo":{"name":"566eb70fd728b6156dcddfd2+purecloud-france.orgspan.com","edgeGroupId":"27cbbc2b-e558-49fe-bb98-369f08210dd7","locationId":"380584e8-d853-4404-bcca-3e32ee9227bb"}}
app.js:73 9:54:55_891 AM => Completed HTTP GET /platform/api/v2/users/d5427627-415c-4b47-89e9-fab8f79d10dc/routingStatus | Correlation Id: f40b1335-a24e-4472-a70c-0e95e366526c
framework.js:43 callback for useraction called
app.js:73 9:54:55_909 AM => Completed HTTP GET /platform/api/v2/users/d5427627-415c-4b47-89e9-fab8f79d10dc/outofoffice | Correlation Id: d62c9ab4-f380-4e17-b384-cc8af83c50a3
app.js:73 9:54:55_913 AM => A presence update was received, but there was no value. Checking for an associated primary presence
app.js:73 9:54:56_031 AM => Completed HTTP GET /platform/api/v2/users/d5427627-415c-4b47-89e9-fab8f79d10dc?expand=presence | Correlation Id: 64e0a236-f913-45ae-aa24-32d8299a2cbf
framework.js:43 callback for useraction called
app.js:73 9:54:56_239 AM => Completed HTTP GET /platform/api/v2/stations/66191038-e457-44f5-a2cf-abe6a08aec6f | Correlation Id: e4599e63-2bb2-4de2-84ca-0e25111b945a
framework.js:43 callback for useraction called
app.js:73 9:54:56_250 AM => WebRTC Persistent Connection enabled: false
app.js:73 9:54:56_257 AM => Initialize WebRTC popup window
app.js:73 9:54:56_266 AM => Stopping client heart beat
app.js:73 9:54:56_272 AM => Starting client heart beat
Am I missing something here? Am I supposed to load a library of some kind?
Junji_Sawada | 2018-05-03 16:24:33 UTC | #4
Pierrick,
Thank you for the additional information!
Your server is serving the framework.js correctly. However, you don't have to load the framework.js directly in the HTML page containing an iframe.
The framework.js is intended to be loaded directly in the client application, by the client application. When the "crm=framework-local-secure" parameter is present in the URL, it instructs the client application to load the framework.js from https://localhost/framework.js.
For your local development, all you have to do is to use the URL parameter in the iframe src attribute and run a local server that serves the framework.js.
Additionally, if you want to invoke window.PureCloud functions from the parent HTML page or send client events from the iframe to the parent HTML page, one possible solution would be to use window.postMessage (https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) to communicate between the client window and your application.
For example, if you want to do a click-to-dial, your framework.js could contain code like this:
window.Framework = { ... initialSetup: function () {
window.addEventListener("message", function(event) {
var allowedOrigin = "https://localhost"; if (event.origin !== allowedOrigin) { return; }
if (event.data && event.data.eventName === 'clickToDial' && event.data.number) { window.PureCloud.clickToDial({ number: event.data.number, autoPlace: true }); } }); }, ... };
The parent page would look like this:
<!DOCTYPE html> <html>
<head> <script> function initiateClickToDial(number) { var iframe = document.getElementById('clientIframe'); var message = { eventName: 'clickToDial', number: number }; var targetOrigin = "https://apps.mypurecloud.ie"; iframe.contentWindow.postMessage(message, targetOrigin); } </script> </head>
<body> <button onclick="initiateClickToDial('3172222222')">Call</button> <iframe id="clientIframe" src="https://apps.mypurecloud.ie/crm/index.html?crm=framework-local-secure" frameborder="0" width="600" height="600"></iframe> </body>
</html>
This setup should allow you to do a click-to-dial from the parent page. Please try it and let me know if that helps.
Thanks,
Junji
pierrick | 2018-05-04 10:35:09 UTC | #5
That worked. Thanks @Junji_Sawada!
I recommend to add this example to our documentation. This wasn't really obvious.
system | 2018-06-04 10:35:27 UTC | #6
This topic was automatically closed 31 days after the last reply. New replies are no longer allowed.
This post was migrated from the old Developer Forum.
ref: 2812