amazon connect streams
2.16.0
L'API Amazon Connect Streams (Streams) vous donne le pouvoir d'intégrer vos applications Web existantes à Amazon Connect. Streams vous permet d'intégrer le panneau de configuration des contacts (CCP) et l'interface utilisateur de l'application Profils clients dans votre page. Il vous permet également de gérer les événements d'état des agents et des contacts directement via une interface événementielle orientée objet. Vous pouvez utiliser l'interface intégrée ou créer la vôtre à partir de zéro : Streams vous donne le choix.
Cette bibliothèque doit être utilisée conjointement avec amazon-connect-chatjs ou amazon-connect-taskjs afin d'utiliser la fonctionnalité Chat ou Tâche d'Amazon Connect.
Pour en savoir plus sur Amazon Connect et ses fonctionnalités, veuillez consulter le Guide de l'utilisateur Amazon Connect.
amazon-connect-streams est disponible sur npmjs.com. Si vous souhaitez le télécharger ici, vous pouvez utiliser l'un des fichiers comme release/connect-streams* .
Exécutez npm run release pour générer de nouveaux fichiers de version. Des instructions complètes pour construire localement avec npm peuvent être trouvées ci-dessous.
Dans la version 1.x, nous prenons également en charge make pour les versions héritées. Cette option a été supprimée dans la version 2.x.
voiceConnection.muteParticipant()voiceConnection.unmuteParticipant()agent.mute()agent.unmute()voiceConnection.muteParticipant()voiceConnection.unmuteParticipant()agent.mute()agent.unmute()isSilentMonitor , isBarge , isSilentMonitorEnabled , isBargeEnabled , isUnderSupervision , updateMonitorParticipantState , getMonitorCapabilities , getMonitorStatus , isForcedMute .initCCP n'ajouteront plus plusieurs CCP intégrés à la fenêtre et seul le premier appel à initCCP réussira. Veuillez noter que le cas d'utilisation de l'initialisation de plusieurs CCP avec initCCP n'a jamais été pris en charge par Streams, et cette modification a été ajoutée pour éviter un comportement imprévisible résultant de tels cas.agent.onContactPending a été supprimé. Veuillez utiliser contact.onPending à la place. connect.onError se déclenche maintenant. Auparavant, cette API ne fonctionnait pas du tout. Veuillez noter que si vous disposez d'une logique d'application au sein de cette fonction, son comportement a changé. Voir son entrée dans documentation.md pour plus de détails.agent.setState() pour changer de statut d'agent, vous devrez mettre à jour votre code pour utiliser cette fonctionnalité :enqueueNextState: true pour déclencher le comportement Next Status.agent.setState() , veuillez également vous assurer que votre code utilise contact.clear() et non contact.complete() lors de la suppression du travail après contact d'un contact.FailedConnectAgent , FailedConnectCustomer et AfterCallWork .FailedConnectAgent : auparavant, nous demandions à l'agent de cliquer sur le bouton « Effacer le contact » pour effacer cet état. Lorsque l'agent a cliqué sur le bouton « Effacer le contact », le comportement précédent a ramené l'agent à l'état Available sans échec. Désormais, l’état de FailedConnectAgent sera « effacé automatiquement », un peu comme FailedConnectCustomer l’a toujours été.FailedConnectAgent et FailedConnectCustomer -- Nous utilisons désormais l'API contact.clear() pour effacer automatiquement ces états. En conséquence, l'agent sera renvoyé à son état d'agent visible précédent (par exemple Available ). Auparavant, l'agent était toujours défini sur Available en raison de ce comportement de « compensation automatique ». Notez que même les CCP personnalisés se comporteront différemment avec cette mise à jour pour FailedConnectAgent et FailedConnectCustomer .AfterCallWork -- Dans le cadre du nouveau comportement contact.clear() , cliquer sur "Effacer le contact" dans AfterCallWork ramènera l'agent à son état d'agent visible précédent (par exemple Available , etc.). Notez que les CCP personnalisés qui implémentent leur propre comportement de travail après appel ne seront pas affectés par cette modification.contact.complete() sur un chemin de dépréciation. Par conséquent, vous devriez commencer à utiliser contact.clear() à la place. Si vous souhaitez émuler le comportement de travail après appel de CCP dans le CCP de votre client, assurez-vous d'utiliser contact.clear() lors de la suppression des contacts vocaux. Si vous migrez vers le nouveau CCP, nous vous encourageons à mettre à niveau vers la dernière version de ce référentiel. Vous devez également mettre à niveau vers la dernière version de RTC-JS, si vous l'utilisez. Pour un guide de migration complet vers le nouveau CCP et pour bien comprendre les différences lors de l'utilisation de Streams avec le nouveau CCP, veuillez consulter cet article : https://docs.aws.amazon.com/connect/latest/adminguide/upgrade-to -dernier-ccp.html
La première étape pour utiliser Streams consiste à autoriser les pages que vous souhaitez intégrer. Pour la sécurité de nos clients, nous exigeons que tous les domaines qui intègrent le CCP pour une instance particulière soient explicitement autorisés. Chaque entrée de domaine identifie le schéma de protocole, l'hôte et le port. Toutes les pages hébergées derrière le même schéma de protocole, hôte et port seront autorisées à intégrer les composants CCP requis pour utiliser la bibliothèque Streams.
Pour autoriser vos pages :
npm install amazon-connect-streams
import "amazon-connect-streams"; Cela rendra la variable connect disponible dans le contexte actuel.
amazon-connect-streams est compatible avec TypeScript. Vous devrez utiliser la version 3.0.1 ou supérieure :
import "amazon-connect-streams" ;
connect . core . initCCP ( { /* ... */ } ) ; La prochaine étape pour intégrer Connect dans votre application consiste à télécharger la bibliothèque Streams depuis GitHub. Vous pouvez le faire en clonant notre référentiel public ici :
$ git clone https://github.com/aws/amazon-connect-streams
Une fois que vous avez téléchargé les flux, accédez au répertoire et créez-le :
$ cd amazon-connect-streams
$ make
Cela générera un fichier appelé connect-streams-${VERSION}.js , il s'agit de l'API Connect Streams complète que vous souhaiterez inclure dans votre page. Vous pouvez servir connect-streams-${VERSION}.js avec votre application Web.
Installez la dernière version LTS de NodeJS
$ git clone https://github.com/aws/amazon-connect-streams
$ cd amazon-connect-streams
$ npm install
$ npm run release
Rechercher des artefacts de construction dans le répertoire de version - Cela générera un fichier appelé connect-streams.js et la version minifiée du même connect-streams-min.js - il s'agit de l'API Connect Streams complète que vous souhaiterez inclure dans votre page.
Pour exécuter des tests unitaires :
$ npm run test-mocha
Remarque : ces tests s'exécutent sur les fichiers de version générés ci-dessus
Vous devrez également avoir installé gulp . Vous pouvez installer gulp globalement.
$ npm install -g gulp
$ git clone https://github.com/aws/amazon-connect-streams
$ cd amazon-connect-streams
$ npm install
$ npm run release
Rechercher des artefacts de construction dans le répertoire de version - Cela générera un fichier appelé connect-streams.js et la version minifiée du même connect-streams-min.js - il s'agit de l'API Connect Streams complète que vous souhaiterez inclure dans votre page.
Pour exécuter des tests unitaires :
$ npm run gulp-test
Remarque : ces tests s'exécutent sur les fichiers de version générés ci-dessus
Streams dispose d'une version « intégrée » du AWS-SDK dans le fichier ./src/aws-client.js . Assurez-vous d'importer Streams avant le SDK AWS afin que l'objet AWS lié à la Window soit l'objet de votre SDK inclus manuellement, et non de Streams.
L'initialisation de l'API Streams est la première étape pour vérifier que tout est correctement configuré et que vous pourrez écouter les événements.
connect.core.initCCP() <!DOCTYPE html >
< html >
< head >
< meta charset =" UTF-8 " >
< script type =" text/javascript " src =" connect-streams-min.js " > </ script >
</ head >
<!-- Add the call to init() as an onload so it will only run once the page is loaded -->
< body onload =" init() " >
< div id =" container-div " style =" width: 400px; height: 800px; " > </ div >
< script type =" text/javascript " >
var containerDiv = document . getElementById ( "container-div" ) ;
var instanceURL = "https://my-instance-domain.my.connect.aws/ccp-v2/" ;
// initialize the streams api
function init ( ) {
// initialize the ccp
connect . core . initCCP ( containerDiv , {
ccpUrl : instanceURL , // REQUIRED
loginPopup : true , // optional, defaults to `true`
loginPopupAutoClose : true , // optional, defaults to `false`
loginOptions : { // optional, if provided opens login in new window
autoClose : true , // optional, defaults to `false`
height : 600 , // optional, defaults to 578
width : 400 , // optional, defaults to 433
top : 0 , // optional, defaults to 0
left : 0 // optional, defaults to 0
} ,
region : "eu-central-1" , // REQUIRED for `CHAT`, optional otherwise
softphone : { // optional, defaults below apply if not provided
allowFramedSoftphone : true , // optional, defaults to false
disableRingtone : false , // optional, defaults to false
ringtoneUrl : "[your-ringtone-filepath].mp3" , // optional, defaults to CCP’s default ringtone if a falsy value is set
allowFramedVideoCall : true , // optional, default to false
allowEarlyGum : true //optional, default to true
} ,
task : {
disableRingtone : false , // optional, defaults to false
ringtoneUrl : "[your-ringtone-filepath].mp3" // optional, defaults to CCP's default ringtone if a falsy value is set
} ,
pageOptions : { //optional
enableAudioDeviceSettings : false , //optional, defaults to 'false'
enableVideoDeviceSettings : false , //optional, defaults to 'false'
enablePhoneTypeSettings : true //optional, defaults to 'true'
} ,
shouldAddNamespaceToLogs : false , //optional, defaults to 'false'
ccpAckTimeout : 5000 , //optional, defaults to 3000 (ms)
ccpSynTimeout : 3000 , //optional, defaults to 1000 (ms)
ccpLoadTimeout : 10000 //optional, defaults to 5000 (ms)
} ) ;
}
</ script >
</ body >
</ html > S'intègre à Connect en chargeant le CCP prédéfini situé dans ccpUrl dans une iframe et en le plaçant dans le containerDiv fourni. Les demandes d'API sont acheminées via ce CCP et les mises à jour des agents et des contacts sont publiées via celui-ci et mises à la disposition de votre code client JS.
ccpUrl : L'URL du CCP. Il s'agit de la page vers laquelle vous accédez normalement pour utiliser le CCP dans une page autonome, elle est différente pour chaque instance.region : région de l'instance Amazon Connect. ex : us-west-2 . requis uniquement pour le canal de discussion.loginPopup : facultatif, la valeur par défaut est true . Définir sur false pour désactiver la fenêtre contextuelle de connexionloginOptions : Facultatif, valide uniquement lorsque loginPopup est défini sur true . Fournissez un objet avec les propriétés suivantes pour ouvrir la fenêtre contextuelle de connexion dans une nouvelle fenêtre au lieu d'un nouvel onglet.autoClose : facultatif, la valeur par défaut est false . Définissez sur true pour fermer automatiquement la fenêtre contextuelle de connexion une fois que l'utilisateur s'est connecté.height : Cela vous permet de définir la hauteur de la fenêtre pop-up de connexion.width : Cela vous permet de définir la largeur de la fenêtre pop-up de connexion.top : Cela vous permet de définir le haut de la fenêtre pop-up de connexion.left : Ceci vous permet de définir la gauche de la fenêtre pop-up de connexion.loginPopupAutoClose : facultatif, la valeur par défaut est false . Définissez sur true en conjonction avec le paramètre loginPopup pour fermer automatiquement la fenêtre contextuelle de connexion une fois l'étape d'authentification terminée. Si la page de connexion s'ouvre dans un nouvel onglet, ce paramètre fermera également automatiquement cet onglet. Cela peut également être défini dans loginOptions si ces options sont utilisées.loginUrl : facultatif. Permet d'utiliser une URL personnalisée pour lancer le ccp, comme dans le cas de l'authentification SAML.softphone : Cet objet est facultatif et vous permet de spécifier certains paramètres entourant la fonctionnalité softphone de Connect.allowFramedSoftphone : Normalement, les composants du microphone et du haut-parleur du softphone ne sont pas autorisés à être hébergés dans une iframe. En effet, le softphone doit être hébergé dans une seule fenêtre ou un seul onglet. La fenêtre hébergeant la session softphone ne doit pas être fermée au cours d'un appel softphone sinon l'appel sera déconnecté. Si allowFramedSoftphone est true , les composants du softphone seront autorisés à être hébergés dans cette fenêtre ou cet onglet.disableRingtone : Cette option vous permet de désactiver complètement la sonnerie intégrée qui est jouée lorsqu'un appel arrive.ringtoneUrl : Si la sonnerie n'est pas désactivée, cela permet de remplacer la sonnerie par n'importe quel fichier audio pris en charge par le navigateur et accessible par l'utilisateur. Pour utiliser la sonnerie par défaut, commentez cette ligne.pageOptions : Cet objet est facultatif et vous permet de configurer quelles sections de configuration sont affichées dans l'onglet Paramètres.enableAudioDeviceSettings : Si true , l'onglet Paramètres affichera une section permettant de configurer les périphériques d'entrée et de sortie audio pour la machine locale de l'agent. Si false ou si pageOptions n’est pas fourni, l’agent ne pourra pas modifier les paramètres du périphérique audio à partir de l’onglet Paramètres. ne sera pas affiché.enableVideoDeviceSettings : Si true , l'onglet Paramètres affichera une section permettant de configurer les périphériques d'entrée vidéo pour la machine locale de l'agent. Si false ou si pageOptions n’est pas fourni, l’agent ne pourra pas modifier les paramètres du périphérique vidéo à partir de l’onglet Paramètres. ne sera pas affiché.enablePhoneTypeSettings : Si true , ou si pageOptions n'est pas fourni, l'onglet Paramètres affichera une section permettant de configurer le type de téléphone et le numéro de téléphone de bureau de l'agent. Si false , l'agent ne pourra pas modifier le type de téléphone ou le numéro de téléphone de bureau à partir de l'onglet Paramètres.shouldAddNamespaceToLogs : ajoute [CCP] à tous les journaux enregistrés par le CCP. Remarque importante : quelques journaux sont créés par le CCP avant que l'espace de noms ne soit ajouté.ccpAckTimeout : un délai d'attente en ms qui indique combien de temps les flux attendront que le CCP iframe réponde à ses émissions d'événement SYNCHRONIZE . Cela se produit continuellement à partir du premier appel initCCP . Ils ne devraient apparaître qu'en cas de problème nécessitant une actualisation ou une reconnexion.ccpSynTimeout : un délai d'attente en ms qui indique combien de temps les flux attendront pour envoyer un nouvel événement SYNCHRONIZE au CCP iframé. Cela se produit continuellement à partir du premier appel initCCP .ccpLoadTimeout : un délai d'attente en ms qui indique combien de temps les flux attendront l'événement ACKNOWLEDGE initial du travailleur partagé pendant que le CCP est toujours debout. containerDiv dans lequel vous placez l'iframe, ou en appliquant une règle CSS comme celle-ci : # container-div iframe {
display : none;
}width: 100%; height: 100% . Pour personnaliser la taille du CCP, définissez la largeur et la hauteur de l'élément conteneur.Consultez la documentation complète ici pour en savoir plus sur l’abonnement aux événements et la mise en œuvre de changements d’état par programmation.
