amazon connect streams
2.16.0
La API de Amazon Connect Streams (Streams) le brinda la posibilidad de integrar sus aplicaciones web existentes con Amazon Connect. Streams le permite insertar el Panel de control de contactos (CCP) y la interfaz de usuario de la aplicación Perfiles de clientes en su página. También le permite manejar eventos de estado de agentes y contactos directamente a través de una interfaz orientada a objetos y controlada por eventos. Puedes usar la interfaz integrada o crear la tuya propia desde cero: Streams te da la opción.
Esta biblioteca debe usarse junto con amazon-connect-chatjs o amazon-connect-taskjs para poder utilizar la funcionalidad de chat o tarea de Amazon Connect.
Para obtener más información sobre Amazon Connect y sus capacidades, consulte la Guía del usuario de Amazon Connect.
amazon-connect-streams está disponible en npmjs.com. Si desea descargarlo aquí, puede utilizar cualquiera de los archivos como release/connect-streams* .
Ejecute npm run release para generar nuevos archivos de versión. Las instrucciones completas para construir localmente con npm se pueden encontrar a continuación.
En la versión 1.x, también admitimos make de versiones heredadas. Esta opción se eliminó en la versión 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 ya no agregarán varios CCP integrados a la ventana y solo la primera llamada a initCCP tendrá éxito. Tenga en cuenta que Streams nunca ha admitido el caso de uso de inicialización de múltiples CCP con initCCP , y este cambio se ha agregado para evitar comportamientos impredecibles que surjan de tales casos.agent.onContactPending . Utilice contact.onPending en su lugar. connect.onError ahora se activa. Anteriormente, esta API no funcionaba en absoluto. Tenga en cuenta que, si tiene lógica de aplicación dentro de esta función, su comportamiento ha cambiado. Consulte su entrada en documentacion.md para obtener más detalles.agent.setState() para cambiar el estado del agente, deberá actualizar su código para usar esta función:enqueueNextState: true para activar el comportamiento de Estado siguiente.agent.setState() , asegúrese también de que su código utilice contact.clear() y no contact.complete() al borrar el trabajo posterior al contacto de un contacto.FailedConnectAgent , FailedConnectCustomer y AfterCallWork .FailedConnectAgent : anteriormente, requeríamos que el agente hiciera clic en el botón "Borrar contacto" para borrar este estado. Cuando el agente hizo clic en el botón "Borrar contacto", el comportamiento anterior devolvió al agente al estado Available sin falta. Ahora el estado FailedConnectAgent se "borrará automáticamente", como siempre lo ha sido FailedConnectCustomer .FailedConnectAgent y FailedConnectCustomer : ahora estamos usando la API contact.clear() para borrar automáticamente estos estados. Como resultado, el agente volverá a su estado de agente visible anterior (por ejemplo, Available ). Anteriormente, el agente siempre se había configurado como Available como resultado de este comportamiento de "limpieza automática". Tenga en cuenta que incluso los CCP personalizados se comportarán de manera diferente con esta actualización para FailedConnectAgent y FailedConnectCustomer .AfterCallWork : como parte del nuevo comportamiento contact.clear() , hacer clic en "Borrar contacto" mientras está en AfterCallWork devolverá al agente a su estado visible anterior (por ejemplo, Available , etc.). Tenga en cuenta que los CCP personalizados que implementan su propio comportamiento de trabajo posterior a la llamada no se verán afectados por este cambio.contact.complete() en una ruta de desuso. Por lo tanto, deberías empezar a utilizar contact.clear() en su lugar. Si desea emular el comportamiento de trabajo posterior a la llamada de CCP en el CCP de su cliente, asegúrese de utilizar contact.clear() al borrar los contactos de voz. Si está migrando al nuevo CCP, le recomendamos que actualice a la última versión de este repositorio. También debe actualizar a la última versión de RTC-JS, si la está utilizando. Para obtener una guía de migración completa al nuevo CCP y comprender completamente las diferencias al usar Streams con el nuevo CCP, consulte esta publicación: https://docs.aws.amazon.com/connect/latest/adminguide/upgrade-to -último-ccp.html
El primer paso para utilizar Streams es incluir en la lista permitida las páginas que desea insertar. Para la seguridad de nuestros clientes, requerimos que todos los dominios que incorporan el CCP para una instancia en particular estén explícitamente incluidos en la lista de permitidos. Cada entrada de dominio identifica el esquema de protocolo, el host y el puerto. Cualquier página alojada detrás del mismo esquema de protocolo, host y puerto podrá incorporar los componentes CCP necesarios para utilizar la biblioteca Streams.
Para incluir sus páginas en la lista blanca:
npm install amazon-connect-streams
import "amazon-connect-streams"; Esto hará que la variable connect esté disponible en el contexto actual.
amazon-connect-streams es compatible con TypeScript. Necesitará utilizar la versión 3.0.1 o superior:
import "amazon-connect-streams" ;
connect . core . initCCP ( { /* ... */ } ) ; El siguiente paso para integrar Connect en su aplicación es descargar la biblioteca Streams desde GitHub. Puedes hacerlo clonando nuestro repositorio público aquí:
$ git clone https://github.com/aws/amazon-connect-streams
Una vez que descargues las transmisiones, cambia al directorio y compílalo:
$ cd amazon-connect-streams
$ make
Esto generará un archivo llamado connect-streams-${VERSION}.js , esta es la API completa de Connect Streams que querrás incluir en tu página. Puede servir connect-streams-${VERSION}.js con su aplicación web.
Instale la última versión LTS de NodeJS
$ git clone https://github.com/aws/amazon-connect-streams
$ cd amazon-connect-streams
$ npm install
$ npm run release
Busque artefactos de compilación en el directorio de lanzamiento : esto generará un archivo llamado connect-streams.js y la versión minimizada del mismo connect-streams-min.js ; esta es la API completa de Connect Streams que querrá incluir en su página.
Para ejecutar pruebas unitarias:
$ npm run test-mocha
Nota: estas pruebas se ejecutan en los archivos de versión generados anteriormente
También necesitarás tener instalado gulp . Puedes instalar gulp globalmente.
$ npm install -g gulp
$ git clone https://github.com/aws/amazon-connect-streams
$ cd amazon-connect-streams
$ npm install
$ npm run release
Busque artefactos de compilación en el directorio de lanzamiento : esto generará un archivo llamado connect-streams.js y la versión minimizada del mismo connect-streams-min.js ; esta es la API completa de Connect Streams que querrá incluir en su página.
Para ejecutar pruebas unitarias:
$ npm run gulp-test
Nota: estas pruebas se ejecutan en los archivos de versión generados anteriormente
Streams tiene una versión "integrada" de AWS-SDK en el archivo ./src/aws-client.js . Asegúrese de importar Streams antes del SDK de AWS para que el objeto AWS vinculado a la Window sea el objeto del SDK incluido manualmente y no de Streams.
Inicializar la API de Streams es el primer paso para verificar que tiene todo configurado correctamente y que podrá escuchar los eventos.
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 > Se integra con Connect cargando el CCP prediseñado ubicado en ccpUrl en un iframe y colocándolo en el containerDiv proporcionado. Las solicitudes de API se canalizan a través de este CCP y las actualizaciones de agentes y contactos se publican a través de él y se ponen a disposición de su código de cliente JS.
ccpUrl : la URL del PCC. Esta es la página a la que normalmente navegaría para utilizar el CCP en una página independiente; es diferente para cada instancia.region : región de la instancia de conexión de Amazon. Ej: us-west-2 . Sólo es necesario para el canal de chat.loginPopup : opcional, el valor predeterminado es true . Establecer en false para deshabilitar la ventana emergente de inicio de sesiónloginOptions : opcional, solo válido cuando loginPopup está configurado en true . Proporcione un objeto con las siguientes propiedades para abrir loginpopup en una nueva ventana en lugar de una nueva pestaña.autoClose : opcional, el valor predeterminado es false . Configúrelo en true para cerrar automáticamente la ventana emergente de inicio de sesión después de que el usuario inicie sesión.height : Esto le permite definir la altura de la ventana emergente de inicio de sesión.width : Esto le permite definir el ancho de la ventana emergente de inicio de sesión.top : Esto le permite definir la parte superior de la ventana emergente de inicio de sesión.left : Esto le permite definir la izquierda de la ventana emergente de inicio de sesión.loginPopupAutoClose : opcional, el valor predeterminado es false . Configúrelo en true junto con el parámetro loginPopup para cerrar automáticamente la ventana emergente de inicio de sesión una vez que se haya completado el paso de autenticación. Si la página de inicio de sesión se abrió en una nueva pestaña, este parámetro también cerrará automáticamente esa pestaña. Esto también se puede configurar en loginOptions si se utilizan esas opciones.loginUrl : opcional. Permite utilizar una URL personalizada para iniciar el ccp, como en el caso de la autenticación SAML.softphone : este objeto es opcional y le permite especificar algunas configuraciones relacionadas con la función softphone de Connect.allowFramedSoftphone : Normalmente, los componentes del micrófono y del altavoz del softphone no pueden alojarse en un iframe. Esto se debe a que el softphone debe estar alojado en una única ventana o pestaña. La ventana que aloja la sesión de softphone no debe cerrarse durante el transcurso de una llamada de softphone o la llamada se desconectará. Si allowFramedSoftphone es true , se permitirá que los componentes del softphone se alojen en esta ventana o pestaña.disableRingtone : esta opción le permite desactivar completamente el audio del tono de llamada incorporado que se reproduce cuando entra una llamada.ringtoneUrl : si el tono de llamada no está deshabilitado, esto permite anular el tono de llamada con cualquier archivo de audio compatible con el navegador al que pueda acceder el usuario. Para utilizar el tono de llamada predeterminado, comente esta línea.pageOptions : este objeto es opcional y le permite configurar qué secciones de configuración se muestran en la pestaña de configuración.enableAudioDeviceSettings : si es true , la pestaña de configuración mostrará una sección para configurar los dispositivos de entrada y salida de audio para la máquina local del agente. Si es false o si no se proporciona pageOptions , el agente no podrá cambiar la configuración del dispositivo de audio desde la pestaña de configuración. no se mostrará.enableVideoDeviceSettings : si es true , la pestaña de configuración mostrará una sección para configurar dispositivos de entrada de video para la máquina local del agente. Si es false o si no se proporciona pageOptions , el agente no podrá cambiar la configuración del dispositivo de video desde la pestaña de configuración. no se mostrará.enablePhoneTypeSettings : si es true , o si no se proporciona pageOptions , la pestaña de configuración mostrará una sección para configurar el tipo de teléfono y el número de teléfono de escritorio del agente. Si es false , el agente no podrá cambiar el tipo de teléfono o el número de teléfono de escritorio desde la pestaña de configuración.shouldAddNamespaceToLogs : antepone [CCP] a todos los registros registrados por el CCP. Nota importante: hay algunos registros realizados por el CCP antes de anteponer el espacio de nombres.ccpAckTimeout : un tiempo de espera en ms que indica cuánto tiempo esperarán las transmisiones para que el CCP iframe responda a sus emisiones de eventos SYNCHRONIZE . Esto sucede continuamente desde la primera vez que se llama initCCP . Sólo deberían aparecer cuando hay un problema que requiere una actualización o un nuevo inicio de sesión.ccpSynTimeout : un tiempo de espera en ms que indica cuánto tiempo esperarán las transmisiones para enviar un nuevo evento SYNCHRONIZE al CCP iframe. Esto sucede continuamente desde la primera vez que se llama initCCP .ccpLoadTimeout : un tiempo de espera en ms que indica cuánto tiempo esperarán las transmisiones por el evento ACKNOWLEDGE inicial del trabajador compartido mientras el CCP aún está en pie. containerDiv en el que coloca el iframe, o aplicando una regla CSS como esta: # container-div iframe {
display : none;
}width: 100%; height: 100% . Para personalizar el tamaño del CCP, establezca el ancho y el alto del elemento contenedor.Consulte la documentación completa aquí para leer más sobre cómo suscribirse a eventos y cómo implementar cambios de estado mediante programación.
