Fluxo de trabalho de integração Pré-requisitos Instalar bibliotecas Configurar credenciais da AWS Iniciar um bate-papo Crie uma conexão de participante Use WebSocket conexões Enviar mensagens Lidar com eventos Encerrar um bate-papo Código-fonte

Integre o chat do Amazon Connect em um aplicativo móvel

Os tópicos desta seção explicam como criar uma interface de chat personalizada do Amazon Connect em seu aplicativo móvel. Isso requer o uso de seu próprio back-end de bate-papo. Você também deve usar a StartChatContactAPI Amazon Connect para iniciar o contato e as APIs do Participant Service para gerenciar a participação no chat.

nota

A StartChatContact API exige a AWS assinatura do Signature versão 4. Portanto, as solicitações iniciais devem ser encaminhadas por meio de seu back-end de bate-papo pessoal. As chamadas de API subsequentes para o Amazon Connect Participant Service (ACPS) podem ser processadas diretamente do aplicativo móvel.

Fluxo de trabalho de integração

O diagrama a seguir mostra o fluxo de programação entre um cliente usando um aplicativo móvel e um agente. O texto numerado no diagrama corresponde ao texto numerado abaixo da imagem.

Diagrama mostrando o fluxo do programa de bate-papo do Amazon Connect.

No diagrama:

Quando um cliente inicia um bate-papo no aplicativo móvel, o aplicativo envia uma solicitação para o Amazon Connect usando a StartChatContactAPI. Isso requer parâmetros específicos, como o endpoint da API e os IDs da instância e do fluxo de contato, para autenticar e iniciar o bate-papo.
A StartChatContact API interage com seu sistema de back-end para obter um token de participante e um ID de contato que atuam como identificadores exclusivos para a sessão de bate-papo.
O back-end do aplicativo usa o token do participante e o ID de contato para se comunicar com o Amazon Connect, configurando a sessão de bate-papo do cliente.
O SDK do participante do Amazon Connect é ativado usando o token do participante, preparando o aplicativo para o bate-papo.
O SDK do participante usa os detalhes da sessão para estabelecer uma linha segura de comunicação com o Amazon Connect.
O Amazon Connect responde fornecendo uma WebSocket URL por meio do SDK do participante. O aplicativo usa esse URL para criar uma WebSocket conexão para mensagens em tempo real.
O Amazon Connect atribui um agente de suporte ao chat com base no fluxo de contatos e no perfil de roteamento.
As mensagens do agente chegam pela WebSocket conexão. O aplicativo móvel escuta o WebSocket para receber e exibir mensagens do agente e para enviar mensagens de volta ao cliente.

Pré-requisitos

Você deve ter os seguintes pré-requisitos para integrar o chat do Amazon Connect a um aplicativo móvel:

Criar uma instância do Amazon Connect.

—ou—

Se você tiver uma instância do Connect, siga estas etapas GitHub para ativar o bate-papo para a instância.
Crie um fluxo de contato do Amazon Connect, pronto para receber contatos do chat.
- Anote o ID da instância.
- Encontre o contactFlowId para Exemplo de fluxo de entrada (experiência do primeiro contato) o.
Implante um back-end de chat personalizado do Amazon Connect. Consulte o modelo de startChatContact API em GitHub.
- Implante um modelo de função startChatContactLambda. CloudFront
- Adicione oregion, API_GATEWAY_IDcontactFlowId, e instanceID ao arquivo Config do modelo.

Instalar bibliotecas

Você inicia o processo de integração instalando as bibliotecas para iOS e Android. Você deve instalar os dois conjuntos de bibliotecas.

iOS: acesse o aws-sdk-iosrepositório GitHub e instale o seguinte:


pod 'AWSCore'
pod 'AWSConnectParticipant'
pod 'Starscream', '~> 4.0'

Android: acesse o aws-sdk-androidrepositório GitHub e instale o seguinte:


implementation("com.amazonaws:aws-android-sdk-core:2.73.0")
implementation("com.amazonaws:aws-android-sdk-connectparticipant:2.73.0")

Configurar credenciais da AWS

Depois de instalar os dois conjuntos de bibliotecas, você se registra no Amazon Connect Service e no Amazon Connect Participant Service. Para fazer isso, nos arquivos Config de cada sistema operacional, use suas AWS credenciais e substitua os secretKey valores accessKey e por strings vazias (“”), conforme mostrado nos exemplos a seguir.

Importante

Você deve especificar a região em que você está testando.

