Amazon Connect Streams - a browser-based contact center integration API, typically with CRM systems.
Home Page: https://docs.aws.amazon.com/connect/latest/userguide/
License: Apache License 2.0
If I load the following page from an S3 bucket:
<html>
<script type="text/javascript" src="https://sdk.amazonaws.com/js/aws-sdk-2.204.0.min.js"></script>
</html>
<script type="text/javascript" >
AWS.config.update({
region: "us-east-1"
});
console.log(AWS);
var dynamodb = new AWS.DynamoDB();
console.log(dynamodb);
</script>
Everything works fine. However, if I include the streams API, as
<script src="amazon-connect-v1.2.0-2-g5fc44af.js"></script>
I receive the error
Uncaught TypeError: AWS.DynamoDB is not a constructor
If I load it locally, where Connect is not whitelisted, I receive no error. If I look at the AWS object in the console, with Streams loaded it starts with CognitoIdentity, while without Streams I have ACM, APIGateway, etc, as well as DynamoDB, that are all missing with Streams.
I've been developing all in one file, so hopefully breaking my DynamoDB work out into another file will solve this. Does anyone have any other ideas?
I created JS file using make command. Getting above error. Please advice. Thanks!
I am using the amazon-connect-streams JavaScript library to create a web portal for an agent, for a audio teleconference solution for the application, and am looking for assistance on how to terminate the connect session correctly to support a 'logout' function of my app. My issue is related to an existing Github issue [1].
I’ve been able to reproduce a bug consistently where I see a multiple ccp windows open error message in the console despite only one tab being open. I strongly suspect the issue I'm running into is related to my web application not terminating the CCP client correctly – since an initial load of CCP (using connect.core.initCCP) in the application in an incognito window never surfaces the error described.
I only see the issue if an Agent logs out and then logs back in the same tab, even if it is an incognito window / tab. When an Agent relogs back into the app, I re-initialize the CCP by using the connect.core.initCCP method and see the multiple ccp windows open error message when the Agent has accepted an inbound call. I am currently using the function “connect.core.terminate" in core.js of the amazon-connect-streams js library [2] on logout to terminate CCP.
Can you please provide some guidance about how to terminate the app correctly? I'd like to be able to detach the iframe and to clear any state in the web worker / local storage stored by the Connect SDK.
[1] #13
[2] https://github.com/aws/amazon-connect-streams/blob/5fc44af68939a2016cc1c6fd...
The documentation at https://github.com/aws/amazon-connect-streams/blob/master/Documentation.md#event-subscription and at https://github.com/aws/amazon-connect-streams/blob/master/Documentation.md#note states that the event bus and event bus helper methods (.on*) for subscribing to events return a subscription object. Which later on you can call .unsubscribe() on to unsubscribe from future notifications.
This does not match the behavior or source code. In the event.js file, if you look at the EventBus subscribe's method and track it through, you can see the problem:
`
/**
* Subscribe to the named event. Returns a new Subscription object
* which can be used to unsubscribe.
*/
EventBus.prototype.subscribe = function(eventName, f) {
connect.assertNotNull(eventName, 'eventName');
connect.assertNotNull(f, 'f');
connect.assertTrue(connect.isFunction(f), 'f must be a function');
return this.subMap.subscribe(eventName, f);
};
/**
* Add a subscription for the named event. Creates a new Subscription
* object and returns it. This object can be used to unsubscribe.
*/
SubscriptionMap.prototype.subscribe = function(eventName, f) {
var sub = new Subscription(this, eventName, f);
this.subIdMap[sub.id] = sub;
var subList = this.subEventNameMap[eventName] || [];
subList.push(sub);
this.subEventNameMap[eventName] = subList;
};`
So the SubscriptionMap subscribe function is not returning anything (undefined). Looks like it needs a return statement at the end to return the 'sub' object.
The .on* methods like agent.onRefresh use the event bus subscribe under the covers.
I would like this functionality to work to add better tear down code when someone logs out of the CCP and in general be able to better manage event subscriptions in my code.
Hello,
I was wondering if it's possible to log an agent in and out using the Streams API. Since I will be eventually hiding the Amazon CCP application I need to be able to do this functionality. Also, is SSO a possibility?
Thanks,
Sean
Hi,
Is it possible to get an incoming call while you have another connection on hold?
If so, what do we have to do so that the call is routed to the agent?
Thanks
hi
From the page different from ccp initializing page
How can I get agent information?
Hello, @supelee and community.
Is there an issue with the following API code for accepting an incoming voice contact? It appears to work some times and not others, and is proving to be a huge frustration. When the accept attempt does not work, the subscribed "success" function for acceptCall is still fired, yet the CCP can still stall out while displaying "Connecting...". It then rolls over into the missed call state without ever reaching "Connected".
// Agent initializes, and persists into activeAgent.
var activeAgent;
connect.agent(function(agent) {
console.log("Agent detected (init function fired)");
activeAgent = agent;
});
connect.contact(function (contact) {
contact.onConnecting(function (liveContact) {
console.log("Contact detected");
acceptCall();
});
});
function getVoiceContact() {
return activeAgent.getContacts()[0];
}
function acceptCall() {
getVoiceContact().accept({
success: function () {
console.log("API reports call accepted successfully (this message is part of the 'success' function firing).");
},
failure: function (data) {
console.log("Failed to accept the call. Troubleshooting data: " + data);
}
});
}
After creating the javascript file using make and creating a page to call connect.core.initCCP(), you can view the CCP embedded with Chrome and it functions properly. However IE has issues and one can not change the status from the page.
Is there any API method to update the contact attributes? If not, any instructions on how to update the contact attributes
Hasn't been answered on the AWS forum, hoping I can get an answer here. Setting up a test for Connect with a bare page. Single DIV, amazon-connect.js, and the connect.core.initCCP call. Regardless of whether I set ccpUrl to "https://domain.awsapps.com/connect/home", "https://domain.awsapps.com/connect/login", or "https://domain.awsapps.com/connect/ccp" as provided in the administration console, I receive:
Refused to display 'https://domain.awsapps.com/connect/home' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
amazon-connect.js:20361 GET https:///domain.awsapps.com/connect/home net::ERR_BLOCKED_BY_RESPONSE
Removing the path tries to redirect the entire page and fails with "Access Error
This application has not been enabled for your directory. Please contact your Administrator for more details." Trying "https://domain.awsapps.com/connect" populates the iframe with an AccessDenied XML response, despite whitelisting the domain hosting the test.
What am I missing?
For reference:
connect.core.initCCP(awsConnect, {
ccpUrl: "https://domain.awsapps.com/connect/ccp",
loginPopup: true,
softphone: {
disableRingtone: false
}
});
How do I transfer a call to another agent or queue using the Stream API?
Steps to reproduce:
1.) Initialize CCP app inside my application.
2.) Place a call to connect call queue.
3.) I can see the prompt to accept the incoming call, I press accept.
4.) Stays on "Connecting" for sometime and then eventually says "Missed Call".
Only way to accept the call that I found was to:
1.) Initialize CCP app inside my application.
2.) Open the CCP app inside Amazon Connect console.
3.) Place a call to connect call queue.
4.) I can see the prompt to accept the incoming call, I press accept.
5.) I'm able to connect to the call.
If the CCP app, that has the same ccpUrl that I initialize the ccp app with, is not open in another tab then I will not be able to accept the incoming call.
The embedded ccp iframe attempts to call Notification.requestPermission directly and as a result we receive the following warning in Chrome console:
Using the Notification API from an iframe is deprecated and will be removed in M61, around September 2017. You should consider requesting permission from the top-level frame or opening a new window instead. See [https://www.chromestatus.com/feature/6451284559265792] for more details.
connect.NotificationManager.requestPermission @ lily_ccp_Prod_899828371c0911102feac318ba0a72696081e3ce.gz.js:sourcemap:23126
Is there a way to force CCP to perform the notification permission request in a separate window, instead of from within the iframe?
I'm unable to get the ID of the agent that login. I noticed the ID is stored in cookies on the pop-up.
Can we add the AgentId on aget snapshot and contact snapshot.
Also if possible how to get the ID with current available functions
I noticed that there is no support for quick connects and call transfer options.
Does this sdk provide support for all the regions amazon connect instance or only us-east-1 ?
I am having the problem with eu-central-1 amazon connect instance. initccp() is not getting successful. Please let me know.
Are there any plans to turn this into an NPM package?
I miss in the API a callback which can filter Speaker and Mic devices which the CCP uses for:
It can be very simple call back which just returns CONSTRAINTS for navigator.mediaDevices.getUserMedia(). Something like:
function contactConstraints() {
return {
deviceId: {
exact: [inAudioDevSelected, outAudioDevSelected]
}
};
}
function ringConstraints() {
return {
deviceId: {
exact: outRingDevSelected
}
};
}
connect.core.initCCP(iframeContainer, {
ccpUrl: url,
loginPopup: false,
softphone: {
allowFramedSoftphone: true,
disableRingtone: false
},
contactAudioConstraints: contactConstraints,
ringTonesAudioConstraints: ringConstraints
});
Hi,
I am using CCP embedded on SalesForce UI.
For some reason I am unable to answer the call. The status is changing to "Connecting", but seems like call remains in the queue.
I created short video that demonstrates the issue:
https://drive.google.com/open?id=0B6xKEeS9aV0LdVNzX0xsZ3F1TmM
I don't have any problem to answer the call when I am using CCP on the Amazon Connect environment.
I have a new issue, similar to others, but with a new twist.
The following page works perfectly when accessed from my Linux box: simple_sample.html.zip. I had to whitelist my domain to make it work, of course, and it operates as expected, opening the login in a new window and reverting back to the CCP, and loading the CCP embedded in my page.
But on Windows, while it will open the login the first time I use it (or after I clear my cache) and revert back to the CCP in that new window, the CCP never loads embedded in my page. I get the common "Refused to display '' in a frame because it set 'X-Frame-Options' to 'sameorigin'" error that others have seen due to either a whitelisting problem or due to the wrong CCP URL (/login instead of /ccp#).
I do receive one warning in the console on Linux, "[Deprecation] Permission for the Notification API may no longer be requested from a cross-origin iframe. You should consider requesting permission from a top-level frame or opening a new window instead. See https://www.chromestatus.com/feature/6451284559265792 for more details." This may not be related, but so far it's the only other lead that seems like it could be relevant.
Hi, Any way to get the did number dialed off customer in incoming call?
When a phone call is received subscription events for contact.onIncoming (also onMissed) are not getting triggered. As a result caller number cannot be accessed while the phone is ringing.
ContactData is available once the call completes on onEnded event.
According to https://www.chromestatus.com/feature/6451284559265792, the following code in streams library is suspect. Please advise.
`connect.NotificationManager.prototype.requestPermission = function() {
var self = this;
if (!("Notification" in global)) {
connect.getLog().warn("This browser doesn't support notifications.");
this.permission = NotificationPermission.DENIED;
} else if (global.Notification.permission === NotificationPermission.DENIED) {
connect.getLog().warn("The user has requested to not receive notifications.");
this.permission = NotificationPermission.DENIED;
} else if (this.permission !== NotificationPermission.GRANTED) {
global.Notification.requestPermission(function(permission) {
self.permission = permission;
if (permission === NotificationPermission.GRANTED) {
self._showQueued();
} else {
self.queue = [];
}
});
}
};`
Hi please check, im getting error when trying to get incoming call logs. Can i know the issue type
The Amazon Connect Login page that gets rendered in an iframe is larger than the maximum amount of width the CCP app will expand to, which leads to a css width discrepancy. Could you all create a version of the login page that is more compatible with the embedded CCP app in a iframe approach? Thanks, Sean.
Is there any way to get the contact number from an inbound call using the Contact API provided in the connect streams API doc? I am not sure if we can get the contact number from the given API event functions.
dialNumber.zip
Hi,
I've created a button to call a particular number.
This number can be directly called or it can also be called as a third party.
The first time I initialises the app, if I use this button it is working fine.
If I use this button to add a third party is working also fine, but if next I try to use this button to call directly without having another active connection, it is no longer working.
I get his error:
amazon-connect-v1.0.2.js:20450 Uncaught connect.StateError {}
I've checked that it is because for some reasons the function initialConnection.isConnected(); is not available, Although I can access the initialConnection object, I can't get any information from it.
I've attached my code
Thanks
Hi,
I am running the following scenario:
[2017-07-27T20:49:11.939Z] [ERROR]: 'destroyContact' API request failed: Error
ERROR @ lily_ccp_Prod_8998283….gz.js:22343
Logger.addLogEntry @ lily_ccp_Prod_8998283….gz.js:22570
(anonymous) @ lily_ccp_Prod_8998283….gz.js:25513
(anonymous) @ lily_ccp_Prod_8998283….gz.js:23446
EventBus.trigger @ lily_ccp_Prod_8998283….gz.js:23444
Conduit._dispatchEvent @ lily_ccp_Prod_8998283….gz.js:23759
(anonymous) @ lily_ccp_Prod_8998283….gz.js:22770
16:49:12.733
Any ideas?
Thank you.
Yan
Hi,
I'm trying to get contact information such as ID or Phone Number from lambda. I've placed one lambda in my contactFlow after the start block. I have some issues now:
My lambda doesn't invoke when I receive the call!
Do I need to enable Kinesis in my Amazon connect instance to use stream Api?
How do I use stream api from lambda?I can't find how to use connect-streams's functions inside my code! for example when you want to use "fs", you use the module by using "const fs = require'fs' ".how about for connect-stream?!
please help!
from lily prod js file
getAgent().getEndpoints(skillIds, {
success: function(data) {
var addresses = data.addresses;
if (isOutbound) {
addresses = addresses.filter(function(addr) {
return addr.type === lily.AddressType.PHONE_NUMBER;
});
}
if (callbacks && callbacks.success) {
callbacks.success(addresses);
}
},
failure: function(err, data) {
if (callbacks && callbacks.failure) {
callbacks.failure(err, data);
}
}
});However, Agent.getEndpoints is not on the docs
Is there a way to perform an action after successful agent login/logout?
How to invoke connection API ?
I tried connect.connection.getContactId() but the method seems unavailable. It wasn't clear from the docs how to use these methods. connect.contact and connect.agent seems to be working great. Is there anything I'm doing wrong ?
Any thoughts are much welcome. Thanks.
it is only generating amazon-connect-${version}.js
Hello, it would be helpful for me to have the new connectionId returned in the outbound call success callback so that I can take appropriate action. Right now, I'm only handling outbound call success when a new connection arrives and is in the "connected" state.
global.connect.agent((agent: any) => {
const endpoint = global.connect.Endpoint.byPhoneNumber(phoneNumber);
console.log('Making outbound call to: ' + phoneNumber);
agent.connect(endpoint, {
success: () => { // connectionId available here as an argument
console.log('Make call success!');
},
failure: () => {
console.log('Make call fail!');
}
});
});
The supplied makefile does not work on windows with visual studio. This is what happens if I run it in a Visual Studio command shell using "nmake":
Microsoft (R) Program Maintenance Utility Version 14.13.26131.1
Copyright (C) Microsoft Corporation. All rights reserved.
makefile(6) : fatal error U1000: syntax error : ')' missing in macro invocation
Stop.
Hi,
Is that possible to find a contact from agent queues/connections with a phone number?
Hi,
Is there a way to start/stop the recording of amazon connect agent conversation with customer from CCP embedded html?
Thanks
The methods contact.getState() and contact.getStateDuration() are not available Instead contact.getStatus() and contact.getStatusDuration() are available. I just wanted to bring this to your attention.
EDIT: Also, connection.getState() and connection.getStateDuration() are not available too, Instead connection.getStatus() and connection.getStatusDuration() are available.
But In Agent API agent.getState(), agent.getStatus(), agent.getStateDuration, agent.getStatusDuration all this FOUR methods are available.
If Possible please update the documentation properly.
Thanks.
Devan
Hi,
I have created a html page which is embedded with Amazon Connect Contact Control Panel. But i am unable to receive the incoming calls
Please help me out
REFUSED TO DISPLAY ..... IN A FRAME BECAUSE IT SET X-FRAME-OPTIONS TO SAMEORIGIN
ACK_TIMEOUT OCCURRED, ATTEMPTING TO POP THE LOGIN PAGE IF NOT ALREADY OPEN
OUR CONFIGURATION 👍
<title>Amazone Connect</title> <script type="text/javascript" src="{{ asset('js/amazon-connect-v1.2.0.js') }}"></script> <script type="text/javascript"> connect.core.initCCP(containerDiv, { ccpUrl: 'https://INSTANCENAME.awsapps.com/connect/ccp#', loginPopup: true, softphone: { allowFramedSoftphone: true } }); </script>I'm not including any of my code, because this is a problem even on the demo site (connectdemo.com).
When I load a page embedding the CCP, it doesn't work on some of my computers. Sometimes it will cause the login popup, but even then not load the softphone, and sometimes it won't even load the popup. This comes along with the usual "Refused to display.../ccp#/ in a frame because it set 'X-Frame-Options' to 'sameorigin'. That error comes from the actual page (callAttributes.html in this case, on the demo site).
But I've noticed something new here: I'm also receiving an error from connectCCP.js (or amazon-connect....js, if you're using your own build). It comes first from line 20398, and then from 20472 after the login is popped.
GET https://DOMAIN.awsapps.com/connect/ccp net::ERR_BLOCKED_BY_RESPONSE
Note that there is no '#/' at the end of that. Whatever the '#/' is for, is it something that some of my computers are able to overlook, and others are not?
Here's the code from Streams that triggers the error before the login popup:
// Create the CCP iframe and append it to the container div.
var iframe = document.createElement('iframe');
iframe.src = params.ccpUrl;
iframe.style = "width: 100%; height: 100%";
iframe.allow = "microphone";
containerDiv.appendChild(iframe); // This is line 20398
And here is after the login:
if (connect.core.iframeRefreshInterval == null) {
connect.core.iframeRefreshInterval = window.setInterval(function() {
iframe.src = params.ccpUrl; // This is line 20472
}, CCP_IFRAME_REFRESH_INTERVAL);
conduit.onUpstream(connect.EventType.ACKNOWLEDGE, function() {
this.unsubscribe();
global.clearInterval(connect.core.iframeRefreshInterval);
connect.core.iframeRefreshInterval = null;
connect.core.getPopupManager().clear(connect.MasterTopics.LOGIN_POPUP);
});
}
And here is where that params.ccpUrl is set:
var params = {};
if (typeof(paramsIn) === 'string') {
params.ccpUrl = paramsIn;
} else {
params = paramsIn;
}
I'm not sure where paramsIn is being set, but that might be the issue.
Hello there!
I've embedded ACS into React and I have question how can I insert this url (https://{alias}.awsapps.com/connect/ccp) as an Iframe in the same window?
Because when I do it, I have tons of errors in the console.
Hi,
How can I get the data of other agents connected to the CCP?
I would like to transfer call between agents, but I can't find how to see if there are other agents connected or not.
I tried to use agent.getContacts(), but it returns an empty array.
Thanks
One of the issues people have had with the login process is that the login page remains open after logging in, and converts to a CCP that needs to be closed manually so the agent can use the custom CCP.
Would it be possible to get the handle of the login popup to use window.close() to close it?
First, we load the CCP or login with connect.core.initCCP(). I can find that in the Streams API source at (in my build) line 20373, with the login popup at line 20465:
connect.core.getPopupManager().open(loginUrl, connect.MasterTopics.LOGIN_POPUP);
Then starting on line 17883, I find this:
connect.PopupManager.prototype.open = function(url, name) {
var then = this._getLastOpenedTimestamp(name);
var now = new Date().getTime();
if (now - then > ONE_DAY_MILLIS) {
var win = window.open('', name);
if (win.location !== url) {
window.open(url, name);
}
this._setLastOpenedTimestamp(name, now);
}
}
So can we find someway to get a hold of that "win" var, to then do win.close() after the agent is logged in? We would probably not want to return that from connect.core.initCCP(), but can we do something like this?
var loginPopup = connect.core.getLoginPopup()
loginPopup.close()
This was a late-night thought, and I haven't tried anything from this yet. Any input is appreciated.
Same Result using destroy() with the following connections
getThirdPartyConnections() // / Will trying to destroy() the third party connection [0]
getSingleActiveThirdPartyConnection()
getConnections() // Will trying to destroy() the third party connection [2]
If I'm on a call and I refresh the browser and initialize the CCP app again, the call is still "connected" but there is no audio. Is it possible to reconnect the audio stream?
I picked this change, still when i am opening embedded softphone, i am getting following error on chome 64 and higher version:
[FATAL] CSM initialization failed! Please make sure the sharedWorkerUrl is reachable.
While digging further, i figured out that its coming from https://d1f0uslncy85vb.cloudfront.net/js/lily_ccp_Prod_5e1b1a77acd07587cf93bca7cc55abfc3a831504.gz.js, when shared worker is not able to receive messages.
Steps to reproduce:
Did anyone else experienced the similar behavior? any resolution around this?
I have supported Single Logon by SAML with AWS Connect,But when I want to Single Logout,I found no way to support this feature, if the streams javascript API support logout current login agent ,that would be great job! thanks!
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.