amazon connect streams
2.16.0
A API Amazon Connect Streams (Streams) oferece a capacidade de integrar suas aplicações web existentes com o Amazon Connect. O Streams permite incorporar o Painel de controle de contato (CCP) e a IU do aplicativo Perfis de cliente em sua página. Ele também permite que você manipule eventos de estado de agente e contato diretamente por meio de uma interface orientada a eventos orientada a objetos. Você pode usar a interface integrada ou criar a sua própria do zero: o Streams oferece a você a escolha.
Essa biblioteca deve ser usada em conjunto com amazon-connect-chatjs ou amazon-connect-taskjs para utilizar a funcionalidade de bate-papo ou tarefa do Amazon Connect.
Para saber mais sobre o Amazon Connect e seus recursos, consulte o Guia do usuário do Amazon Connect.
amazon-connect-streams está disponível em npmjs.com. Se quiser fazer o download aqui, você pode usar qualquer um dos arquivos como release/connect-streams* .
Execute npm run release para gerar novos arquivos de lançamento. Instruções completas para construir localmente com npm podem ser encontradas abaixo.
Na versão 1.x, também oferecemos suporte make para compilações legadas. Esta opção foi removida na versão 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ão anexarão mais vários CCPs incorporados à janela e apenas a primeira chamada para initCCP será bem-sucedida. Observe que o caso de uso de inicialização de vários CCPs com initCCP nunca foi suportado pelo Streams e esta alteração foi adicionada para evitar comportamentos imprevisíveis decorrentes de tais casos.agent.onContactPending foi removido. Use contact.onPending em vez disso. connect.onError agora é acionado. Anteriormente, esta API não funcionava. Esteja ciente de que, se você tiver lógica de aplicação nesta função, seu comportamento mudou. Veja sua entrada em documentação.md para mais detalhes.agent.setState() para mudar o status do agente, você precisará atualizar seu código para usar este recurso:enqueueNextState: true para acionar o comportamento do Próximo Status.agent.setState() , certifique-se também de que seu código esteja usando contact.clear() e não contact.complete() ao limpar o trabalho pós-contato de um contato.FailedConnectAgent , FailedConnectCustomer e AfterCallWork .FailedConnectAgent – Anteriormente, exigíamos que o agente clicasse no botão "Limpar contato" para limpar esse estado. Quando o agente clicou no botão “Limpar contato”, o comportamento anterior levou o agente de volta ao estado Available sem falhas. Agora o estado FailedConnectAgent será "limpo automaticamente", assim como FailedConnectCustomer sempre foi.FailedConnectAgent e FailedConnectCustomer – Agora estamos usando a API contact.clear() para limpar automaticamente esses estados. Como resultado, o agente retornará ao seu estado visível anterior (por exemplo, Available ). Anteriormente, o agente sempre era definido como Available como resultado desse comportamento de "limpeza automática". Observe que mesmo os CCPs personalizados se comportarão de maneira diferente com esta atualização para FailedConnectAgent e FailedConnectCustomer .AfterCallWork – Como parte do novo comportamento contact.clear() , clicar em “Limpar contato” enquanto estiver no AfterCallWork retornará o agente ao estado visível anterior do agente (por exemplo, Available , etc.). Observe que os CCPs personalizados que implementam seu próprio comportamento de pós-atendimento não serão afetados por essa alteração.contact.complete() em um caminho de descontinuação. Portanto, você deve começar a usar contact.clear() em seu lugar. Se você deseja emular o comportamento do pós-atendimento do CCP no CCP do seu cliente, certifique-se de usar contact.clear() ao limpar contatos de voz. Se você estiver migrando para o novo CCP, recomendamos que você atualize para a versão mais recente deste repositório. Você também deve atualizar para a versão mais recente do RTC-JS, se estiver usando-o. Para obter um guia de migração completo para o novo CCP e para compreender completamente as diferenças ao usar Streams com o novo CCP, consulte esta postagem: https://docs.aws.amazon.com/connect/latest/adminguide/upgrade-to -mais recente-ccp.html
A primeira etapa para usar o Streams é colocar na lista de permissões as páginas que você deseja incorporar. Para a segurança de nossos clientes, exigimos que todos os domínios que incorporam o CCP para uma instância específica estejam explicitamente na lista de permissões. Cada entrada de domínio identifica o esquema de protocolo, host e porta. Quaisquer páginas hospedadas no mesmo esquema de protocolo, host e porta terão permissão para incorporar os componentes CCP necessários para usar a biblioteca Streams.
Para colocar suas páginas na lista de permissões:
npm install amazon-connect-streams
import "amazon-connect-streams"; Isso disponibilizará a variável connect no contexto atual.
amazon-connect-streams é compatível com TypeScript. Você precisará usar a versão 3.0.1 ou superior:
import "amazon-connect-streams" ;
connect . core . initCCP ( { /* ... */ } ) ; A próxima etapa para incorporar o Connect ao seu aplicativo é baixar a biblioteca Streams do GitHub. Você pode fazer isso clonando nosso repositório público aqui:
$ git clone https://github.com/aws/amazon-connect-streams
Depois de baixar os streams, vá para o diretório e crie-o:
$ cd amazon-connect-streams
$ make
Isso irá gerar um arquivo chamado connect-streams-${VERSION}.js , esta é a API Connect Streams completa que você deseja incluir em sua página. Você pode servir connect-streams-${VERSION}.js com seu aplicativo da web.
Instale a versão LTS mais recente do NodeJS
$ git clone https://github.com/aws/amazon-connect-streams
$ cd amazon-connect-streams
$ npm install
$ npm run release
Encontre artefatos de construção no diretório de lançamento - Isso gerará um arquivo chamado connect-streams.js e a versão reduzida do mesmo connect-streams-min.js - esta é a API Connect Streams completa que você deseja incluir em sua página.
Para executar testes de unidade:
$ npm run test-mocha
Nota: esses testes são executados nos arquivos de lançamento gerados acima
Você também precisará ter gulp instalado. Você pode 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
Encontre artefatos de construção no diretório de lançamento - Isso gerará um arquivo chamado connect-streams.js e a versão reduzida do mesmo connect-streams-min.js - esta é a API Connect Streams completa que você deseja incluir em sua página.
Para executar testes de unidade:
$ npm run gulp-test
Nota: esses testes são executados nos arquivos de lançamento gerados acima
O Streams tem uma versão "integrada" do AWS-SDK no arquivo ./src/aws-client.js . Certifique-se de importar Streams antes do AWS SDK para que o objeto AWS vinculado à Window seja o objeto do SDK incluído manualmente e não do Streams.
Inicializar a API Streams é a primeira etapa para verificar se tudo está configurado corretamente e se você será capaz de ouvir 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 > Integra-se ao Connect carregando o CCP pré-construído localizado em ccpUrl em um iframe e colocando-o no containerDiv fornecido. As solicitações de API são canalizadas por meio deste CCP e as atualizações de agente e contato são publicadas por meio dele e disponibilizadas para seu código de cliente JS.
ccpUrl : o URL do CCP. Esta é a página que você normalmente navegaria para usar o CCP em uma página independente, é diferente para cada instância.region : região da instância do Amazon Connect. ex: us-west-2 . necessário apenas para canal de bate-papo.loginPopup : Opcional, o padrão é true . Defina como false para desativar o pop-up de loginloginOptions : Opcional, válido apenas quando loginPopup está definido como true . Forneça um objeto com as propriedades a seguir para abrir loginpopup em uma nova janela em vez de em uma nova guia.autoClose : Opcional, o padrão é false . Defina como true para fechar automaticamente o pop-up de login após o login do usuário.height : permite definir a altura da janela pop-up de login.width : permite definir a largura da janela pop-up de login.top : Isso permite que você defina o topo da janela pop-up de login.left : Isso permite que você defina a esquerda da janela pop-up de login.loginPopupAutoClose : Opcional, o padrão é false . Defina como true em conjunto com o parâmetro loginPopup para fechar automaticamente a janela pop-up de login assim que a etapa de autenticação for concluída. Se a página de login for aberta em uma nova aba, este parâmetro também fechará automaticamente essa aba. Isso também pode ser definido em loginOptions se essas opções forem usadas.loginUrl : opcional. Permite que URL personalizado seja usado para iniciar o CCP, como no caso da autenticação SAML.softphone : Este objeto é opcional e permite especificar algumas configurações relacionadas ao recurso de softphone do Connect.allowFramedSoftphone : normalmente, os componentes do microfone e do alto-falante do softphone não podem ser hospedados em um iframe. Isso ocorre porque o softphone deve estar hospedado em uma única janela ou aba. A janela que hospeda a sessão de softphone não deve ser fechada durante uma chamada de softphone ou a chamada será desconectada. Se allowFramedSoftphone for true , os componentes do softphone poderão ser hospedados nesta janela ou guia.disableRingtone : Esta opção permite desativar completamente o áudio do toque integrado que é reproduzido quando uma chamada é recebida.ringtoneUrl : Se o toque não estiver desativado, isso permite substituir o toque por qualquer arquivo de áudio compatível com o navegador e acessível ao usuário. Para usar o toque padrão, comente esta linha.pageOptions : Este objeto é opcional e permite configurar quais seções de configuração serão exibidas na aba de configurações.enableAudioDeviceSettings : se true , a guia de configurações exibirá uma seção para configurar dispositivos de entrada e saída de áudio para a máquina local do agente. Se false ou se pageOptions não for fornecido, o agente não poderá alterar as configurações do dispositivo de áudio na guia de configurações. não será exibido.enableVideoDeviceSettings : se true , a guia de configurações exibirá uma seção para configurar dispositivos de entrada de vídeo para a máquina local do agente. Se false ou se pageOptions não for fornecido, o agente não poderá alterar as configurações do dispositivo de vídeo na guia de configurações. não será exibido.enablePhoneTypeSettings : se true ou se pageOptions não for fornecido, a guia de configurações exibirá uma seção para configurar o tipo de telefone e o número do telefone fixo do agente. Se false , o agente não poderá alterar o tipo de telefone ou o número do telefone fixo na guia de configurações.shouldAddNamespaceToLogs : acrescenta [CCP] a todos os logs registrados pelo CCP. Nota importante: existem alguns logs feitos pelo CCP antes do namespace ser anexado.ccpAckTimeout : um tempo limite em ms que indica quanto tempo os fluxos aguardarão até que o CCP iframed responda às suas emissões de evento SYNCHRONIZE . Isso acontece continuamente desde a primeira vez initCCP é chamado. Eles só devem aparecer quando houver um problema que exija uma atualização ou um novo login.ccpSynTimeout : um tempo limite em ms que indica quanto tempo os streams esperarão para enviar um novo evento SYNCHRONIZE ao CCP iframed. Isso acontece continuamente desde a primeira vez initCCP é chamado.ccpLoadTimeout : um tempo limite em ms que indica quanto tempo os fluxos aguardarão pelo evento ACKNOWLEDGE inicial do trabalhador compartilhado enquanto o CCP ainda está em pé. containerDiv no qual você coloca o iframe ou aplicando uma regra CSS como esta: # container-div iframe {
display : none;
}width: 100%; height: 100% . Para personalizar o tamanho do CCP, defina a largura e a altura do elemento contêiner.Confira a documentação completa aqui para ler mais sobre como assinar eventos e implementar mudanças de estado programaticamente.