iOS: use AWSStaticCredentialsProvider para o Amazon Connect Service e o registro do Participant Service.


private let config = Config()
 let credentials = AWSStaticCredentialsProvider(accessKey: "", secretKey: "")
 let participantService = AWSServiceConfiguration(region: config.region, credentialsProvider: credentials)!
 AWSConnectParticipant.register(with: participantService, forKey: "")
 connectParticipantClient = AWSConnectParticipant.init(forKey: "")

Android: inicialize AmazonConnectParticipantAsyncClient e defina a região.


private var connectParticipantClient: AmazonConnectParticipantAsyncClient = AmazonConnectParticipantAsyncClient()
private val chatConfiguration = Config
init {
      connectParticipantClient.setRegion(Region.getRegion(chatConfiguration.region))
     }

nota

Você pode baixar os arquivos Config em. GitHub Você deve editar os dois arquivos Config.

Iniciar um bate-papo

Em seguida, você deve integrar a StartChatContactAPI fornecida pelo Amazon Connect. A API inicia a conversa registrando a intenção do cliente de conversar com um agente.

nota

Para implantar uma função StartChatContact Lambda, use o CloudFront modelo em. GitHub

Para iOS e Android, a chamada de StartChatContact API exige várias informações:

InstanceId: o identificador da instância do Amazon Connect.
ContactFlowId: o identificador do fluxo de contato para lidar com o bate-papo.
ParticipantDetails: informações sobre o participante, como o nome de exibição do cliente.
Attributes: Informações adicionais sobre o contato que podem ser úteis para rotear ou gerenciar o bate-papo no Amazon Connect.

Importante

Você deve usar o AWS Signature Version 4 (SigV4) para assinar a chamada da API. O processo SigV4 adiciona informações de autenticação às solicitações de AWS API enviadas via HTTP. Para clientes móveis, recomendamos realizar o processo de assinatura no lado do servidor. Seu aplicativo móvel envia uma solicitação ao seu servidor, que então assina a solicitação e a encaminha para o Amazon Connect. Isso ajuda a proteger suas AWS credenciais.

Para iOS:


func startChatSession(displayName: String, completion: 
    @escaping (Result<StartChatResponse, Error>) -> Void) {
    // Your back end server will handle SigV4 signing and make the API call to Amazon Connect 
    // Use the completion handler to process the response or error 
}

Para Android:


// Make a network call to your back end server 
suspend fun startChatSession(displayName: String): StartChatResponse {
    // Your back end server will handle SigV4 signing if needed and make the 
    // API call to Amazon Connect 
    // Handle the response or error accordingly 
}

Crie uma conexão de participante

Você usa os detalhes recebidos de uma chamada de StartChatContactAPI para criar uma conexão de participante. Em seguida, você chama o SDK do participante do AWS Connect, que retorna a WebSocket URL necessária para estabelecer a conexão.

O exemplo a seguir mostra como estabelecer uma conexão para iOS:


// Swift code snippet for iOS participant connection setup
/// Creates the participant's connection. https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html
/// - Parameter: participantToken: The ParticipantToken as obtained from StartChatContact API response.
func createParticipantConnection() {
    let createParticipantConnectionRequest = AWSConnectParticipantCreateParticipantConnectionRequest()
    createParticipantConnectionRequest?.participantToken = self.participantToken
    createParticipantConnectionRequest?.types = ["WEBSOCKET", "CONNECTION_CREDENTIALS"]
    connectParticipantClient?
        .createParticipantConnection (createParticipantConnectionRequest!)
        .continueWith(block: {
            (task) -> Any? in
            self.connectionToken = task.result!.connectionCredentials!.connectionToken
            self.websocketUrl = task.result!.websocket!.url
            return nil
        }
        ).waitUntilFinished()
    }

O exemplo a seguir mostra como estabelecer uma conexão para o Android:


// Kotlin code snippet for Android participant connection setup
/// Creates the participant's connection. https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html
/// - Parameter: participantToken: The ParticipantToken as obtained from StartChatContact API response.
fun createParticipantConnection(
    _participantToken: String,
      handler: AsyncHandler<CreateParticipantConnectionRequest, CreateParticipantConnectionResult>
    ) {
          val createParticipantConnectionRequest = CreateParticipantConnectionRequest().apply {
              setType(listOf("WEBSOCKET", "CONNECTION_CREDENTIALS"))
              participantToken = _participantToken
       }
          connectParticipantClient.createParticipantConnectionAsync(
              createParticipantConnectionRequest,
              handler
        )
    }

Use WebSocket conexões

Use o SDK do participante para obter uma WebSocket URL para a conexão do chat.

Para implementar o WebSocket gerenciamento, use as soluções existentes ou implemente as suas próprias.
Para lidar com mensagens e eventos do Websocket, implemente sua própria solução ou use nossas soluções para iOS e Android.
Certifique-se de cobrir todos os tipos de mensagens e eventos:
- estojo typing = "application/vnd.amazonaws.connect.event.typing"
- estojo messageDelivered = "application/vnd.amazonaws.connect.event.message.delivered"
- estojo messageRead = "application/vnd.amazonaws.connect.event.message.read"
- estojo metaData = "application/vnd.amazonaws.connect.event.message.metadata"
- estojo joined = "application/vnd.amazonaws.connect.event.participant.joined"
- estojo left = "application/vnd.amazonaws.connect.event.participant.left"
- estojo ended = "application/vnd.amazonaws.connect.event.chat.ended"
- estojo plainText = "text/plain"
- estojo richText = "text/markdown"
- estojo interactiveText = "application/vnd.amazonaws.connect.message.interactive"

A imagem a seguir mostra uma instância padrão do Connect chat. Os números na imagem correspondem ao texto numerado abaixo.

Imagem mostrando os componentes de uma janela de bate-papo do Amazon Connect.

Na imagem, começando perto do topo:

O indicador de digitação mostra quem está digitando uma mensagem.
Este exemplo usa mensagens de texto sem formatação. Você pode ativar o uso do markdown, se desejar.
O controle de lista interativo fornece aos usuários listas de opções, como atendimento ao cliente ou cobrança.
Respostas rápidas interativas fornecem respostas pré-programadas para perguntas ou frases comuns.

Enviar mensagens

Você usa a SendMessage função para enviar mensagens de bate-papo.


/// To send a message using the Participant SDK.
/// - Parameters:
///   - messageContent: The content of the message.
///   - connectionToken: The authentication token associated with the connection - Received from Participant Connection
///   - contentType: text/plain, text/markdown, application/json, and application/vnd.amazonaws.connect.message.interactive.response
func sendChatMessage(messageContent: String) {
    let sendMessageRequest = AWSConnectParticipantSendMessageRequest()
    sendMessageRequest?.connectionToken = self.connectionToken
    sendMessageRequest?.content = messageContent
    sendMessageRequest?.contentType = "text/plain"
    connectParticipantClient?
        .sendMessage(sendMessageRequest!)
        .continueWith(block: { (task) -> Any? in
            return nil
        })
}

Lidar com eventos

Use a SendEvent função no SDK do participante para eventos como digitação e leitura de recibos.


/// Sends an event such as typing, joined, left etc.
/// - Parameters:
///   - contentType: The content type of the request
///   - content: The content of the event to be sent (for example, message text). For content related to message receipts, this is supported in the form of a JSON string.
func sendEvent(contentType: ContentType, content: String = "") {
    let sendEventRequest = AWSConnectParticipantSendEventRequest()
    sendEventRequest?.connectionToken = self.connectionToken
    sendEventRequest?.contentType = contentType.rawValue
    sendEventRequest?.content = content // Set the content here
    connectParticipantClient?
        .sendEvent(sendEventRequest!)
        .continueWith(block: { (task) -> Any? in
            return nil
        })
}

Encerrar um bate-papo

Para encerrar um bate-papo, use a disconnectParticipant função no SDK do participante.


/// Disconnects a participant.
/// - Parameter: connectionToken: The authentication token associated with the connection - Received from Participant Connection
func endChat() {
    let disconnectParticipantRequest = AWSConnectParticipantDisconnectParticipantRequest()
    disconnectParticipantRequest?.connectionToken = self.connectionToken
    connectParticipantClient?.disconnectParticipant(disconnectParticipantRequest!)
        .continueWith(block: { (task) -> Any? in
            return nil
        }).waitUntilFinished()
    self.websocketUrl = nil
}

Código-fonte

Os exemplos de projetos a seguir GitHub mostram como implementar o Connect chat.

iOS: demonstração de bate-papo nativo para iOS.
Android: demonstração de bate-papo nativo do Android.

Atenção O Javascript está desativado ou não está disponível no seu navegador.

Para usar a documentação da AWS, o Javascript deve estar ativado. Consulte as páginas de Ajuda do navegador para obter instruções.

Convenções do documento

Solucionar problemas com o widget de comunicação

Criar respostas rápidas