As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá.

# Configurar a experiência de chat do cliente no Amazon Connect
<a name="enable-chat-in-app"></a>

Você pode oferecer uma experiência de bate-papo aos clientes usando um dos métodos a seguir: 
+ [Adicionar uma interface de usuário de chat ao seu site hospedado pelo Amazon Connect](add-chat-to-website.md). 
+ [Personalizar o chat com o exemplo de código aberto do Amazon Connect](download-chat-example.md). 
+ [Personalize sua solução usando o Amazon Connect APIs](integrate-with-startchatcontact-api.md). Recomendamos começar com a biblioteca de código aberto ChatJS do Amazon Connect ao personalizar suas próprias experiências de bate-papo. Para obter mais informações, consulte o repositório [ChatJS do Amazon Connect](https://github.com/amazon-connect/amazon-connect-chatjs) no GitHub. 

## Mais recursos para personalizar a experiência de bate-papo
<a name="more-resource-customize-chat"></a>
+ As mensagens interativas fornecem aos clientes opções de exibição rápidas e pré-configuradas que eles podem escolher. Essas mensagens são fornecidas pelo Amazon Lex e configuradas por meio do Amazon Lex usando um Lambda. Para obter instruções sobre como adicionar mensagens interativas por meio do Amazon Lex, consulte este blog: [Configure mensagens interativas para seu chatbot do Amazon Connect](https://aws.amazon.com/blogs/contact-center/easily-set-up-interactive-messages-for-your-amazon-connect-chatbot/).

  O Amazon Connect oferece suporte aos seguintes modelos: um seletor de lista e um seletor de horário. Para obter mais informações, consulte [Adicionar mensagens interativas do Amazon Lex para clientes no chat](interactive-messages.md). 
+  [Habilitar o Apple Messages for Business no Amazon Connect](apple-messages-for-business.md) 
+  [Documentação da API do Amazon Connect Service](https://docs.aws.amazon.com/connect/latest/APIReference), especialmente a [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)API.
+  [API do serviço de participante do Amazon Connect](https://docs.aws.amazon.com/connect-participant/latest/APIReference/Welcome.html). 
+  [SDK de chat do Amazon Connect e implementações de exemplo](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/) 
+  [Amazon Connect Streams](https://github.com/aws/amazon-connect-streams). Use para integrar as aplicações existentes ao Amazon Connect. Você pode incorporar os componentes do Painel de controle do contato (CCP) em seu aplicativo. 
+  [Ative o streaming de mensagens para bate-papo com tecnologia de IA](message-streaming-ai-chat.md) 

# O chat/SMS canal no Amazon Connect
<a name="web-and-mobile-chat"></a>

**Importante**  
**Está tentando entrar em contato com a Amazon para obter suporte?** Consulte [Amazon Customer Service](https://www.amazon.com/gp/help/customer/display.html?icmpid=docs_connect_messagingcap_customerservice) (pedidos e entregas da Amazon) ou [AWS Support](https://aws.amazon.com/premiumsupport/?icmpid=docs_connect_messagingcap_premiumsupport) (Amazon Web Services).

O Amazon Connect permite que você crie recursos de mensagens por chat, chat móvel, chat na web, SMS e serviços de mensagens de terceiros, no site e em aplicativos móveis. Ele permite que os clientes comecem a conversar com atendentes da central de atendimento a partir de qualquer aplicação de negócios, na Web ou em dispositivos móveis. 

As interações são assíncronas, permitindo que os clientes iniciem um chat com um atendente ou bot do Amazon Lex, afastem-se dele e retomem a conversa novamente. Eles podem até trocar de dispositivo e continuar o bate-papo.

**Topics**
+ [Vários canais, uma experiência](#unified-experience-chat)
+ [Introdução](#enable-chat)
+ [Exemplo de cenário de bate-papo](#example-chat-scenario)
+ [Quando os bate-papos são encerrados?](#when-do-chats-end)
+ [Preços](#web-and-mobile-chat-pricing)
+ [Mais informações](#chat-more-info)

## Vários canais, uma experiência
<a name="unified-experience-chat"></a>

Os atendentes têm uma única interface de usuário para ajudar os clientes a usar voz, chat e tarefas. Isso reduz o número de ferramentas que os atendentes precisam aprender e o número de telas com as quais precisam interagir. 

As atividades de chat se integram aos fluxos existentes da central de atendimento e à automação que você criou para voz. Você cria os fluxos uma vez e os reutiliza em vários canais. 

A coleção de métricas e os painéis que você criou se beneficiam automaticamente das métricas unificadas em vários canais.

## Introdução
<a name="enable-chat"></a>

Para adicionar recursos de chat à central de contatos do Amazon Connect e permitir que os atendentes participem de chats, execute as seguintes etapas:
+ O chat é habilitado no nível da instância quando [um bucket do Amazon S3 é criado para armazenar transcrições de chat](amazon-connect-instances.md#get-started-data-storage).
+ [Adicione o chat ao perfil de roteamento do atendente](routing-profiles.md).
+ Se preferir, você poderá configurar subtipos de chat, como mensagens SMS. Você adquire um número de telefone habilitado para SMS usando AWS End User Messaging SMS, importando-o e Amazon Connect, em seguida, atribuindo-o aos seus fluxos. Para obter mais informações, consulte: 
  + [Solicite um número de telefone habilitado para SMS por meio de AWS End User Messaging SMS](sms-number.md)
  + [Configurar mensagens SMS no Amazon Connect](setup-sms-messaging.md)

Os atendentes podem começar a aceitar chat por meio do Painel de Controle de Contatos.

Você pode ver métricas históricas e em tempo real do canal de mensagens de bate-papo (por exemplo, hora de chegada, tempo de atendimento) como parte das métricas gerais do canal de bate-papo na mesma experiência de geração de relatórios usada para calls/chats/tasks avaliar o desempenho e a produtividade dos agentes.

O Amazon Connect fornece vários recursos para ajudar você a adicionar chat ao seu site. Para obter mais informações, consulte [Configurar a experiência de chat do cliente no Amazon Connect](enable-chat-in-app.md).

## Exemplo de cenário de bate-papo
<a name="example-chat-scenario"></a>

Um cliente e um atendente estão conversando. O cliente deixa de responder ao atendente. O atendente pergunta “Você está aí?” e não recebe nenhuma resposta. O agente abandona o bate-papo. Agora, o chat não está mais associado a um atendente. Seu fluxo determina o que acontece a seguir. 

Nesse cenário, o cliente envia eventualmente outra mensagem (“Ei, voltei”) e o chat é retomado. Dependendo da lógica definida no fluxo, o chat poderá ser atribuído ao atendente original, a um atendente ou uma fila diferente.

Veja como esse cenário é criado:

1. Crie um fluxo de desconexão. A imagem a seguir mostra o [Exemplo de fluxo de desconexão no Amazon Connect](sample-disconnect.md) no designer de fluxo. Esse fluxo inclui os seguintes blocos conectados: **Solicitação de reprodução**, **Esperar** que se ramifica para três **Solicitações de reprodução** (para **Devolvido pelo cliente**, **Tempo expirado** e **Erro**), e depois **Transferir para a fila** e **Desconectar**.  
![\[O exemplo de fluxo de desconexão.\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/sample-disconnect-flow.png)

1.  No fluxo de desconexão, adicione um bloco [Wait (Espera)](wait.md). O bloco Wait (Espera) tem duas ramificações: 
   +  **Timeout (Tempo limite)**: execute esta ramificação se o cliente não tiver enviado uma mensagem após um período especificado. A duração total do chat, incluindo vários blocos **Esperar**, não pode exceder 7 dias. 

      Por exemplo, para essa ramificação, você pode apenas querer executar um bloco **Disconnect (Desconectar)** e encerrar o bate-papo. 
   +  **Customer return (Retorno do cliente)**: execute esta ramificação quando o cliente retornar e enviar uma mensagem. Com essa ramificação, é possível direcionar o cliente para o atendente anterior, a fila anterior ou definir uma nova fila ou atendente em operação. 

1.  No fluxo de entrada, adicione o bloco [Definir fluxo de desconexão](set-disconnect-flow.md). Use-o para especificar que quando o atendente ou bot do Amazon Lex desconectar-se do chat e somente o cliente permanecer, o fluxo de desconexão definido deverá ser executado. 

    No bloco a seguir, por exemplo, especificamos que o **Sample disconnect flow (Exemplo de fluxo de desconexão)** deverá ser executado.   
![\[O bloco Definir fluxo de desconexão, o menu suspenso Selecionar um fluxo, a opção de exemplo de fluxo de desconexão.\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/set-disconnect-flow.png)

    Para obter um exemplo que usa o bloco de **Set Disconnect Flow (Definir fluxo de desconexão)**, consulte o [Exemplo de fluxo de entrada](sample-inbound-flow.md). 

## Quando os bate-papos são encerrados?
<a name="when-do-chats-end"></a>

 Por padrão, a duração total de uma conversa de bate-papo, incluindo o tempo gasto em espera quando o cliente está inativo, não pode exceder 25 horas. No entanto, você pode alterar essa duração padrão e, em vez disso, configurar uma duração de chat personalizada. Você pode configurar um chat para durar de no mínimo 1 hora (60 minutos) a até 7 dias (10.080 minutos). Para configurar uma duração de bate-papo personalizada, chame a [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)API e adicione o `ChatDurationInMinutes` parâmetro. 

Durante uma sessão de chat em andamento, não há limite para o número de vezes que um cliente pode sair e voltar a uma sessão de chat existente. Para fazer isso, use o bloco [Esperar](wait.md). Por exemplo, você pode esperar 12 horas até o cliente retomar o chat antes de encerrar a sessão. Se o cliente tentar retomar o chat após 12 horas, no fluxo você pode solicitar que um bot do Amazon Lex pergunte se ele está entrando em contato sobre o mesmo problema ou outro. 

Ao especificar um tempo de espera significativamente menor do que a duração do chat, você ajuda a garantir que os clientes tenham uma boa experiência. Por exemplo, para um chat com 25 horas de duração, é possível que o cliente retome um chat após 24 horas e 58 minutos e seja interrompido após dois minutos é encerrada automaticamente no limite de 25 horas.

**dica**  
Se você estiver usando o Amazon Lex com o chat, observe que o tempo limite de sessão padrão para uma sessão do Amazon Lex é de 5 minutos. A duração total de uma sessão não pode exceder 24 horas. Para alterar o tempo limite da sessão, consulte [Definir o tempo limite da sessão](https://docs.aws.amazon.com/lex/latest/dg/context-mgmt.html#context-mgmt-session-timeoutg) no *Guia do desenvolvedor do Amazon Lex*. 

## Preços
<a name="web-and-mobile-chat-pricing"></a>

O chat é cobrado por uso. Não há exigência de pagamentos antecipados, compromissos de longo prazo ou taxas mensais mínimas. Você paga por mensagem de chat, independentemente do número de atendentes ou clientes que a usam. Os preços regionais podem variar. Para obter mais informações, consulte [Preços do Amazon Connect](https://aws.amazon.com/connect/pricing/). 

## Mais informações
<a name="chat-more-info"></a>

Para obter mais informações sobre chat, consulte os seguintes tópicos:
+  [Testar experiências de voz, chat e tarefas no Amazon Connect](chat-testing.md) 
+  [Como o roteamento funciona com vários canais](about-routing.md#routing-profile-channels-works) 
+  [Criar um perfil de roteamento no Amazon Connect para vincular filas a atendentes](routing-profiles.md) 
+  [SDK de chat do Amazon Connect e implementações de exemplo](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/) 

# Adicionar uma interface de usuário de chat ao seu site hospedado pelo Amazon Connect
<a name="add-chat-to-website"></a>

Para apoiar seus clientes por meio do chat, você pode adicionar um widget de comunicação ao seu site hospedado pelo Amazon Connect. Você pode configurar o widget de comunicação no site Amazon Connect administrativo. Você pode personalizar a fonte e as cores, além de proteger o widget para que ele só possa ser lançado pelo site. Quando terminar, você terá um pequeno trecho de código para adicionar ao seu site. 

Como o Amazon Connect hospeda o widget, ele garante que a versão mais recente esteja sempre disponível em seu site. 

**dica**  
O uso do widget de comunicação está sujeito às cotas de serviço padrão, como o número de caracteres necessários para cada mensagem. Antes de lançar seu widget de comunicação em produção, certifique-se de que suas cotas de serviço estejam definidas de acordo com as necessidades da sua organização. Para obter mais informações, consulte [Amazon Connect cotas de serviço](amazon-connect-service-limits.md). 

**Topics**
+ [Campos de trechos de widget aceitos que são personalizáveis](supported-snippet-fields.md)
+ [Navegadores compatíveis](#chat-widget-supported-browsers)
+ [Etapa 1: personalizar o widget de comunicação](#customize-chat-widget)
+ [Etapa 2: especificar os domínios do site em que você espera exibir o widget de comunicação](#chat-widget-domains)
+ [Etapa 3: confirmar e copiar o código e as chaves de segurança do widget de comunicação](#confirm-and-copy-chat-widget-script)
+ [Recebendo mensagens de erro?](#chat-widget-error-messages)
+ [Personalizar o comportamento de inicialização do widget e o ícone do botão](customize-widget-launch.md)
+ [Transmitir o nome de exibição do cliente](pass-display-name-chat.md)
+ [Transmitir atributos de contato](pass-contact-attributes-chat.md)
+ [Personalizações adicionais para seu widget de chat](pass-customization-object.md)
+ [Baixar a transcrição do widget de chat](chat-widget-download-transcript.md)
+ [Baixar e personalizar nosso exemplo de código aberto](download-chat-example.md)
+ [Inicie bate-papos em seus aplicativos usando o Amazon Connect APIs](integrate-with-startchatcontact-api.md)
+ [Enviar notificações do navegador aos clientes quando receberem uma mensagem de chat](browser-notifications-chat.md)
+ [Desconexão programática do chat](programmatic-chat-disconnect.md)
+ [Transmitir propriedades personalizadas para substituir os padrões no widget de comunicação](pass-custom-styles.md)
+ [Segmente o botão e o quadro do widget com CSS/ JavaScript](target-widget-button.md)
+ [Solucionar problemas com o widget de comunicação](ts-cw.md)
+ [Adicionar um formulário de pré-contato ou pré-chat](add-precontact-form.md)
+ [Pesquisa pós-bate-papo](enable-post-chat-survey.md)

# Campos de trechos de widget compatíveis no Amazon Connect que são personalizáveis
<a name="supported-snippet-fields"></a>

A tabela a seguir lista os campos de trechos do widget de comunicação que você pode personalizar. O código de exemplo após a tabela mostra como usar os campos de trecho.


| Campo de trecho | Tipo | Description | Documentação adicional | 
| --- | --- | --- | --- | 
| `snippetId` | String | Obrigatória, gerada automaticamente | n/a | 
| `styles` | String | Obrigatória, gerada automaticamente | n/a | 
| `supportedMessagingContentTypes` | Array | Obrigatória, gerada automaticamente | n/a | 
| `customLaunchBehavior` | Objeto | Personalize como o site renderiza e lança o ícone do widget hospedado | [Personalizar o comportamento de inicialização do widget e o ícone do botão para seu site hospedado no Amazon Connect](customize-widget-launch.md), mais adiante neste tópico | 
| `authenticate` | Função | Função de retorno de chamada para habilitar a segurança JWT no site | [Etapa 2: especificar os domínios do site em que você espera exibir o widget de comunicação](add-chat-to-website.md#chat-widget-domains), anteriormente nesta seção. | 
| `customerDisplayName` | Função | Transmitir o nome de exibição do cliente durante a inicialização de um contato | [Transmitir o nome de exibição do cliente quando um chat do Amazon Connect é iniciado](pass-display-name-chat.md), posteriormente nesta seção. | 
| `customStyles` | Objeto | Substituir os estilos CSS padrão | [Transmitir propriedades personalizadas para substituir os padrões no widget de comunicação do Amazon Connect](pass-custom-styles.md), posteriormente nesta seção. | 
| `chatDurationInMinutes` | Número | A duração total da sessão de chat recém-iniciada | Padrão: 1.500 - Mín 60, Máx: 10.080 | 
| `enableLogs` | Booleano | Habilitar os logs de depuração | Padrão: Falso | 
| `language` | String |  O Amazon Connect pode fazer traduções para códigos de idioma de formato ISO-639 aceitos. Para obter mais informações, consulte [https://en.wikipedia. org/wiki/List\$1de\$1Códigos ISO\$1639-1](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes). Isso não traduziria substituições de texto personalizadas e conteúdo de mensagens (tanto enviadas quanto recebidas).  | Padrão: en\$1US. Aceitos: “cs\$1CZ”, “da\$1DK”, “de\$1DE”, “en\$1AU”, “en\$1CA”, “en\$1GB”, “en\$1US”, “es\$1ES”, “fi\$1FI”, “fr\$1FR”, “hu\$1HU”, “id\$1ID”, “it\$1IT”, “ja\$1JP”, “ko\$1KR”, “nl\$1NL”, “nn\$1NO”, “pt\$1BR”, “pt\$1PT”, “sk\$1SK”, “sv\$1SE”, “zh\$1CN”, “zh\$1TW” | 
| `disableCSM` | Booleano | Desabilite o rastreamento das métricas do lado do cliente por meio do widget de comunicação. | Padrão: Falso | 
| `nonce` | String | Valor de handshake entre iframe e política csp do site do cliente. Exemplo: csp do cliente permite o valor de 1234 nonce, o iframe que extrai outro script deve ter o mesmo valor de 1234 nonce para que o navegador saiba que é um script confiável pelo site pai do iframe. | Padrão: indefinido | 
| `customizationObject` | Objeto | Personalizar o layout e a transcrição do widget | Para obter mais informações, consulte [Personalizações adicionais para seu widget de chat do Amazon Connect](pass-customization-object.md), mais adiante nesta seção. | 
| `contactAttributes` | Objeto | Passe atributos para o fluxo de contato diretamente do código do trecho, sem nenhuma configuração de JWT | Para obter mais informações, consulte [Pass contact attributes when a chat initializes](https://docs.aws.amazon.com/connect/latest/adminguide/pass-contact-attributes-chat.html). | 
| `customDisplayNames` | Objeto | Substitua as configurações de nome de exibição e logotipo do sistema ou bot definidas no site de administração do Amazon Connect. | Para obter mais informações, consulte [How to pass override system and bot display names and logos for the communications widget](https://docs.aws.amazon.com/connect/latest/adminguide/pass-custom-styles.html#pass-override-system). | 
| `contactMetadataHandler` | Função | Função de retorno de chamada para acessar o contactId. Por exemplo, adicione um ouvinte de eventos para lidar com cenários como chamar a StopContact função com o ContactID quando a guia do navegador estiver fechada ou manter a persistência do bate-papo com um ContactID anterior.  |  | 
| `registerCallback` | Objeto | Isso permite executar retornos de chamada para os eventos do ciclo de vida expostos.  Para obter mais informações, consulte [amazon-connect-chatjs](https://github.com/amazon-connect/amazon-connect-chatjs).  | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/supported-snippet-fields.html) | 
| `initialMessage` | String | A mensagem a ser enviada para o chat recém-criado. Restrições de comprimento: mínimo de 1, máximo de 1.024. | Para invocar o bot Lex configurado no fluxo de contato usando uma mensagem inicial, modifique o [bloco Obter fluxo de entrada do cliente](get-customer-input.md) selecionando a opção **Inicializar bot com mensagem**. Para obter mais informações, consulte [How to configure Get customer input flow block](get-customer-input.md#get-customer-input-properties). | 
| `authenticationParameters` | Objeto | Isso habilita o bloco de fluxo [Autenticar cliente](authenticate-customer.md). | Para obter mais informações, consulte [Habilitar a autenticação do cliente](enable-connect-managed-auth.md). | 
| `mockLexBotTyping` | Booleano | Habilite o indicador de digitação simulada para mensagens do Lex Bot. | Padrão: Falso | 
| `customStartChat` | Função | Função de retorno de chamada para chamar a API Start Chat do seu backend. | Para acessar mais informações, consulte [Interface de usuário de widget hospedada com API Start Chat personalizada](https://github.com/amazon-connect/amazon-connect-chat-interface#option-3-hosted-widget-ui-with-custom-start-chat-api)  | 

O exemplo a seguir mostra como adicionar campos de trecho ao script HTML que adiciona o widget de chat ao site.

```
(function(w, d, x, id) {   /* ... */})(window, document, 
'amazon_connect', 'widgetId');
 amazon_connect('snippetId', 'snippetId');
 amazon_connect('styles', /* ... */);
 amazon_connect('registerCallback', {
    // Custom event example
    // WIDGET_FRAME_CLOSED
    /**
     * This event is triggered when user clicks on the chat widget close button, 
     * either widget close button was clicked when error in the chat session or normally by the user. 
     * This event can be used for webview use cases to go back to main app
     * 
     * @param {string} status - The reason for widget closure
     *   - "error_chat": Indicates the user clicked on widget close button due to an error in the chat session
     *   - "close_chat": Indicates the user clicked on widget close button normally by the user
     */
    'WIDGET_FRAME_CLOSED': (eventName, { status }) => {
        // You can implement custom logic based on the status value(error_chat or close_chat)
        if (status == "error_chat") {
            // handle error chat
        } else if (status == "close_chat") {
            // handle close chat  
        } 
    },
    // System event example
    /**
     * chatDetails: { 
     *     contactId: string, 
     *     participantId: string,
     *     participantToken: string,
     * }
     * data: {
     *     AbsoluteTime?: string,
     *     ContentType?: string,
     *     Type?: string,
     *     ParticipantId?: string,
     *     DisplayName?: string,
     *     ParticipantRole?: string,
     *     InitialContactId?: string
     * }
     */
    'PARTICIPANT_JOINED': (eventName, { chatDetails, data }) => {
        alert(`${data.ParticipantRole} joined the chat.`);
    },
    'event_Name_3': callback(function),
    'event_Name_4': callback(function),
    // ...
}); 
amazon_connect('initialMessage', 'Your initial message string');
// ... 
amazon_connect('snippetFieldHere', /* ... */);
<script/>
```

## Navegadores compatíveis
<a name="chat-widget-supported-browsers"></a>

O widget de comunicação predefinido é compatível com as seguintes versões do navegador e versões superiores: 
+ Google Chrome 85.0
+ Safari 13.1
+ Microsoft Edge versão 85
+ Mozilla Firefox 81.0

O widget de comunicação oferece suporte a notificações do navegador para dispositivos desktop. Para obter mais informações, consulte [Enviar notificações do navegador aos clientes quando receberem uma mensagem de chat](browser-notifications-chat.md).

## Etapa 1: personalizar o widget de comunicação
<a name="customize-chat-widget"></a>

Nesta etapa, você personaliza a experiência do widget de comunicação para seus clientes.

1. Faça login no site do Amazon Connect administrador em https://*instance name*.my.connect.aws/. Escolha **Personalizar widget de comunicação**.  
![\[A página do guia de configuração, o link de personalização do widget de comunicação.\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/chatwidget-customize-chat-window-button.png)

1. Na página **Widgets de comunicação**, escolha **Adicionar widget de comunicação** para começar a personalizar uma nova experiência do widget de comunicação. Para editar, excluir ou duplicar um widget de comunicação existente, escolha entre as opções na coluna **Ações**, conforme mostrado na imagem a seguir.   
![\[Na página de widgets de comunicação, adicione o link do botão do widget de comunicação.\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/chatwidget-add-chat-widget.png)

1. Insira um **Nome** e uma **Descrição** para o widget de comunicação. 
**nota**  
O nome deve ser exclusivo para cada widget de comunicação criado em uma instância do Amazon Connect. 

1. Na seção **Opções de comunicação**, escolha como os clientes podem interagir com o widget e **Salvar e continuar**.
**nota**  
Você só pode habilitar uma tarefa ou um formulário de pré-contato por e-mail se o chat e a voz não estiverem habilitados.

   A imagem a seguir mostra opções para permitir recebimentos de chat, mensagens e criar um formulário de pré-chat para os clientes. Para habilitar um formulário de pré-chat, primeiro você deve criar uma [visualização](view-resources-sg.md) com um botão de ação de conexão e selecionar a ação `StartChatContact`. Para acessar mais informações sobre formulários de pré-chat e pré-contato, consulte [Adicionar o widget do Amazon Connect ao seu site](connect-widget-on-website.md).  
![\[A página do widget de comunicação configurada para chat e chamadas pela web.\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/comm-widget-page-chat.png)

1. Na página **Criar widget de comunicação**, escolha os estilos de botão do widget e exiba nomes e estilos.

   Conforme você escolhe essas opções, a visualização do widget é atualizada automaticamente para que você possa ver como vai ficar a experiência para os clientes.  
![\[A visualização do widget de comunicação.\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/netra-chat-preview.png)

**Estilos de botão**

1. Escolha as cores do plano de fundo do botão inserindo valores hexadecimais ([códigos de cores HTML](https://htmlcolorcodes.com/)).

1. Escolha **Branco** ou **Preto** para a cor do ícone. A cor do ícone não pode ser personalizada.

**Cabeçalho do widget**

1. Forneça valores para a mensagem e a cor do cabeçalho, além da cor de fundo do widget. 

1. **URL do logotipo**: insira um URL no banner do seu logotipo a partir de um bucket do Amazon S3 ou de outra fonte online.
**nota**  
A visualização do widget de comunicação na página de personalização não exibirá o logotipo se for de uma fonte online que não seja um bucket do Amazon S3. No entanto, o logotipo será exibido quando o widget de comunicação personalizado for implementado em sua página.

   O banner deve estar no formato .svg, .jpg ou .png. A imagem pode ter 280 px (largura) por 60 px (altura). Qualquer imagem maior que essas dimensões será dimensionada para caber no espaço do componente do logotipo de 280 x 60.

   1. Para obter instruções sobre como fazer o upload de um arquivo, como o banner do seu logotipo, para o S3, consulte [Carregamento de objetos](https://docs.aws.amazon.com/AmazonS3/latest/userguide/upload-objects.html) no *Guia do usuário do Amazon Simple Storage Service*.

   1. Certifique-se de que as permissões da imagem estejam definidas corretamente para que o widget de comunicação tenha permissões para acessar a imagem. Para obter informações sobre como tornar um objeto do S3 acessível ao público, consulte [Etapa 2: adicionar uma política de bucket](https://docs.aws.amazon.com/AmazonS3/latest/userguide/WebsiteAccessPermissionsReqd.html#bucket-policy-static-site) no tópico *Configurar permissões para acesso ao site*.

**Exibição do chat**

1.  **Typeface**: use o menu suspenso para escolher a fonte do texto no widget de comunicação.

1. 
   + **Nome de exibição da mensagem do sistema**: digite um novo nome de exibição para substituir o padrão. O padrão é **SYSTEM\$1MESSAGE**.
   + **Nome de exibição da mensagem do bot**: digite um novo nome de exibição para substituir o padrão. O padrão é **BOT**.
   + **Espaço reservado para entrada de texto**: digite o novo espaço reservado para substituir o texto padrão. O padrão é **Digitar uma mensagem**. 
   + **Texto do botão Encerrar chat**: digite o novo texto para substituir o padrão. O padrão é **Encerrar chat**.

1. **Cor da bolha de chat do agente**: escolha as cores das bolhas de mensagem do atendente inserindo valores hexadecimais ([códigos de cor HTML](https://htmlcolorcodes.com/)).

1. **Cor da bolha de chat do cliente**: escolha as cores das bolhas de mensagem do cliente inserindo valores hexadecimais ([códigos de cor HTML](https://htmlcolorcodes.com/)). 

1. Escolha **Save and continue**.

## Etapa 2: especificar os domínios do site em que você espera exibir o widget de comunicação
<a name="chat-widget-domains"></a>

1. Insira os domínios do site em que você deseja colocar o widget de comunicação. O chat carrega somente nos sites selecionados nesta etapa. 

   Escolha **Adicionar domínio** para adicionar até 50 domínios.  
![\[A opção de adicionar domínio.\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/chatwidget-add-domain.png)

   Comportamento da lista de permissões de domínio:
   + Os subdomínios são incluídos automaticamente. Por exemplo, se você autorizar o site exemplo.com, todos os seus subdomínios (como sub.exemplo.com) também serão permitidos.
   + O protocolo http:// ou https:// deve corresponder exatamente à sua configuração. Especifique o protocolo exato ao configurar domínios permitidos.
   + Todos os caminhos de URL são permitidos automaticamente. Por exemplo, se exemplo.com for permitido, todas as páginas abaixo dele (como exemplo. com/cart or example.com/checkout) estão acessíveis. Você não pode permitir nem bloquear subdiretórios específicos.
**Importante**  
Verifique se seu site URLs é válido e não contém erros. Inclua o URL completo começando com https://.
Recomendamos usar https:// para sites e aplicações de produção.

1. Em **Adicionar segurança ao seu widget de comunicação**, recomendamos escolher **Sim** e trabalhar com o administrador do site para configurar seus servidores web para emitir Tokens Web JSON (JWTs) para novas solicitações de bate-papo. Isso proporciona mais controle ao iniciar novos chats, incluindo a capacidade de verificar se as solicitações de chat enviadas ao Amazon Connect são de usuários autenticados.  
![\[A ativação da segurança para novas solicitações de widgets de comunicação.\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/chatwidget-choose-security.png)

   Escolher **Sim** resulta no seguinte:
   + O Amazon Connect fornece uma chave de segurança de 44 caracteres na próxima página que você pode usar para criar JSON Web Tokens (). JWTs
   + O Amazon Connect adiciona uma função de retorno de chamada ao script de incorporação do widget de comunicação que verifica a existência de um JSON Web Token (JWT) quando um chat é iniciado.

     É necessário implementar a função de retorno de chamada no snippet incorporado, conforme mostrado no exemplo a seguir.

     ```
     amazon_connect('authenticate', function(callback) {
       window.fetch('/token').then(res => {
         res.json().then(data => {
           callback(data.data);
         });
       });
     });
     ```

   Se escolher essa opção, na próxima etapa, você receberá uma chave de segurança para todas as solicitações de chat iniciadas em seus sites. Peça ao administrador do site que configure seus servidores web para emitir JWTs o uso dessa chave de segurança. 

1. Escolha **Salvar**.

## Etapa 3: confirmar e copiar o código e as chaves de segurança do widget de comunicação
<a name="confirm-and-copy-chat-widget-script"></a>

Nesta etapa, você confirma suas seleções, copia o código do widget de comunicação e o incorpora ao seu site. Se você optar por usar JWTs na [Etapa 2](#chat-widget-domains), também poderá copiar as chaves secretas para criá-las. 

### Chave de segurança
<a name="chat-widget-security-key"></a>

Use essa chave de segurança de 44 caracteres para gerar tokens Web JSON a partir do seu servidor Web. Você também pode atualizar ou girar as chaves se precisar alterá-las. Quando você faz isso, o Amazon Connect fornece uma nova chave e mantém a chave anterior até que você tenha a chance de substituí-la. Depois de implantar a nova chave, você pode voltar ao Amazon Connect e excluir a chave anterior.

![\[A chave de segurança fornecida pelo Amazon Connect.\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/chatwidget-security-key.png)


Quando seus clientes interagem com o ícone Iniciar chat em seu site, o widget de comunicação solicita um JWT ao servidor Web. Quando esse JWT for fornecido, o widget o incluirá como parte da solicitação de chat do cliente final para o Amazon Connect. Em seguida, o Amazon Connect usa a chave secreta para descriptografar o token. Se for bem-sucedido, isso confirma que o JWT foi emitido pelo seu servidor Web e que o Amazon Connect encaminha a solicitação de chat para os atendentes da sua central de atendimento.

#### Especificações do token Web JSON
<a name="jwt"></a>
+ Algoritmo: **HS256**
+ Reivindicações:
  + **sub:** *widgetId*

    Substitua `widgetId` por seu próprio widgetId. Para encontrar o widgetID, consulte o exemplo em [Script do widget de comunicação](#chat-widget-script).
  + **iat**: \$1emitido no momento.
  + **exp**: \$1expiração (máximo de 10 minutos).
  + **segmentAttributes (opcional)**: um conjunto de pares de chave/valor definidos pelo sistema armazenados em segmentos de contato individuais usando um mapa de atributos. Para obter mais informações SegmentAttributes , consulte a [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html#connect-StartChatContact-request-SegmentAttributes)API.
  + **atributos (opcional)**: objeto com pares de string-to-string valores-chave. Os atributos de contato devem seguir as limitações definidas pela [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html#connect-StartChatContact-request-Attributes)API.
  + **relatedContactId (opcional)**: Cadeia de caracteres com ID de contato válida. Eles relatedContactId devem seguir as limitações definidas pela [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)API.
  + **customerId (opcional**): pode ser um ID do Amazon Connect Customer Profiles ou um identificador personalizado de um sistema externo, como um CRM. 

  \$1 Para obter informações sobre o formato de data, consulte o seguinte documento da Internet Engineering Task Force (IETF) [JSON Web Token (JWT)](https://tools.ietf.org/html/rfc7519), página 5. 

O snippet de código a seguir mostra um exemplo de como gerar um JWT em Python:

```
import jwt 
import datetime 
CONNECT_SECRET = "your-securely-stored-jwt-secret" 
WIDGET_ID = "widget-id" 
JWT_EXP_DELTA_SECONDS = 500

payload = { 
'sub': WIDGET_ID, 
'iat': datetime.datetime.utcnow(), 
'exp': datetime.datetime.utcnow() + datetime.timedelta(seconds=JWT_EXP_DELTA_SECONDS), 
'customerId': "your-customer-id",
'relatedContactId':'your-relatedContactId',                    
'segmentAttributes': {"connect:Subtype": {"ValueString" : "connect:Guide"}}, 'attributes': {"name": "Jane", "memberID": "123456789", "email": "Jane@example.com", "isPremiumUser": "true", "age": "45"} } 
header = { 'typ': "JWT", 'alg': 'HS256' } 
encoded_token = jwt.encode((payload), CONNECT_SECRET, algorithm="HS256", headers=header) // CONNECT_SECRET is the security key provided by Amazon Connect
```

### Script do widget de comunicação
<a name="chat-widget-script"></a>

A imagem a seguir mostra um exemplo do JavaScript que você incorpora nos sites em que deseja que os clientes conversem com os agentes. Esse script exibe o widget no canto inferior direito do seu site. 

![\[O script do widget de comunicação.\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/chatwidget-code.png)


Quando seu site carrega, os clientes veem primeiro o ícone **Iniciar**. Quando eles escolhem esse ícone, o widget de comunicação é aberto e os clientes podem enviar uma mensagem aos seus atendentes.

Para fazer alterações no widget de comunicação a qualquer momento, escolha **Editar**.

**nota**  
As alterações salvas atualizam a experiência do cliente em alguns minutos. Confirme a configuração do widget antes de salvá-lo. 

![\[O link de edição na visualização do widget.\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/chatwidget-edit.png)


Para fazer alterações nos ícones do widget no site, você receberá um novo snippet de código para atualizar seu site diretamente.

## Recebendo mensagens de erro?
<a name="chat-widget-error-messages"></a>

Se você encontrar mensagens de erro, consulte [Solucionar problemas com o widget de comunicação do Amazon Connect](ts-cw.md).

# Personalizar o comportamento de inicialização do widget e o ícone do botão para seu site hospedado no Amazon Connect
<a name="customize-widget-launch"></a>

Para personalizar ainda mais a forma como seu site renderiza e inicia o ícone do widget hospedado, você pode configurar o comportamento de inicialização e ocultar o ícone padrão. Por exemplo, você pode iniciar programaticamente o widget a partir de um elemento de botão **Fale conosco** que é renderizado em seu site.

**Topics**
+ [Como configurar o comportamento de inicialização personalizado para o widget](#config-widget-launch)
+ [Restrições e opções com suporte](#launch-options-constraints)
+ [Configurar a inicialização do widget para casos de uso personalizados](#launch-usage)
+ [Habilitar a persistência da sessão de chat em todas as guias](#chat-persistence-across-tabs)

## Como configurar o comportamento de inicialização personalizado para o widget
<a name="config-widget-launch"></a>

Para transmitir um comportamento de inicialização personalizado, use o bloco de código de exemplo a seguir e incorpore-o ao seu widget. Todos os campos mostrados no exemplo a seguir são opcionais e qualquer combinação pode ser usada.

```
amazon_connect('customLaunchBehavior', {
    skipIconButtonAndAutoLaunch: true,
    alwaysHideWidgetButton: true,
    programmaticLaunch: (function(launchCallback) {
        var launchWidgetBtn = document.getElementById('launch-widget-btn');
        if (launchWidgetBtn) {
            launchWidgetBtn.addEventListener('click', launchCallback);
            window.onunload = function() {
            launchWidgetBtn.removeEventListener('click', launchCallback);
            return;
            }
        }
    })
});
```

## Restrições e opções com suporte
<a name="launch-options-constraints"></a>

A tabela a seguir lista as opções de comportamento de inicialização personalizado com suporte. Os campos são opcionais e qualquer combinação pode ser usada.


| Nome da opção | Tipo | Description | Valor padrão  | 
| --- | --- | --- | --- | 
|  `skipIconButtonAndAutoLaunch`  | Booleano  | Uma bandeira para enable/disable o lançamento automático do widget sem que o usuário clique no carregamento da página. | não definido | 
|  `alwaysHideWidgetButton`  | Booleano  | Uma bandeira para enable/disable o botão do ícone do widget a partir da renderização (a menos que haja uma sessão de bate-papo em andamento). | não definido | 
|  `programmaticLaunch`  | Função  |  | não definido | 

## Configurar a inicialização do widget para casos de uso personalizados
<a name="launch-usage"></a>

### Botão de inicialização de widget personalizado
<a name="custom-launch-button"></a>

O exemplo a seguir mostra as alterações que você precisaria fazer no widget para configurar a inicialização programática para abrir somente quando o usuário escolhesse um elemento de botão personalizado renderizado em qualquer lugar do seu site. Por exemplo, eles podem escolher um botão chamado **Fale conosco** ou **Converse conosco**. Opcionalmente, você pode ocultar o ícone padrão do widget do Amazon Connect até que o widget seja aberto.

```
<button id="launch-widget-btn">Chat With Us</button>
```

```
<script type="text/javascript">
 (function(w, d, x, id){
    s=d.createElement("script");
    s.src="./amazon-connect-chat-interface-client.js"
    s.async=1;
    s.id=id;
    d.getElementsByTagName("head")[0].appendChild(s);
    w[x] =  w[x] || function() { (w[x].ac = w[x].ac || []).push(arguments) };
  })(window, document, 'amazon_connect', 'asfd-asdf-asfd-asdf-asdf');
  amazon_connect('styles', { openChat: { color: '#000', backgroundColor: '#3498fe'}, closeChat: { color: '#fff', backgroundColor: '#123456'} });
  amazon_connect('snippetId', "QVFJREFsdafsdfsadfsdafasdfasdfsdafasdfz0=")
  amazon_connect('customLaunchBehavior', {
        skipIconButtonAndAutoLaunch: true,
        alwaysHideWidgetButton: true,
        programmaticLaunch: (function(launchCallback) {
            var launchWidgetBtn = document.getElementById('launch-widget-btn');
            if (launchWidgetBtn) {
                launchWidgetBtn.addEventListener('click', launchCallback);
                window.onunload = function() {
                launchWidgetBtn.removeEventListener('click', launchCallback);
                return;
                }
            }
        }),
    });
</script>
```

### Suporte de hiperlinks
<a name="hyperlink-support"></a>

O exemplo a seguir mostra as alterações que você precisaria fazer na configuração do widget `auto-launch`, que abre o widget sem esperar que o usuário clique. Você pode implantar em uma página hospedada pelo seu site para criar um hiperlink compartilhável.

```
https://example.com/contact-us?autoLaunchMyWidget=true
```

```
<script type="text/javascript">
 (function(w, d, x, id){
    s=d.createElement("script");
    s.src="./amazon-connect-chat-interface-client.js"
    s.async=1;
    s.id=id;
    d.getElementsByTagName("head")[0].appendChild(s);
    w[x] =  w[x] || function() { (w[x].ac = w[x].ac || []).push(arguments) };
  })(window, document, 'amazon_connect', 'asfd-asdf-asfd-asdf-asdf');
  amazon_connect('styles', { openChat: { color: '#000', backgroundColor: '#3498fe'}, closeChat: { color: '#fff', backgroundColor: '#123456'} });
  amazon_connect('snippetId', "QVFJREFsdafsdfsadfsdafasdfasdfsdafasdfz0=")
  amazon_connect('customLaunchBehavior', {
        skipIconButtonAndAutoLaunch: true
    });
</script>
```

### Carregar ativos do widget quando o botão é clicado
<a name="load-assets"></a>

O exemplo a seguir mostra as alterações que você precisaria fazer no widget para acelerar o carregamento da página do seu site, buscando os ativos estáticos do widget quando um usuário clica no botão **Converse conosco**. Normalmente, apenas uma pequena porcentagem dos clientes que visitam uma página de **Fale conosco** abre o widget do Amazon Connect. O widget pode estar adicionando latência no carregamento da página ao buscar arquivos do CDN, mesmo que os clientes nunca abram o widget.

Uma solução alternativa é executar o código do snippet de forma assíncrona (ou nunca) ao clicar no botão. 

```
<button id="launch-widget-btn">Chat With Us</button>
```

```
var buttonElem = document.getElementById('launch-widget-btn');

buttonElem.addEventListener('click', function() {
    (function(w, d, x, id){
        s=d.createElement("script");
        s.src="./amazon-connect-chat-interface-client.js"
        s.async=1;
        s.id=id;
        d.getElementsByTagName("head")[0].appendChild(s);
        w[x] =  w[x] || function() { (w[x].ac = w[x].ac || []).push(arguments) };
    })(window, document, 'amazon_connect', 'asfd-asdf-asfd-asdf-asdf');
    amazon_connect('styles', { openChat: { color: '#000', backgroundColor: '#3498fe'}, closeChat: { color: '#fff', backgroundColor: '#123456'} });
    amazon_connect('snippetId', "QVFJREFsdafsdfsadfsdafasdfasdfsdafasdfz0=")
    amazon_connect('customLaunchBehavior', {
        skipIconButtonAndAutoLaunch: true
    });
});
```

### Iniciar um novo chat em uma janela do navegador
<a name="new-chat-browser-window"></a>

O exemplo a seguir mostra as alterações que você precisaria fazer no widget para abrir uma nova janela do navegador e iniciar automaticamente o chat em tela cheia.

```
<button id="openChatWindowButton">Launch a Chat</button>
```

```
<script> // Function to open a new browser window with specified URL and dimensions
    function openNewWindow() {
        var url = 'https://mycompany.com/support?autoLaunchChat=true';

        // Define the width and height
        var width = 300;
        var height = 540;

        // Calculate the left and top position to center the window
        var left = (window.innerWidth - width) / 2;
        var top = (window.innerHeight - height) / 2;

        // Open the new window with the specified URL, dimensions, and position
        var newWindow = window.open(url, '', 'width=${width}, height=${height}, left=${left}, top=${top}');
    }

    // Attach a click event listener to the button
    document.getElementById('openChatWindowButton').addEventListener('click', openNewWindow);
</script>
```

## Habilitar a persistência da sessão de chat em todas as guias
<a name="chat-persistence-across-tabs"></a>

Por padrão, se um chat for aberto em uma guia e, depois, o usuário abrir uma nova guia e iniciar outro chat, um novo chat será iniciado em vez de se conectar ao chat existente. Você poderá habilitar a persistência da sessão de chat em todas as guias se quiser que o usuário se conecte ao chat existente na guia inicial. 

A sessão de chat é salva no armazenamento da sessão no navegador, na variável `persistedChatSession`. Você precisará copiar esse valor no armazenamento da sessão da nova guia quando o widget for inicializado pela primeira vez. Veja as instruções.

Para se conectar à mesma sessão de chat quando o usuário navega para subdomínios diferentes, você pode definir a propriedade de domínio do cookie. Por exemplo, você tem dois subdomínios: `domain1.example.com` e `domain2.example.com`. É possível adicionar a propriedade `domain=.example.com` para que o cookie possa ser acessado de todos os subdomínios.

1. Copie o código a seguir ao lado das outras funções amazon\$1connect no trecho do widget hospedado. Isso usa os manipuladores de eventos `registerCallback` para armazenar o `persistedChatSession` como um cookie para que possam ser acessados na nova guia. Também limpa o cookie quando o chat termina.

   

   ```
   amazon_connect('registerCallback', {
   'CONNECTION_ESTABLISHED': (eventName, { chatDetails, data }) => {
    document.cookie = `activeChat=${sessionStorage.getItem("persistedChatSession")}; SameSite=None; Secure`;
   }, 
   'CHAT_ENDED': () => {
     document.cookie = "activeChat=; SameSite=None; Secure";
   }
   });
   ```

1. Recupere o valor do cookie, se ele existir, e defina o valor de armazenamento da sessão na nova guia.

   ```
   const cookie = document.cookie.split('; ').find(c => c.startsWith('activeChat='));
   if (cookie) {
     const activeChatValue = cookie.split('=')[1];
     sessionStorage.setItem('persistedChatSession', activeChatValue);
   }
   
   //Your hosted widget snippet should be on this page
   ```

# Transmitir o nome de exibição do cliente quando um chat do Amazon Connect é iniciado
<a name="pass-display-name-chat"></a>

Para oferecer uma experiência mais personalizada para seus clientes e atendentes, você pode personalizar o widget de comunicação do Amazon Connect para transmitir o nome de exibição do cliente durante a inicialização do contato. O nome fica visível tanto para o cliente quanto para o atendente durante toda a interação do chat. Esse nome de exibição é registrado na transcrição do chat.

As imagens a seguir mostram o nome de exibição do cliente em sua experiência de chat e seu nome no CCP do atendente.

![\[O nome do cliente na experiência de chat, o nome do cliente no CCP do atendente.\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/chatwidget-displayname.png)


1. Como o nome de exibição do cliente pode aparecer para o cliente usando a interface de usuário do chat.

1. Como o nome de exibição do cliente pode aparecer para o atendente que usa o CCP.

## Como transmitir o nome de exibição de um cliente no widget de comunicação
<a name="setup-display-name"></a>

Para transmitir o nome de exibição do cliente, implemente sua função de retorno de chamada no snippet. O Amazon Connect recupera o nome de exibição automaticamente.

1. Caso ainda não tenha feito, conclua as etapas em [Adicionar uma interface de usuário de chat ao seu site hospedado pelo Amazon Connect](add-chat-to-website.md).

1. Aumente seu snippet de widget existente para adicionar um retorno de chamada `customerDisplayName`. A aparência pode ser igual a este exemplo:

   ```
   amazon_connect('customerDisplayName', function(callback) {
     const displayName = 'Jane Doe';
     callback(displayName);
   });
   ```

   O importante é que o nome seja transmitido para `callback(name)`.

## O que é preciso saber sobre o nome de exibição do cliente
<a name="setup-display-name-important-notes"></a>
+ Somente uma função `customerDisplayName` pode existir por vez.
+ O nome de exibição do cliente deve seguir as limitações definidas pela [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html#connect-Type-ParticipantDetails-DisplayName)API. Ou seja, o nome deve ser uma string de 1 a 256 caracteres.
+ Uma string vazia, nula ou indefinida é uma entrada inválida para o nome de exibição. Para se proteger contra a transmissão acidental dessas entradas, o widget registra um erro, `Invalid customerDisplayName provided`, no console do navegador e, em seguida, inicia o chat com o nome de exibição padrão, **Cliente**.
+ Como o snippet está no front-end do seu site, não transmita dados confidenciais como nome de exibição. Siga as práticas de segurança apropriadas para manter seus dados seguros e se proteger contra ataques e atendentes mal-intencionados.

# Transmitir atributos de contato para um atendente Painel de controle do contato (CCP) quando um chat é iniciado
<a name="pass-contact-attributes-chat"></a>

Você pode usar [atributos de contato](what-is-a-contact-attribute.md) para capturar informações sobre o contato que está usando o widget de comunicação. Em seguida, você pode exibir essas informações para o atendente por meio do Painel de Controle de Contato (CCP) ou usá-las em outro lugar no fluxo.

Por exemplo, você pode personalizar seu fluxo para dizer o nome do cliente em sua mensagem de boas-vindas. Ou você pode usar atributos específicos da sua empresa, como identificadores de clientes account/member IDs, como nomes e e-mails, ou outros metadados associados a um contato.

## Como transmitir atributos de contato para o widget de comunicação
<a name="how-to-contact-attributes-chatwidget"></a>

1. Ative a segurança no widget de comunicação conforme descrito em [Adicionar uma interface de usuário de chat ao seu site hospedado pelo Amazon Connect](add-chat-to-website.md), caso ainda não tenha feito isso:

   1. Na Etapa 2, em **Adicionar segurança ao widget de chat**, escolha **Sim**.

   1. Na Etapa 3, use a chave de segurança para gerar tokens Web JSON.

1. Adicione os atributos de contato à carga útil do JWT como uma reivindicação `attributes`.

   Veja a seguir um exemplo de como você pode gerar um JWT com atributos de contato em Python:
**nota**  
O JWT deve ser instalado como pré-requisito. Para instalá-lo, execute `pip install PyJWT` em seu terminal.

   ```
   import jwt 
   import datetime 
   CONNECT_SECRET = "your-securely-stored-jwt-secret" 
   WIDGET_ID = "widget-id" 
   JWT_EXP_DELTA_SECONDS = 500
   
   payload = { 
   'sub': WIDGET_ID, 
   'iat': datetime.datetime.utcnow(), 
   'exp': datetime.datetime.utcnow() + datetime.timedelta(seconds=JWT_EXP_DELTA_SECONDS), 
   'segmentAttributes': {"connect:Subtype": {"ValueString" : "connect:Guide"}}, 'attributes': {"name": "Jane", "memberID": "123456789", "email": "Jane@example.com", "isPremiumUser": "true", "age": "45"} } 
   header = { 'typ': "JWT", 'alg': 'HS256' } 
   encoded_token = jwt.encode((payload), CONNECT_SECRET, algorithm="HS256", headers=header) // CONNECT_SECRET is the security key provided by Amazon Connect
   ```

   Na carga, você deve criar uma chave de string `attributes` (no estado em que se encontra, toda em minúsculas), com um objeto como valor. Esse objeto deve ter pares de string-to-string valores-chave. Se algo diferente de uma string for passado em qualquer um dos atributos, o chat não será iniciado. 

   Os atributos de contato devem seguir as limitações definidas pela [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html#connect-StartChatContact-request-Attributes)API: 
   + As chaves devem ter um comprimento mínimo de 1
   + Os valores podem ter um comprimento mínimo de 0

Opcionalmente, você pode adicionar a string segmentAttributes ao mapa de [SegmentAttributeValue](https://docs.aws.amazon.com/connect/latest/APIReference/API_SegmentAttributeValue.html)objetos, na carga útil. Os atributos são Amazon Connect atributos padrão. Eles podem ser acessados nos fluxos. Os atributos de contato devem seguir as limitações definidas pela [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html#connect-StartChatContact-request-SegmentAttributes)API.

## Método alternativo: Transmitir atributos de contato diretamente do código do trecho
<a name="pass-attributes-directly"></a>

**nota**  
O código do trecho anexa `HostedWidget-` a todas as chaves de atributos de contato que ele passa. No exemplo a seguir, o lado do atendente verá o par de chave/valor `HostedWidget-foo: 'bar'`.
Embora esses atributos estejam no escopo do prefixo `HostedWidget-`, eles ainda são mutáveis no lado do cliente. Use a configuração do JWT se precisar de PII ou dados imutáveis no fluxo. 

O exemplo a seguir mostra como transmitir atributos de contato diretamente do código do trecho sem habilitar a segurança do widget. 

```
<script type="text/javascript">
  (function(w, d, x, id){ /* ... */ })(window, document, 'amazon_connect', 'widgetId');
  amazon_connect('snippetId', 'snippetId');
  amazon_connect('styles', /* ... */);
  // ...

  amazon_connect('contactAttributes', {
   foo: 'bar'
  })
<script/>
```

### Usar os atributos em fluxos
<a name="contact-flow-usage-chat"></a>

O bloco de fluxo [Verificar atributos do contato](check-contact-attributes.md) fornece acesso a esses atributos usando o namespace **definido pelo usuário**, conforme mostrado na imagem a seguir. Você pode usar o bloco de fluxo para adicionar lógica de ramificação. O caminho completo é `$.Attributes.HostedWidget-attributeName`.

![\[Imagem mostrando um bloco de fluxo se ramificando em prompts válidos e inválidos.\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/flow-check-contact-attrib.png)


## Coisas que você precisa saber
<a name="contact-attributes-chatwidget-important-notes"></a>
+ O widget de comunicação tem um limite de 6144 bytes para todo o token codificado. Como JavaScript usa a codificação UTF-16, são usados 2 bytes por caractere, portanto, o tamanho máximo do `encoded_token` deve ser em torno de 3.000 caracteres.
+ O encoded\$1token deve ser passado para `callback(data)`. O snippet `authenticate` não precisa de nenhuma alteração adicional. Por exemplo:

  ```
  amazon_connect('authenticate', function(callback) {
    window.fetch('/token').then(res => {
      res.json().then(data => {
        callback(data.data);
      });
    });
  });
  ```
+ Usar um JWT para transmitir atributos de contato garante a integridade dos dados. Se você proteger o segredo compartilhado e seguir as práticas de segurança apropriadas, poderá ajudar a garantir que os dados não sejam manipulados por um atendente mal-intencionado.
+ Os atributos de contato são codificados somente no JWT, não criptografados, então é possível decodificar e ler os atributos.
+ Se você quiser testar a experiência de chat com a [experiência de chat simulada](chat-testing.md#test-chat) e incluir atributos de contato, coloque a chave e o valor entre aspas, conforme mostrado na imagem a seguir.  
![\[A página de configurações do teste, uma chave de atributo de contato entre aspas, um valor entre aspas.\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/test-chat-contact-attributes.png)

# Personalizações adicionais para seu widget de chat do Amazon Connect
<a name="pass-customization-object"></a>

Você pode adicionar as seguintes personalizações opcionais à interface de usuário do chat:
+ Exiba o botão **Encerrar chat** no menu suspenso do cabeçalho, e não no rodapé.
+ Mascare ou oculte nomes de exibição.
+ Adicione ícones de mensagem.
+ Substitua mensagens de eventos.
+ Configure uma caixa de diálogo de confirmação que será apresentada aos clientes quando eles escolherem o botão **Encerrar chat**. Essa caixa de diálogo verifica se os clientes pretendem realmente encerrar a sessão de chat. Você pode personalizar a caixa de diálogo de confirmação, o título, a mensagem e o texto do botão.
+ Substitua a mensagem de rejeição do anexo.

## Configurar o objeto de personalização
<a name="configure-customization-object"></a>

Este exemplo mostra como implementar algumas das personalizações opcionais. Consulte uma lista de todas as personalizações possíveis em [Restrições e opções com suporte](#customization-options-constraints). Como essas personalizações são opcionais, você pode implementar alguns ou todos os campos mostrados no exemplo a seguir. Substitua as strings `eventNames.customer`, `eventNames.agent`, `eventNames.supervisor`, `eventMessages.participantJoined`, `eventMessages.participantDisconnect`, `eventMessages.participantLeft`, `eventMessages.participantIdle`, `eventMessages.participantReturned` e `eventMessages.chatEnded` conforme necessário. Os ícones devem ser hospedados em público URLs.

```
amazon_connect('customizationObject', {
        header: { 
            dropdown: true, 
            dynamicHeader: true,
        },
        transcript: { 
            hideDisplayNames: false, 
            eventNames: {
                customer: "User",
                agent: "Webchat Agent",
                supervisor: "Webchat Supervisor"
            },
            eventMessages: {
                participantJoined: "{name} has joined the chat",
                participantDisconnect: "",
                participantLeft: "{name} has dropped",
                participantIdle: "{name}, are you still there?",
                participantReturned: "",
                chatEnded: "Chat ended",
            },
            displayIcons: true,
            iconSources: { 
                botMessage: "imageURL",
                systemMessage: "imageURL",
                agentMessage: "imageURL",
                customerMessage: "imageURL",
            },
        },
        composer: {
            disableEmojiPicker: true,
            disableCustomerAttachments: true,
            alwaysHideToolbar: true,
            hide: false,
        },
        footer: {
            disabled:true,
            skipCloseChatButton: true,
        },
        endChat: {
            enableConfirmationDialog: true,
            confirmationDialogText: {
                title: "End Chat",
                message: "Are you sure you want to end this chat?",
                confirmButtonText: "End Chat",
                cancelButtonText: "Cancel",
        },
    },
    attachment: {
         // Default rejectedErrorMessage: Attachment was rejected.
        rejectedErrorMessage: "Custom Error Message: Files cannot exceed 15 MB." //this is customizable attribute 
    }
});
```

A imagem a seguir mostra a aparência das personalizações se você usar o exemplo:

![\[Diagrama mostrando os nomes de exibição, os locais de menu, os ícones personalizáveis e a caixa de diálogo de confirmação Encerrar chat.\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/chat-customization-diagram2.png)


## Restrições e opções com suporte
<a name="customization-options-constraints"></a>

A tabela a seguir lista os campos de personalização compatíveis e as restrições de valores recomendadas.


| Opção de layout personalizado | Tipo | Descrição | 
| --- | --- | --- | 
|  `header.dropdown`  |  Booleano  |  Renderiza o menu suspenso do cabeçalho, em vez do rodapé padrão  Quando você define essa opção como`true`, o botão **Download da transcrição** aparece e permanece visível até que você defina a opção como `false`, ou até que você remova a opção.   | 
| `header.dynamicHeader` | Booleano | Define dinamicamente o título do cabeçalho como “Conversando com Bot/AgentName”. | 
| `header.hideTranscriptDownloadButton` | Booleano | Oculta o botão da [fazer download da transcrição](chat-widget-download-transcript.md) no menu suspenso do cabeçalho. O valor padrão é false. | 
|  `transcript.hideDisplayNames`  |  Booleano  |  Oculta todos os nomes de exibição, aplicará máscaras de nome padrão se `eventNames` não for fornecido.  | 
|  `transcript.eventNames.customer`  |  String  |  Mascara o nome de exibição do cliente.  | 
|  `transcript.eventNames.agent`  |  String  |  Mascara o nome de exibição do atendente.  | 
|  `transcript.eventNames.supervisor`  |  String  |  Mascara o nome de exibição do supervisor.  | 
|  ` transcript.eventMessages.participantJoined`  |  String  |  Substitui a mensagem do evento na transcrição para quando um participante entrou no chat. Se uma string vazia for especificada, a mensagem do evento será omitida da transcrição. O `{name}` pode ser transmitido na mensagem e será substituído pelo nome de exibição do participante correspondente. A mensagem padrão é `{name} has joined the chat`.   | 
|  `transcript.eventMessages.participantDisconnect`  |  String  |  Substitui a mensagem de evento na transcrição para quando um participante é desconectado do chat. Se uma string vazia for especificada, a mensagem do evento será omitida da transcrição. O `{name}` pode ser transmitido na mensagem e será substituído pelo nome de exibição do participante correspondente. A mensagem padrão é \$1`name} has been idle too long, disconnecting`.  | 
|  `transcript.eventMessages.participantLeft`  |  String  |  Substitui a mensagem do evento na transcrição para quando um participante entrou no chat. Se uma string vazia for especificada, a mensagem do evento será omitida da transcrição. O `{name}` pode ser transmitido na mensagem e será substituído pelo nome de exibição do participante correspondente. A mensagem padrão é `{name} has left the chat`.  | 
|  `transcript.eventMessages.participantIdle`  |  String  |  Substitui a mensagem do evento na transcrição para quando um participante está ocioso. Se uma string vazia for especificada, a mensagem do evento será omitida da transcrição. O `{name}` pode ser transmitido na mensagem e será substituído pelo nome de exibição do participante correspondente. A mensagem padrão é `{name} has become idle`.  | 
|  `transcript.eventMessages.participantReturned`  |  String  |  Substitui a mensagem do evento na transcrição para quando um participante voltou ao chat. Se uma string vazia for especificada, a mensagem do evento será omitida da transcrição. O `{name} ` pode ser transmitido na mensagem e será substituído pelo nome de exibição do participante correspondente. A mensagem padrão é `{name} has returned`.  | 
|  `transcript.eventMessages.chatEnded`  |  String  |  Substitui a mensagem do evento na transcrição para quando o chat terminou. Se uma string vazia for especificada, a mensagem do evento será omitida da transcrição. O `{name}` pode ser transmitido na mensagem e será substituído pelo nome de exibição do participante correspondente. A mensagem padrão é `Chat has ended!`  | 
|  `transcript.displayIcons`  |  Booleano  |  Habilita ícones de exibição da mensagem.  | 
|  `transcript.iconSources.botMessage`  |  String  |  Ícone exibido para mensagens de bot, deve estar hospedado em um URL público.  | 
|  `transcript.iconSources.systemMessage`  |  String  |  Ícone exibido para mensagem de sistema, deve estar hospedado em um URL público.  | 
|  `transcript.iconSources.agentMessage`  |  String  |  Ícone exibido para mensagem de atendente, deve estar hospedado em um URL público.  | 
|  `transcript.iconSources.customerMessage`  |  String  |  Ícone exibido para mensagem de cliente, deve estar hospedado em um URL público.  | 
|  `composer.alwaysHideToolbar`  |  Booleano  |  Oculta a barra de ferramentas de formatação que inclui recursos de estilo de texto, como negrito, itálico e opções de listas numeradas e com marcadores.  | 
|  `composer.disableEmojiPicker`  |  Booleano  |  Desabilita o seletor de emojis ao usar o [editor de rich text.](enable-text-formatting-chat.md)  | 
| `composer.disableCustomerAttachments` | Booleano | Impede que os clientes enviem ou façam upload de anexos. | 
| `composer.hide` | Booleano | Esconde o compositor (`true`) ou o mostra (`false`). Para alternar o compositor com base em eventos (como quando um agente se junta), use `registerCallback` com o método. `hideComposer` Para obter mais informações, consulte [Campos de trechos de widget compatíveis no Amazon Connect que são personalizáveis](supported-snippet-fields.md).<pre>document.getElementById("amazon-connect-chat-widget-iframe").contentWindow.connect.ChatInterface.hideComposer(false)</pre> | 
|  `footer.disabled`  |  Booleano  |  Oculta o rodapé padrão e o botão **Encerrar chat**.  | 
|  `footer.skipCloseChatButton`  |  Booleano  |  Fecha diretamente o widget ao clicar no botão **Encerrar chat** em vez de mostrar o botão **Fechar**.  | 
| `endChat.enableConfirmationDialog` | Booleano | Habilita a caixa de diálogo de confirmação Encerrar chat. Os textos padrão serão usados se confirmationDialogText não for fornecido. | 
| `endChat.confirmationDialogText.title` | String | Substitui o título da caixa de diálogo de confirmação Encerrar chat. | 
| `endChat.confirmationDialogText.message` | String | Substitui a mensagem da caixa de diálogo de confirmação Encerrar chat. | 
| `endChat.confirmationDialogText.confirmButtonText` | String | Substitui o texto do botão de confirmação na caixa de diálogo de confirmação Encerrar chat. | 
| `endChat.confirmationDialogText.cancelButtonText` | String | Substitui o texto do botão de cancelamento na caixa de diálogo de confirmação Encerrar chat. | 
| `attachment.rejectedErrorMessage` | String | Substitui a mensagem de erro para rejeição do anexo do widget de chat. | 

# Baixar a transcrição do widget de chat no Amazon Connect
<a name="chat-widget-download-transcript"></a>

Você pode baixar um PDF da transcrição no widget de chat.

**Topics**
+ [Habilitar o menu suspenso do cabeçalho](#chat-widget-download-transcript-enable-header-dropdown)
+ [Baixar o PDF da transcrição do chat](#chat-widget-download-transcript-pdf)

## Habilitar o menu suspenso do cabeçalho
<a name="chat-widget-download-transcript-enable-header-dropdown"></a>

O botão para baixar a transcrição está em um menu suspenso no cabeçalho. Para habilitar o menu suspenso do cabeçalho, precisamos configurar o [customizationObject](pass-customization-object.md) do widget de chat no script do widget.

```
amazon_connect('customizationObject', {
        header: { 
            dropdown: true, 
        }
});
```

Tenha em mente que habilitar o menu suspenso automaticamente desabilita o rodapé, visto que a funcionalidade **Encerrar chat** é movida para o menu suspenso do cabeçalho. Se quiser manter o rodapé, é possível habilitá-lo novamente da seguinte forma:

```
amazon_connect('customizationObject', {
        header: { 
            dropdown: true, 
        },
        footer: {
            disabled: false,
        }
});
```

## Baixar o PDF da transcrição do chat
<a name="chat-widget-download-transcript-pdf"></a>

Depois de habilitar o menu suspenso no cabeçalho, um menu de três pontos será exibido no canto superior esquerdo do widget de chat. Nesse menu suspenso, há um botão para baixar a **transcrição de chat**.

![\[Mostra o botão para baixar a transcrição de chat.\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/chat-widget-download-transcript-pdf-1.png)


Escolher baixar a **transcrição de chat** iniciará o download do PDF. O PDF da transcrição de chat mostrará todas as mensagens, nomes de exibição, registros de data e hora e eventos de mensagens, como participantes saindo ou entrando.

![\[Exemplo de transcrição de chat baixada.\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/chat-widget-download-transcript-pdf-2.png)


# Personalizar o chat com o exemplo de código aberto do Amazon Connect
<a name="download-chat-example"></a>

Você pode personalizar ainda mais a experiência de chat que os clientes usam para interagir com os atendentes. Use a [biblioteca de código aberto Amazon Connect](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/cloudformationTemplates/asyncCustomerChatUX) em GitHub. É uma plataforma para ajudar você a começar rapidamente. Como isso funciona:
+ O GitHub repositório é vinculado a um CloudFormation modelo, que inicia o endpoint do Amazon API Gateway que inicia uma função Lambda. Você pode usar esse modelo como exemplo.
+ Depois de criar a AWS CloudFormation pilha, você pode chamar essa API do seu aplicativo, importar o widget de comunicação pré-criado, passar a resposta para o widget e começar a conversar. 

Para obter mais informações sobre a personalização da experiência de chat, consulte: 
+ [Documentação da API do Amazon Connect Service](https://docs.aws.amazon.com/connect/latest/APIReference/welcome.html), especialmente a [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)API. 
+  [API do serviço de participante do Amazon Connect](https://docs.aws.amazon.com/connect-participant/latest/APIReference/Welcome.html). 
+  [Amazon Connect Streams](https://github.com/aws/amazon-connect-streams). Use para integrar as aplicações existentes ao Amazon Connect. Você pode incorporar os componentes do Painel de controle do contato (CCP) em seu aplicativo. 
+ [SDK de chat do Amazon Connect e implementações de exemplo](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/) 

# Inicie bate-papos em seus aplicativos usando o Amazon Connect APIs
<a name="integrate-with-startchatcontact-api"></a>

Use a StartChatContact API no Amazon Connect APIs para iniciar bate-papos em seus próprios aplicativos.

Para iniciar um bate-papo, use a [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)API.

Ao começar a explorar a experiência de chat pela primeira vez, você notará que os chats não são contabilizados na métrica **Contatos recebidos** no relatório de métricas históricas. Isso ocorre porque o método de iniciação do chat no registro de contato é **API**. 

A imagem a seguir de um registro de contato mostra o *Método de Iniciação* definido como *API*. 

![\[Um registro de contato, o método de iniciação definido como API.\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/ctr-api.png)


Depois que um bate-papo é transferido para um agente, a métrica **Contacts Incoming (Contatos recebidos)** é incrementada. O registro de contato da transferência não incrementa mais a API, mas incrementa **Contatos recebidos**. 

# Enviar notificações do navegador aos clientes quando receberem uma mensagem de chat
<a name="browser-notifications-chat"></a>

O widget de comunicação oferece suporte a notificações do navegador para seus clientes por meio de seus dispositivos desktop. Especificamente, seus clientes receberão uma notificação por meio do navegador quando receberem uma nova mensagem, mas não estiverem ativos na página da web que contém a janela de chat. Quando os clientes clicam ou tocam nessa notificação, eles são automaticamente redirecionados para a página da web que contém a janela de chat. Os clientes podem habilitar ou desabilitar as notificações no início de cada conversa no chat. 

A imagem a seguir mostra um exemplo do banner de notificação que os clientes recebem quando não estão na página da web que contém a janela de chat. O banner informa aos clientes que eles têm uma nova mensagem e exibe o nome do site. 

![\[Um banner do Google Chrome que diz que você recebeu uma nova mensagem.\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/chatwidget-notification-banner.png)


Os clientes também recebem um ícone de notificação — um ponto vermelho — no widget de comunicação quando ele é minimizado. A imagem a seguir mostra uma imagem do ícone de notificação que os clientes recebem quando a janela de chat é minimizada.

![\[Um ícone de notificação.\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/chatwidget-browser-notification.png)


Esses dois recursos são incluídos automaticamente no widget de comunicação. Você não precisa realizar nenhuma etapa para disponibilizá-los aos clientes.

Seus clientes recebem uma allow/deny notificação pop-up quando iniciam um bate-papo e ainda não permitiram notificações do seu site ou domínio. Depois de conceder permissões de notificação, eles começam a receber notificações do navegador sobre qualquer mensagem ou anexo enviado pelo atendente quando não estão na página da web com a janela de chat. Esse comportamento se aplica mesmo se você já tiver implementado o widget de comunicação.

## Como testar
<a name="test-browser-notifications-chat"></a>

1. Depois de permitir notificações como cliente de teste e o atendente estar conectado ao chat, minimize a janela de chat e abra uma nova instância do navegador para que você não esteja na página da web que contém a janela de chat.

1. Envie uma mensagem da janela do atendente.

1. Como cliente de teste, você verá o banner de notificação.

1. Escolha ou toque no banner de notificação. Você acessará automaticamente a página da web que contém a janela de chat.

1. Como você minimizou a janela de chat anteriormente, também verá um ícone de notificação — um ponto vermelho — no widget de comunicação.

Se você não conseguir ver a notificação do navegador, verifique o seguinte: 
+ Você está usando um [navegador compatível](add-chat-to-website.md#chat-widget-supported-browsers).
+ A permissão de notificação está allowed/enabled no seu navegador para a página da web com janela de bate-papo.
+ O agente (ou você da sua sessão de bate-papo com o agente) enviou uma nova message/attachment enquanto você estava em uma página da web diferente daquela que contém a janela de bate-papo. Para que o ícone de notificação — um ponto vermelho — no widget fique visível, minimize sua janela de chat.
+ As notificações do navegador não são adiadas (temporariamente descartadas).

# Desconectar programaticamente a sessão de chat de um widget de comunicação do Amazon Connect
<a name="programmatic-chat-disconnect"></a>

Você pode desconectar a sessão de bate-papo de um widget de comunicação programaticamente usando 'JavaScript chamando o `disconnect` método armazenado no widget. `iframe` No documento host do widget, você pode fazer referência à função `disconnect` usando o seguinte trecho de código: 

```
document.getElementById("amazon-connect-chat-widget-iframe").contentWindow.connect.ChatSession.disconnect()
```

Você pode adicioná-lo facilmente ao script de widget existente. Veja a seguir um exemplo de trecho de código:

```
<script type="text/javascript">
  (function(w, d, x, id){
    s=d.createElement('script');
    s.src='https://your-instance-alias.my.connect.aws/connectwidget/static/amazon-connect-chat-interface-client.js';
    s.async=1;
    s.id=id;
    d.getElementsByTagName('head')[0].appendChild(s);
    w[x] =  w[x] || function() { (w[x].ac = w[x].ac || []).push(arguments) };
  })(window, document, 'amazon_connect', '...');
  amazon_connect('styles', { iconType: 'CHAT', openChat: { color: '#ffffff', backgroundColor: '#123456' }, closeChat: { color: '#ffffff', backgroundColor: '#123456'} });
  amazon_connect('snippetId', '...');
  amazon_connect('supportedMessagingContentTypes', [ 'text/plain', 'text/markdown', 'application/vnd.amazonaws.connect.message.interactive', 'application/vnd.amazonaws.connect.message.interactive.response' ]);
 
  // Add disconnect event listener
  window.addEventListener("pagehide", () => {
      document.getElementById("amazon-connect-chat-widget-iframe").contentWindow.connect.ChatSession.disconnect();
  });
</script>
```

## Implementação e casos de uso
<a name="implementation-chat-disconnect"></a>

Desconectar chamadas programaticamente pode ser útil em vários casos. O método oferece maior controle sobre quando encerrar a conversa, além do clique manual no botão `End Chat`. Veja a seguir alguns casos de uso comuns de quando chamar `disconnect`.

### No encerramento ou na navegação
<a name="close-chat-disconnect"></a>

Um caso de uso comum seria anexar a funcionalidade de desconexão a eventos que são acionados quando o contexto do navegador ou da guia é encerrado. `pagehide` e `beforeunload` são os eventos comuns acionados ao encerrar o navegador. Eles são acionados quando um usuário atualiza, navega para um URL diferente ou fecha a guia ou o navegador. Embora os dois eventos sejam acionados quando o contexto do navegador é encerrado, não há garantia de que a função `disconnect` possa ser totalmente executada antes que os recursos do navegador sejam limpos.

`pagehide` é um evento de ciclo de vida de página mais moderno e comporta todos os principais navegadores e sistemas operacionais. `beforeunload` é um evento alternativo para tentar se o evento `pagehide` não chamar a desconexão de forma consistente. `beforeunload`é acionado antes de `pagehide`, o que pode proporcionar confiabilidade adicional caso a função `disconnect` não seja concluída antes que o navegador seja fechado. Houve problemas de confiabilidade em relação a `beforeunload`, principalmente em dispositivos iOS.

Veja a seguir um exemplo de trecho de código:

```
// Call disconnect when `beforeunload` triggers
window.addEventListener("beforeunload", (event) => {
    document.getElementById("amazon-connect-chat-widget-iframe").contentWindow.connect.ChatSession.disconnect();
});

// Call disconnect when `pagehide` triggers
window.addEventListener("pagehide", (event) => {
    document.getElementById("amazon-connect-chat-widget-iframe").contentWindow.connect.ChatSession.disconnect();
});
```

### Na alternância de contextos
<a name="context-chat-disconnect"></a>

Outro caso de uso seria acionar uma desconexão quando o usuário alterna contextos, como quando um usuário alterna ou minimiza tab/app ou bloqueia sua tela. O evento `visibilitychange` pode lidar de forma confiável com esses cenários em que o contexto não está mais visível.

Veja a seguir um exemplo de trecho de código:

```
window.addEventListener("visibilitychange", () => {
    if (document.visibilityState === "hidden") {
        document.getElementById("amazon-connect-chat-widget-iframe").contentWindow.connect.ChatSession.disconnect();
    } else if (document.visibilityState === "visible") {
        ...
    }
});
```

# Transmitir propriedades personalizadas para substituir os padrões no widget de comunicação do Amazon Connect
<a name="pass-custom-styles"></a>

Para personalizar ainda mais a interface de usuário do chat, você pode substituir as propriedades padrão transmitindo seus próprios valores. Por exemplo, você pode definir a largura do widget como 400 pixels e a altura como 700 pixels (em contraste com o tamanho padrão de 300 pixels por 540 pixels). Você também pode usar as cores e tamanhos de fonte de sua preferência.

## Como transmitir estilos personalizados para o widget de comunicação
<a name="chat-widget-pass-custom-styles"></a>

Para transmitir estilos personalizados, use o bloco de código de exemplo a seguir e incorpore-o ao seu widget. Amazon Connect recupera os estilos personalizados automaticamente. Todos os campos mostrados no exemplo a seguir são opcionais.

```
amazon_connect('customStyles', {
 global: {
     frameWidth: '400px',
     frameHeight: '700px',
     textColor: '#fe3251',
     fontSize: '20px',
     footerHeight: '120px',
     typeface: "'AmazonEmber-Light', serif",
     customTypefaceStylesheetUrl: "https://ds6yc8t7pnx74.cloudfront.net/etc.clientlibs/developer-portal/clientlibs/main/css/resources/fonts/AmazonEmber_Lt.ttf",
     headerHeight: '120px',
 },
 header: {
     headerTextColor: '#541218',
     headerBackgroundColor: '#fe3',
 },
 transcript: {
     messageFontSize: '13px',
     messageTextColor: '#fe3',
     widgetBackgroundColor: '#964950',
     agentMessageTextColor: '#ef18d3',
     systemMessageTextColor: '#ef18d3',
     customerMessageTextColor: '#ef18d3',
     agentChatBubbleColor: '#111112',
     systemChatBubbleColor: '#111112',
     customerChatBubbleColor: '#0e80f2',
 },
 footer: {
     buttonFontSize: '20px',
     buttonTextColor: '#ef18d3',
     buttonBorderColor: '#964950',
     buttonBackgroundColor: '#964950',
     footerBackgroundColor: '#0e80f2',
     startCallButtonTextColor: '#541218',
     startChatButtonBorderColor: '#fe3',
     startCallButtonBackgroundColor: '#fe3',
 },
 logo: {
     logoMaxHeight: '61px',   
     logoMaxWidth: '99%',
 },
  composer: {
     fontSize: '20px', 
 },
  fullscreenMode: true // Enables fullscreen mode on the widget when a mobile screen size is detected in a web browser.
})
```

## Restrições e estilos compatíveis
<a name="chat-widget-supported-styles"></a>

A tabela a seguir lista os nomes de estilos personalizados com suporte e as restrições de valores recomendadas. Existem alguns estilos nos níveis global e de componentes. Por exemplo, o estilo `fontSize` existe globalmente e no componente de transcrição. Os estilos de nível de componente têm maior prioridade e serão homenageados no widget de chat.


|  Nome do estilo personalizado  |  Description  |  Restrições recomendadas  | 
| --- | --- | --- | 
|  `global.frameWidth`  |  Largura de todo o quadro do widget  |  Mínimo: 300 pixels Máximo: largura da janela Recomendado ajustar com base no tamanho da janela  | 
|  `global.frameHeight`  |  altura de todo o quadro do widget  |  Mínimo: 480 pixels Máximo: altura da janela Recomendado ajustar com base no tamanho da janela  | 
|  `global.textColor`  |  Cor para todos os textos  |  Qualquer valor de cor válido para CSS. Para obter mais informações, consulte [Valores de cores legais de CSS](https://www.w3schools.com/cssref/css_colors_legal.php).  | 
|  `global.fontSize`  |  Tamanho da fonte para todos os textos  |  12 pixels a 20 pixels recomendados para diferentes casos de uso  | 
|  `global.footerHeight`  |  Altura do rodapé do widget  |  Mínimo: 50 pixels Máximo: altura do quadro Recomendado ajustar com base no tamanho do quadro  | 
|  `global.typeface`  |  A fonte tipográfica usada no widget.  |  Qualquer tipo de fonte tipográfica desta lista: Arial, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond, Book man, Tacoma, Trebuches MS, Arial Black, Impact, Comic Sans MS. Você também pode adicionar um tipo de tipo/família de fontes personalizada, mas precisa hospedar o arquivo de tipo de fonte com acesso público de leitura. Por exemplo, é possível ver a documentação para usar a família de fontes Amazon Ember na [biblioteca de desenvolvedores da Amazon](https://developer.amazon.com/en-US/alexa/branding/echo-guidelines/identity-guidelines/typography).   | 
|  `global.customTypefaceStylesheetUrl`  |  Local em que o arquivo de tipo de fonte personalizado está hospedado com acesso público de leitura.  |  Link para o local HTTP público em que o arquivo de tipo de fonte está hospedado. Por exemplo, a localização do CDN do tipo AmazonEmber Light é `https://ds6yc8t7pnx74.cloudfront.net/etc.clientlibs/developer-portal/clientlibs/main/css/resources/fonts/AmazonEmber_Lt.ttf`  | 
|  `header.headerTextColor`  |  Cor do texto para a mensagem de cabeçalho  |  Qualquer valor de cor válido para CSS. Para obter mais informações, consulte [Valores de cores legais de CSS](https://www.w3schools.com/cssref/css_colors_legal.php).  | 
|  `header.headerBackgroundColor`  |  Cor do texto para o fundo do cabeçalho  |  Qualquer valor de cor válido para CSS. Para obter mais informações, consulte [Valores de cores legais de CSS](https://www.w3schools.com/cssref/css_colors_legal.php).  | 
|  `global.headerHeight`  |  Altura do cabeçalho do widget  |  É recomendável ajustar com base no uso do título, do logotipo da imagem ou de ambos.  | 
|  `transcript.messageFontSize`  |  Tamanho da fonte para todos os textos  |  12 pixels a 20 pixels recomendados para diferentes casos de uso  | 
|  `transcript.messageTextColor`  |  Cor do texto para mensagens de transcrição  |  Qualquer valor de cor válido para CSS. Para obter mais informações, consulte [Valores de cores legais de CSS](https://www.w3schools.com/cssref/css_colors_legal.php).  | 
|  `transcript.widgetBackgroundColor`  |  Cor do texto para o fundo da transcrição  |  Qualquer valor de cor válido para CSS. Para obter mais informações, consulte [Valores de cores legais de CSS](https://www.w3schools.com/cssref/css_colors_legal.php).  | 
|  `transcript.customerMessageTextColor`  |  Cor do texto das mensagens do cliente  |  Qualquer valor de cor válido para CSS. Para obter mais informações, consulte [Valores de cores legais de CSS](https://www.w3schools.com/cssref/css_colors_legal.php).  | 
|  `transcript.agentMessageTextColor`  |  Cor do texto das mensagens do atendente  |  Qualquer valor de cor válido para CSS. Para obter mais informações, consulte [Valores de cores legais de CSS](https://www.w3schools.com/cssref/css_colors_legal.php).  | 
|  `transcript.systemMessageTextColor`  |  Cor do texto para mensagens de sistema  |  Qualquer valor de cor válido para CSS. Para obter mais informações, consulte [Valores de cores legais de CSS](https://www.w3schools.com/cssref/css_colors_legal.php).  | 
|  `transcript.agentChatBubbleColor`  |  Cor de fundo para balões de mensagens do atendente  |  Qualquer valor de cor válido para CSS. Para obter mais informações, consulte [Valores de cores legais de CSS](https://www.w3schools.com/cssref/css_colors_legal.php).  | 
|  `transcript.customerChatBubbleColor`  |  Cor de fundo dos balões de mensagem do cliente  |  Qualquer valor de cor válido para CSS. Para obter mais informações, consulte [Valores de cores legais de CSS](https://www.w3schools.com/cssref/css_colors_legal.php).  | 
|  `transcript.systemChatBubbleColor`  |  Cor de fundo para balões de mensagens do sistema  |  Qualquer valor de cor válido para CSS. Para obter mais informações, consulte [Valores de cores legais de CSS](https://www.w3schools.com/cssref/css_colors_legal.php).  | 
|  `footer.buttonFontSize`  |  Tamanho da fonte para o texto do botão de ação  |  Recomendado ajustar com base na altura do rodapé  | 
|  `footer.buttonTextColor`  |  Cor do texto do botão de ação  |  Qualquer valor de cor válido para CSS. Para obter mais informações, consulte [Valores de cores legais de CSS](https://www.w3schools.com/cssref/css_colors_legal.php).  | 
|  `footer.buttonBorderColor`  |  Cor da borda do botão de ação  |  Qualquer valor de cor válido para CSS. Para obter mais informações, consulte [Valores de cores legais de CSS](https://www.w3schools.com/cssref/css_colors_legal.php).  | 
|  `footer.buttonBackgroundColor`  |  Cor do fundo do botão de ação  |  Qualquer valor de cor válido para CSS. Para obter mais informações, consulte [Valores de cores legais de CSS](https://www.w3schools.com/cssref/css_colors_legal.php).  | 
|  `footer.BackgroundColor`  |  Cor do fundo do rodapé  |  Qualquer valor de cor válido para CSS. Para obter mais informações, consulte [Valores de cores legais de CSS](https://www.w3schools.com/cssref/css_colors_legal.php).  | 
|  `footer.startCallButtonTextColor`  |  Cor do texto do botão de início da chamada  |  Qualquer valor de cor válido para CSS. Para obter mais informações, consulte [Valores de cores legais de CSS](https://www.w3schools.com/cssref/css_colors_legal.php).  | 
|  `footer.startCallButtonBorderColor`  |  Cor da borda do botão de início da chamada  |  Qualquer valor de cor válido para CSS. Para obter mais informações, consulte [Valores de cores legais de CSS](https://www.w3schools.com/cssref/css_colors_legal.php).  | 
|  `footer.startCallButtonBackgroundColor`  |  Cor do fundo do botão de início da chamada  |  Qualquer valor de cor válido para CSS. Para obter mais informações, consulte [Valores de cores legais de CSS](https://www.w3schools.com/cssref/css_colors_legal.php).  | 
|  `logo.logoMaxHeight`  |  Altura máxima do logotipo  |  Mínimo: 0 pixels Máximo: altura do cabeçalho Recomendado ajustar com base no tamanho da imagem e altura do quadro  | 
|  `logo.logoMaxWidth`  |  Largura máxima do logotipo  |  Mínimo: 0 pixels Máximo: largura do cabeçalho Recomendado ajustar com base no tamanho da imagem e largura do quadro  | 
|  `composer.fontSize`  |  Tamanho da fonte para o texto do compositor  |  12 pixels a 20 pixels recomendados para diferentes casos de uso  | 
|  `fullscreenMode`  |  Habilita o modo de tela cheia no widget quando o tamanho da tela do celular é detectado em um navegador da web.  |  Tipo: booliano  | 

A seguir estão os elementos que compõem o widget de comunicação.

![\[Elementos que compõem o widget de comunicação.\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/chatwidget-elements.png)


## Como transmitir nomes e logotipos de exibição do sistema de substituição e do bot para o widget de comunicação
<a name="pass-override-system"></a>

Para substituir as configurações do nome de System/Bot exibição e do logotipo definidas no site do Amazon Connect administrador, incorpore o seguinte bloco de código ao trecho de código do widget. Todos os campos mostrados no exemplo a seguir são opcionais.

```
amazon_connect('customDisplayNames', {
 header: {
     headerMessage: "Welcome!",
     logoUrl: "https://example.com/abc.png",
     logoAltText: "Amazon Logo Banner"
 },
 transcript: {
     systemMessageDisplayName: "Amazon System",
     botMessageDisplayName: "Alexa"
 },
 footer: {
     textInputPlaceholder: "Type Here!",     
      endChatButtonText: "End Session",      
      closeChatButtonText: "Close Chat",      
      startCallButtonText: "Start Call"
 },
})
```

### Restrições e propriedades compatíveis
<a name="supported-properties-displaynames"></a>


| Nome do estilo personalizado | Description | Restrições recomendadas | 
| --- | --- | --- | 
|  `header.headerMessage`  | Texto para a mensagem de cabeçalho | Tamanho mínimo: 1 caractere Tamanho máximo: 11 caracteres  Recomendado ajustar com base na largura do cabeçalho | 
|  `header.logoUrl`  | URL apontando para a imagem do logotipo |  Tamanho máximo: 2.048 caracteres Deve ser um URL válido apontando para um arquivo .png, .jpg ou .svg | 
|  `header.logoAltText`  | Texto para substituir o atributo alt do banner do logotipo |  Tamanho máximo: 2.048 caracteres | 
|  `transcript.systemMessageDisplayName`  | Texto para substituir o nome de exibição SYSTEM\$1MESSAGE | Tamanho mínimo: 1 caractere Tamanho máximo: 26 caracteres  | 
|  `transcript.botMessageDisplayName`  | Texto para substituir o nome de exibição do bot | Tamanho mínimo: 1 caractere Tamanho máximo: 26 caracteres  | 
|  `footer.textInputPlaceholder`  | Texto para substituir o espaço reservado na entrada de texto | Tamanho mínimo: 1 caractere Tamanho máximo: 256 caracteres  | 
|  `footer.endChatButtonText`  | Texto para substituir o texto do botão de encerramento do chat | Tamanho mínimo: 1 caractere Tamanho máximo: 256 caracteres Recomendado ajustar com base no tamanho do botão  | 
|  `footer.closeChatButtonText`  | Texto para substituir o texto do botão para fechar o chat | Tamanho mínimo: 1 caractere Tamanho máximo: 256 caracteres Recomendado ajustar com base no tamanho do botão  | 
|  `footer.startCallButtonText`  | Texto para substituir o texto do botão de início de chamada | Tamanho mínimo: 1 caractere Tamanho máximo: 256 caracteres Recomendado ajustar com base no tamanho do botão  | 

## Visualizar o widget de comunicação com propriedades personalizadas
<a name="chat-widget-preview"></a>

Visualize seu widget de comunicação com as propriedades personalizadas antes de colocá-lo em produção. Valores personalizados podem quebrar a interface do usuário do widget de comunicação se não forem definidos corretamente. Recomendamos testá-lo em diferentes navegadores e dispositivos antes de lançá-lo para seus clientes.

A seguir estão alguns exemplos de coisas que podem falhar quando valores impróprios são usados e as correções sugeridas.
+ **Problema:** a janela do widget ocupa muito espaço da tela.

  **Correção:** use `frameWidth` e `frameHeight` menores.
+ **Problema:** o tamanho da fonte é muito pequeno ou muito grande.

  **Correção:** ajuste o tamanho da fonte.
+ **Problema:** há uma área em branco abaixo do final do chat (rodapé).

  **Correção:** use um `frameHeight` menor ou `footerHeight` maior.
+ **Problema:** o botão de finalizar chat é muito pequeno ou muito grande.

  **Correção:** ajuste `buttonFontSize`.
+ **Problema:** o botão de finalizar chat está saindo da área do rodapé.

  **Correção:** use um `footerHeight` maior ou `buttonFontSize` menor.

# Segmente o botão e o quadro do widget do Amazon Connect com CSS/ JavaScript
<a name="target-widget-button"></a>

O widget de comunicação renderiza o botão do open/close widget e o quadro do widget diretamente no site anfitrião. Há seletores específicos que você pode usar para direcionar esses elementos usando CSS ou referenciá-los. JavaScript 

**dica**  
Para atualizar as cores do botão do widget ou os estilos do próprio widget, use o [site de administração do Amazon Connect](add-chat-to-website.md#customize-chat-widget). Para acessar estilos mais personalizáveis, você pode [transmitir estilos personalizados](pass-custom-styles.md) diretamente para o widget de comunicação.

## Elemento de widget IDs e exemplos
<a name="widget-elementid"></a>

As imagens a seguir mostram como o botão do widget de chat aparece na tela do usuário. A primeira imagem mostra o botão Abrir para abrir o widget de chat. A segunda imagem mostra o botão Fechar para fechar o widget de chat.

![\[Side-by-side imagens do widget de bate-papo para abrir e fechar a janela de bate-papo.\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/widget-elements.png)


1.  Botão para abrir o widget: `#amazon-connect-open-widget-button` 

1. Botão para fechar o widget: `#amazon-connect-close-widget-button`

1. Quadro do widget: `#amazon-connect-widget-frame`

   1. Quadro do widget enquanto está aberto: `#amazon-connect-widget-frame.show`

   1. Quadro do widget enquanto está fechado: `#amazon-connect-widget-frame:not(.show)`

Veja a seguir um exemplo de folha de estilos CSS que modifica estes elementos:

```
/* Target widget button while widget is minimized */
#amazon-connect-open-widget-button {
  ...
}

/* Target widget button while widget is showing */
#amazon-connect-close-widget-button {
  ...
}

/* Target widget frame */
#amazon-connect-widget-frame {
  ...
}

/* Target widget frame while it is showing */
#amazon-connect-widget-frame.show {
  ...
}

/* Target widget frame while it is minimized */
#amazon-connect-widget-frame:not(.show) {
  ...
}
```

A seguir está um exemplo de referência a esses elementos usando JavaScript:

```
const openWidgetButton = document.getElementById("amazon-connect-open-widget-button");
const closeWidgetButton = document.getElementById("amazon-connect-close-widget-button");

const widgetFrame = document.querySelector("#amazon-connect-widget-frame");
const openWidgetFrame = document.querySelector("#amazon-connect-widget-frame.show");
const hiddenWidgetFrame = document.querySelector("#amazon-connect-widget-frame:not(.show)");
```

# Solucionar problemas com o widget de comunicação do Amazon Connect
<a name="ts-cw"></a>

Este tópico é para desenvolvedores que precisam investigar problemas que podem ocorrer ao configurar um widget de comunicação no site Amazon Connect administrativo. 

**Topics**
+ [“Algo deu errado”](#sww)
+ [Clientes que não estão recebendo mensagens do agente: em rede ou WebSocket desconectados](#mam)
+ [Ignorando o CORS ao abrir links de terceiros](#bcwotpl)

## “Algo deu errado”
<a name="sww"></a>

Se você vir a seguinte mensagem de erro **Algo deu errado** ao carregar seu widget de comunicação, abra as ferramentas do navegador para ver os registros de erros. 

![\[Uma mensagem de erro que diz que algo deu errado.\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/chatwidget-error-message.png)


A seguir, estão os problemas comuns que podem causar esse erro.

### 400 Solicitação inválida
<a name="400-invalid-request"></a>

Se os registros mencionarem uma solicitação inválida 400, há algumas causas possíveis:
+ Seu widget de comunicação não está sendo servido em um domínio permitido. Você deve indicar especificamente os domínios em que hospedará seu widget.
+ A solicitação para o endpoint não está formatada corretamente. Isso geralmente ocorre somente se o conteúdo do trecho de incorporação tiver sido modificado.

### 401 Não autorizado
<a name="401-unauthorized"></a>

![\[A mensagem de erro “Algo deu errado”.\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/something-went-wrong.png)


Se os registros mencionarem um 401 não autorizado, isso é um problema com a autenticação JSON Web Token (JWT). Ele exibe a página de erro acima.

Depois de ter o JWT, você precisa implementá-lo na função de retorno de chamada `authenticate`. O exemplo a seguir mostra como implementá-lo se você estiver tentando buscar seu token e depois usá-lo: 

```
amazon_connect('authenticate', function(callback) {
  window.fetch('/token').then(res => {
    res.json().then(data => {
      callback(data.data);
    });
  });
});
```

Aqui está uma versão mais básica do que precisa ser implementado:

```
amazon_connect('authenticate', function(callback) {
   callback(token);
});
```

Para obter instruções sobre como implementar o JWT, consulte [Etapa 3: confirmar e copiar o código e as chaves de segurança do widget de comunicação](add-chat-to-website.md#confirm-and-copy-chat-widget-script).

Se você já implementou o retorno de chamada, os seguintes cenários ainda podem causar um 401:
+ Resposta inválida
+ Token expirado

### 404 Não encontrado
<a name="404-not-found"></a>

Normalmente, um código de status 404 é gerado quando o recurso solicitado não existe:
+ Um widgetId inválido é especificado na solicitação da API
+ O widgetId é válido, mas o fluxo associado foi excluído ou arquivado.
+ O widget não foi publicado ou foi excluído.

Verifique se o snippet está exatamente como foi copiado do site do Amazon Connect administrador e se nenhum dos identificadores foi alterado.

Se os identificadores não tiverem sido alterados e você estiver vendo um erro 404, entre em contato com o AWS Support. 

### 500 Erro interno do servidor
<a name="500-internalservererror-chatwidget"></a>

Isso pode ser causado pelo fato de sua função vinculada ao serviço não ter as permissões necessárias para iniciar o chat. Isso acontece se sua instância do Amazon Connect foi criada antes de outubro de 2018 porque você não tem funções vinculadas a serviços configuradas.

**Solução**: adicione a política de `connect:*` sobre a função associada à sua instância do Amazon Connect. Para obter mais informações, consulte [Usar perfis vinculados ao serviço e permissões de perfil para o Amazon Connect](connect-slr.md).

Se sua função vinculada a serviços tiver as permissões corretas, entre em contato com o AWS Support.

## Clientes que não estão recebendo mensagens do agente: em rede ou WebSocket desconectados
<a name="mam"></a>

Durante uma sessão de bate-papo, um cliente que está usando um aplicativo de bate-papo perde a network/WebSocket conexão. Ele recupera rapidamente a conexão, mas as mensagens enviadas pelo atendente durante esse período não são renderizadas na interface de chat do cliente. 

A imagem a seguir mostra um exemplo da interface de bate-papo do cliente e do Painel de controle de contatos do agente side-by-side. A mensagem enviada pelo atendente não é renderizada na sessão de chat do cliente. No entanto, para o atendente, ela é exibida como recebida pelo cliente.

![\[Uma mensagem no CCP que não é enviada ao contato.\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/tw-cw-001-message-not-sent.png)


Se o aplicativo de bate-papo do cliente perder a network/WebSocket conexão, a interface do usuário do chat deverá fazer o seguinte para recuperar mensagens futuras, bem como mensagens que foram enviadas a ele enquanto estava desconectado: 
+ Restabeleça a WebSocket conexão para receber mensagens futuras novamente.
+ Faça uma solicitação [chatSession.getTranscript](https://github.com/amazon-connect/amazon-connect-chatjs?tab=readme-ov-file#chatsessiongettranscript) (API [getTranscripts](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_GetTranscript.html)) para recuperar todas as mensagens perdidas que foram enviadas enquanto o cliente estava desconectado.

Se o atendente enviar uma mensagem enquanto a interface de usuário de chat do cliente estiver desconectada, a mensagem será armazenada com sucesso no backend do Amazon Connect: o CCP está funcionando conforme o esperado e as mensagens são todas registradas na transcrição, mas o dispositivo do cliente não consegue receber mensagens. Quando o cliente se reconecta ao WebSocket, há uma lacuna nas mensagens. As futuras mensagens recebidas aparecerão novamente a partir do WebSocket, mas as mensagens de lacuna ainda estarão ausentes, a menos que o código faça uma chamada explícita para a [GetTranscript](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_GetTranscript.html)API.

### Solução
<a name="solution-network-disconnected"></a>

Use a [sessão de bate-papo. onConnectionEstablished](https://github.com/amazon-connect/amazon-connect-chatjs?tab=readme-ov-file#chatsessiononconnectionestablished)manipulador de eventos para chamar a [GetTranscript](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_GetTranscript.html)API. O manipulador de `chatSession.onConnectionEstablished` eventos é acionado quando se WebSocket reconecta. O ChatJS tem uma lógica integrada de pulsação e repetição para a conexão. WebSocket No entanto, como o ChatJS não está armazenando a transcrição, você deve adicionar um código personalizado à interface de usuário de chat para buscar manualmente a transcrição novamente.

O exemplo de código a seguir mostra como implementar `onConnectionEstablished` para chamar `GetTranscript`.

```
import "amazon-connect-chatjs";

const chatSession = connect.ChatSession.create({
  chatDetails: {
    ContactId: "the ID of the contact",
    ParticipantId: "the ID of the chat participant",
    ParticipantToken: "the participant token",
  },
  type: "CUSTOMER",
  options: { region: "us-west-2" },
});

// Triggered when the websocket reconnects
chatSession.onConnectionEstablished(() => {
  chatSession.getTranscript({
    scanDirection: "BACKWARD",
    sortOrder: "ASCENDING",
    maxResults: 15,
    // nextToken?: nextToken - OPTIONAL, for pagination
  })
    .then((response) => {
      const { initialContactId, nextToken, transcript } = response.data;
      // ...
    })
    .catch(() => {})
});
```

```
function loadLatestTranscript(args) {
    // Documentation: https://github.com/amazon-connect/amazon-connect-chatjs?tab=readme-ov-file#chatsessiongettranscript
    return chatSession.getTranscript({
        scanDirection: "BACKWARD",
        sortOrder: "ASCENDING",
        maxResults: 15,
        // nextToken?: nextToken - OPTIONAL, for pagination
      })
      .then((response) => {
        const { initialContactId, nextToken, transcript } = response.data;
        
        const exampleMessageObj = transcript[0];
        const {
          DisplayName,
          ParticipantId,
          ParticipantRole, // CUSTOMER, AGENT, SUPERVISOR, SYSTEM
          Content,
          ContentType,
          Id,
          Type,
          AbsoluteTime, // sentTime = new Date(item.AbsoluteTime).getTime() / 1000
          MessageMetadata, // { Receipts: [{ RecipientParticipantId: "asdf" }] }
          Attachments,
          RelatedContactid,
        } = exampleMessageObj;

        return transcript // TODO - store the new transcript somewhere
      })
      .catch((err) => {
        console.log("CustomerUI", "ChatSession", "transcript fetch error: ", err);
      });
}
```

Para ver outro exemplo, veja essa [implementação de código aberto em GitHub](https://github.com/amazon-connect/amazon-connect-chat-interface/blob/c88f854073fe6dd45546585c3bfa363d3659d73f/src/components/Chat/ChatSession.js#L408). 

## Ignorando o CORS ao abrir links de terceiros
<a name="bcwotpl"></a>

Para aumentar a segurança, o widget de comunicação opera em um ambiente sandbox. Como resultado, links de terceiros compartilhados no widget não podem ser abertos.

**Solução**

Há duas opções para ignorar o CORS a fim de permitir que links de terceiros sejam abertos.
+ **(Recomendado)**

  Atualize o atributo sandbox para permitir a abertura de links em uma nova guia, o que pode ser feito adicionando o seguinte atributo ao trecho de código:

  ```
  amazon_connect('updateSandboxAttributes', 'allow-scripts allow-same-origin allow-popups allow-downloads allow-top-navigation-by-user-activation allow-popups-to-escape-sandbox')
  ```
**nota**  
O valor do atributo pode ser atualizado conforme necessário para permitir ações específicas. Este é um exemplo de como permitir a abertura de links em uma nova guia.
+ Remova o atributo sandbox, o que pode ser feito adicionando o seguinte atributo ao trecho de código:

  ```
  amazon_connect('removeSandboxAttribute', true)
  ```

# Adicionar um formulário de pré-contato ou pré-chat
<a name="add-precontact-form"></a>

Você pode capturar as informações do cliente antes de iniciar um contato:
+ **Formulário de pré-contato**: adicione para capturar informações do cliente antes de iniciar uma tarefa ou um contato por e-mail.
+ **Formulário pré-chat**: adicione para capturar informações do cliente antes de iniciar um contato por chat.

Depois de capturar as informações, você pode exibi-las para o atendente por meio do Painel de controle de contato (CCP) ou usá-las em outro lugar no fluxo.

Para criar o formulário, crie uma exibição personalizada e use o componente do botão de ação de conexão. Para acessar mais informações sobre visualizações, consulte [Use o construtor de interface do usuário no Amazon Connect para obter recursos em step-by-step guias](no-code-ui-builder.md).

O botão de ação de conexão permite que você receba a entrada do usuário no formulário e selecione a ação a ser tomada quando o formulário for enviado - iniciar um task/email ou conversar.

# Ativar pesquisa pós-bate-papo
<a name="enable-post-chat-survey"></a>

A pesquisa pós-chat permite que você colete feedback do cliente final imediatamente após o término de uma conversa no chat. Com o **`DisconnectOnCustomerExit`**parâmetro na [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)API, você pode configurar a desconexão automática do agente quando o cliente final se desconecta, garantindo que o fluxo de desconexão seja acionado de forma consistente, independentemente de qual participante se desconecte primeiro.

## Opções de implementação
<a name="post-chat-survey-implementation"></a>

Há duas maneiras de ativar a pesquisa pós-bate-papo:

### Para widget de bate-papo personalizado
<a name="post-chat-survey-custom-builder"></a>

Se você estiver usando uma implementação de chat personalizada:

1. Atualize para a versão mais recente do [amazon-connect-chatjs](https://github.com/amazon-connect/amazon-connect-chatjs).

1. Adicione o `DisconnectOnCustomerExit` parâmetro à sua solicitação de [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)API:

   ```
   {
       "DisconnectOnCustomerExit": ["AGENT"],
       // ... other StartChatContact parameters
   }
   ```

### Para o widget de comunicação Amazon Connect
<a name="post-chat-survey-communication-widget"></a>

Se você estiver usando o widget de comunicação Amazon Connect:

1. Abra o console do Amazon Connect e navegue até **Widgets de comunicação**.

1. Ative a configuração da pesquisa pós-bate-papo na página Widgets de comunicação.  
![\[A página de configurações do Widget de comunicação mostrando a opção de pesquisa pós-bate-papo.\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/post-chat-survey-communication-widget.png)

## Atualize o fluxo de contato para adicionar uma pesquisa pós-bate-papo como um fluxo de desconexão
<a name="post-chat-survey-disconnect-flow"></a>

Para ativar a pesquisa pós-bate-papo, você precisará atualizar o fluxo de desconexão conectado à sua solução de bate-papo. Depois de configurada, a pesquisa será acionada automaticamente quando os clientes encerrarem suas sessões de bate-papo.

Para obter informações sobre como criar um fluxo de desconexão, consulte[Exemplo de cenário de bate-papo](web-and-mobile-chat.md#example-chat-scenario).

Há duas maneiras de implementar uma pesquisa em seu fluxo de desconexão:
+ **Opção \$11: Usando o ShowView bloco** - Use o [Bloco de fluxo no Amazon Connect: Mostrar exibição](show-view-block.md) para exibir uma interface de pesquisa personalizada.
+ **Opção \$12: Usando o Lex** - Integre-se ao Amazon Lex para coleta de questionários baseados em texto. Para obter mais informações, consulte [Adicionar um bot do Amazon Lex ao Amazon Connect](amazon-lex.md).

**nota**  
Para cenários de invasão de supervisor, certifique-se de adicionar um [Bloco de fluxo no Amazon Connect: Definir fila de trabalho](set-working-queue.md) bloco antes da **transferência** para a fila. A omissão fará com que os contatos do bate-papo sejam encerrados em vez de serem transferidos para esse recurso.  

![\[Um fluxograma mostrando o bloco Definir fila de trabalho antes da transferência para a fila para cenários de entrada do supervisor.\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/post-chat-survey-set-working-queue-block.png)


**Contate a Trace Records**  
Quando um cliente encerra uma sessão de bate-papo, o Amazon Connect configura `disconnectReason` para `CUSTOMER_DISCONNECT` [ContactTraceRecord](ctr-data-model.md#ctr-ContactTraceRecord) o. Quando `DisconnectOnCustomerExit` configurado, o sistema gera uma nova ID de contato (`nextContactId`) e inicia o fluxo de desconexão configurado.  
Exemplo:  

```
{
    "contactId": "104c05e3-abscdfre",
    "nextContactId": "4cbae06d-ca5b-1234567",
    "channel": "CHAT",
    "initiationMethod": "DISCONNECT",
    "disconnectReason": "CUSTOMER_DISCONNECT"
}
```
[Como os atributos de contato funcionam no Amazon Connect](what-is-a-contact-attribute.md)será atualizado na Pesquisa de contatos e nos Detalhes de contato.  

![\[Detalhes de contato mostrando os atributos de contato de uma pesquisa pós-bate-papo.\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/post-chat-survey-contact-attributes.png)


## Recursos adicionais do
<a name="post-chat-survey-additional-resources"></a>
+ [StartChatContact API](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)
+ [Exemplo de fluxo de entrada no Amazon Connect para a primeira experiência de contato](sample-inbound-flow.md)
+ [Exemplo de cenário de bate-papo](web-and-mobile-chat.md#example-chat-scenario)
+ [Bloco de fluxo no Amazon Connect: Definir fila de trabalho](set-working-queue.md)
+ [Bloco de fluxo no Amazon Connect: Transferir para fila](transfer-to-queue.md)
+ [Amazon Connect ShowView](https://docs.aws.amazon.com/connect/latest/adminguide/show-view-block.html)
+ [Amazon Connect com Lex](https://docs.aws.amazon.com/connect/latest/adminguide/amazon-lex.html)
+ [Como os atributos de contato funcionam no Amazon Connect](what-is-a-contact-attribute.md)

# Integre o Amazon Connect bate-papo em um aplicativo móvel
<a name="integrate-chat-with-mobile"></a>

Este tópico explica como integrar o Amazon Connect Chat à sua aplicação móvel. Você pode usar uma das opções a seguir: 
+ [WebView integração](#webview)
+ The [Amazon Connect Chat SDKs para iOS e Android](#integrate-chat-with-mobile-sdks-for-mobile)
+ [Integração ao React Native](#react-native-integration)

Use a Amazon Connect [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)API para iniciar o contato. 

**Topics**
+ [Qual opção de integração usar](#integrate-options)
+ [Amazon Connect fluxo de trabalho de integração de bate-papo](#integrate-chat-with-mobile-workflow)
+ [Comece a usar a integração com o Amazon Connect chat](#integrate-chat-with-mobile-getting-started)

## Qual opção de integração usar
<a name="integrate-options"></a>

Esta seção fornece uma descrição de cada opção de integração para ajudar você a decidir qual delas usar para sua solução. 

### WebView integração
<a name="webview"></a>

A WebView integração do Amazon Connect Chat permite que você incorpore a experiência completa de bate-papo em seus aplicativos móveis com o mínimo esforço de desenvolvimento. Esse método usa o `WebView` no Android e o `WKWebView` no iOS para fornecer uma interface de chat perfeita e abrangente. É ideal para equipes que buscam uma out-of-the-box solução rápida para integrar a funcionalidade de bate-papo sem grandes personalizações.

Essa abordagem garante uma comunicação segura e utiliza a interface de chat baseada na web do Amazon Connect. No entanto, você precisará configurar seu aplicativo para lidar com cookies de JavaScript forma adequada.

Para obter mais informações sobre a implementação da WebView integração, consulte o GitHub repositório de [exemplos de interface](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/mobileChatExamples) de usuário do Amazon Connect chat.

**Recomendação**: a integração WebView baseada é ideal para desenvolvimento rápido e manutenção mínima, ao mesmo tempo em que garante uma funcionalidade abrangente de bate-papo.

### Amazon Connect Chat SDKs para celular
<a name="integrate-chat-with-mobile-sdks-for-mobile"></a>

O Amazon Connect Chat SDKs para iOS e Android simplifica a integração do Amazon Connect chat para aplicativos móveis nativos. Eles SDKs ajudam a lidar com a lógica de bate-papo do lado do cliente e as comunicações de back-end de forma semelhante à biblioteca Amazon Connect ChatJS.

O Amazon Connect Chat SDKs encerra o Amazon Connect Participant Service APIs e resume o gerenciamento da sessão de bate-papo e. WebSocket Isso permite que você se concentre na interface e na experiência do usuário enquanto confia no SDK do Amazon Connect Chat para interagir com todos os serviços de back-end. Essa abordagem ainda exige que você use seu próprio back-end de bate-papo para chamar a Amazon Connect `StartChatContact` API e iniciar o contato.
+ Para obter mais informações sobre o SDK para iOS baseado em Swift, consulte a página do SDK [Amazon Connect do Chat para iOS](https://github.com/amazon-connect/amazon-connect-chat-ios). GitHub 
+ Para obter mais informações sobre o SDK para Android baseado em Kotlin, consulte a página do SDK do Chat [Amazon Connect para Android](https://github.com/amazon-connect/amazon-connect-chat-android). GitHub 

**Benefícios**: O SDKs Native permite funcionalidade robusta e alto desempenho, tornando-o ideal para aplicativos que exigem personalização profunda e uma experiência de usuário perfeita.

### Integração ao React Native
<a name="react-native-integration"></a>

A integração do chat do Amazon Connect ao React Native oferece uma solução multiplataforma. Ela permite que as equipes criem funcionalidades de chat para Android e iOS com uma base de código compartilhada. Esse método equilibra a personalização e a eficiência do desenvolvimento enquanto utiliza os recursos do React Native para criar aplicações móveis robustas.

Essa integração usa pontes nativas para acessar recursos avançados e garante desempenho consistente e uma experiência de usuário uniforme em todas as plataformas. É mais fácil implementar recursos importantes, como WebSocket comunicação, usando bibliotecas como chamadas `react-native-websocket` de API com`axios`.

**Ideal para**: equipes que desejam maximizar a reutilização de código e, ao mesmo tempo, manter a flexibilidade funcional.

## Amazon Connect fluxo de trabalho de integração de bate-papo
<a name="integrate-chat-with-mobile-workflow"></a>

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

![\[Diagrama mostrando o fluxo do programa de Amazon Connect bate-papo.\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/integrate-chat-mobile-diagram.png)


**No diagrama**

1. Quando um cliente inicia um bate-papo no aplicativo móvel, o aplicativo deve enviar uma solicitação para Amazon Connect usar a [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)API. Isso requer parâmetros específicos, como o endpoint da API e IDs o fluxo da [instância](amazon-connect-instances.md) e do [contato](connect-contact-flows.md), para autenticar e iniciar o bate-papo.

1. A API `StartChatContact` interage com seu sistema de backend para obter um token de participante e um ID de contato que atuam como identificadores exclusivos para a sessão de chat.

1. A interface do usuário da aplicação transmite a resposta `StartChatContact` para o SDK móvel para que ele se comunique adequadamente com o [Serviço participante do Amazon Connect](https://docs.aws.amazon.com/connect/latest/APIReference/API_Operations_Amazon_Connect_Participant_Service.html) e configure a sessão de chat do cliente.

1. O SDK expõe um objeto [chatSession](https://github.com/amazon-connect/amazon-connect-chat-ios?tab=readme-ov-file#chatsession-apis) à interface do usuário, que contém métodos facilmente utilizáveis para interagir com a sessão de chat.

1. Nos bastidores, o SDK interage com o [serviço participante do Amazon Connect](https://docs.aws.amazon.com/connect/latest/APIReference/API_Operations_Amazon_Connect_Participant_Service.html) usando o [SDK da AWS](https://aws.amazon.com/developer/tools/). A comunicação com o serviço participante do Amazon Connect é responsável por todas as interações do cliente com a sessão de chat. Isso inclui ações como `CreateParticipantConnection`, `SendMessage`, `GetTranscript` ou `DisconnectParticipant`.

1. O SDK também gerencia a WebSocket conexão necessária para receber mensagens, eventos e anexos do agente. Tudo isso será processado e analisado pelo SDK e exibido na interface de usuário em uma estrutura facilmente consumida.

## Comece a usar a integração com o Amazon Connect chat
<a name="integrate-chat-with-mobile-getting-started"></a>

As etapas e os recursos a seguir ajudarão você a começar a integrar o Amazon Connect Chat aos seus aplicativos móveis nativos:

1. Você pode configurar rapidamente uma [CloudFormation](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/Welcome.html)pilha para fornecer o back-end necessário para chamadas, consultando nosso StartChatContact exemplo de [startChatContactAPI](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/cloudformationTemplates/startChatContactAPI) em. GitHub

1. Para exemplos que mostram como criar sua interface de usuário de bate-papo móvel com o Amazon Connect Chat SDKs, confira nosso GitHub projeto de [exemplos de interface](https://github.com/amazon-connect/amazon-connect-chat-ui-examples) de usuário.

   Consulte nossos exemplos de bate-papo para [iOS](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/mobileChatExamples/iOSChatExample) e [Android](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/mobileChatExamples/androidChatExample) que mostram como potencializar um aplicativo de bate-papo usando o SDK do Amazon Connect Chat para iOS/Android.

1. Confira as páginas do [SDK do Amazon Connect Chat para](https://github.com/amazon-connect/amazon-connect-chat-ios) iOS [Amazon Connect e do SDK do Chat](https://github.com/amazon-connect/amazon-connect-chat-android) para Android. GitHub A GitHub página contém documentação da API e um guia de implementação que explica todos os pré-requisitos e etapas de instalação.

1. Configure a integração ao React Native: utilize o exemplo do [React Native](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/mobileChatExamples/connectReactNativeChat) para receber orientação sobre a implementação da solução baseada no React Native.

1. Se tiver alguma dúvida ou problema em relação à configuração ou utilização do SDK do chat do Amazon Connect em suas aplicações móveis, você pode registrar um chamado na página [Amazon Connect Chat SDK for iOS Issues](https://github.com/amazon-connect/amazon-connect-chat-ios/issues) ou na página [Amazon Connect Chat SDK for Android Issues](https://github.com/amazon-connect/amazon-connect-chat-android/issues). Se houver um problema com os exemplos da interface do usuário do chat móvel, você pode registrar um chamado na página [Amazon Connect Chat UI Examples Issues](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/issues).

# Habilitar a formatação de texto no Amazon Connect para a experiência de chat do cliente
<a name="enable-text-formatting-chat"></a>

Com a formatação de mensagens do Amazon Connect, você pode permitir que seus clientes e atendentes adicionem rapidamente estrutura e clareza às mensagens de chat. 

**Topics**
+ [Tipos de formatação compatíveis](#supported-format-types)
+ [Habilitar formatação de mensagens](#how-to-enable-message-formatting)
+ [Como adicionar links de e-mail e telefone](#add-email-phone-links)
+ [Como adicionar mensagens do chatbot](#add-bot-messages)

## Tipos de formatação compatíveis
<a name="supported-format-types"></a>

Você pode fornecer os seguintes tipos de formatação na interface do usuário do chat e na aplicação do atendente usando markdown:
+ Negrito
+ Itálico
+ Lista com marcadores
+ Lista numerada
+ Hiperlinks
+ Emoji
+ Anexos. Para habilitar os anexos, siga [Habilitar anexos no CCP para que os clientes e atendentes compartilhem e façam upload de arquivos](enable-attachments.md).

## Como habilitar formatação de mensagens
<a name="how-to-enable-message-formatting"></a>

1. Quando você cria uma nova [interface de usuário de chat](add-chat-to-website.md), a formatação rich text é habilitada imediatamente. Não é exigida nenhuma configuração adicional.

1. Para adicionar recursos de formatação de texto a uma [interface de usuário de chat](add-chat-to-website.md) existente, atualize o [código do widget de comunicação](add-chat-to-website.md) com o seguinte código destacado em negrito: 

   ```
       (function(w, d, x, id){
           s=d.createElement('script');
           s.src='https://your-instance-alias.my.connect.aws/connectwidget/static/amazon-connect-chat-interface-client.js';
           s.async=1;
           s.id=id;
           d.getElementsByTagName('head')[0].appendChild(s);
           w[x] =  w[x] || function() { (w[x].ac = w[x].ac || []).push(arguments) };
       })(window, document, 'amazon_connect', 'widget-id');
       amazon_connect('styles', { openChat: { color: 'white', backgroundColor: '#123456'}, closeChat: { color: 'white', backgroundColor: '#123456'} });
       amazon_connect('snippetId', 'snippet-id');
       amazon_connect('supportedMessagingContentTypes', [ 'text/plain', 'text/markdown' ]);
   ```

   O código destacado em vermelho é definido com os valores corretos quando você recebe o snippet no console do Amazon Connect. O único conteúdo que você escolhe adicionar ou remover é a última linha em negrito para`supportedMessagingContentTypes`. 

1. Para adicionar recursos de formatação de texto à sua própria interface de usuário de chat personalizada (por exemplo, [Interface de chat](https://github.com/amazon-connect/amazon-connect-chat-interface) ou sua própria solução de interface de usuário sobre o [ChatJS](https://github.com/amazon-connect/amazon-connect-chatjs)), siga estas etapas: 

   1. Chame a API [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html). Ao chamar `StartChatContact`, adicione o parâmetro `SupportedMessagingContentTypes` conforme mostrado em negrito no exemplo a seguir:

      ```
      // Amazon Connect StartChatContact API
      {
          "Attributes": { 
              "string" : "string" 
          },
          "ClientToken": "string",
          "ContactFlowId": "your flow ID",
          "InitialMessage": { 
              "Content": "string",
              "ContentType": "string"
          },
          "InstanceId": "your instance ID",
          "ParticipantDetails": { 
              "DisplayName": "string"
          }
          
          // optional
         "SupportedMessagingContentTypes": [ "text/plain", "text/markdown" ]
      }
      ```

   1. Importe `chatjs` como objeto, conforme mostrado no exemplo a seguir:

      ```
      import "amazon-connect-chatjs";
      
      this.session = connect.ChatSession.create({
            ...
          });
      
      this.session.sendMessage({
            message: "message-in-markdown-format",
            contentType: "text/markdown"
      });
      ```

      Se você não usa ChatJs, consulte esses tópicos para obter informações sobre o envio de texto markdown por meio do Amazon Connect APIs: [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)e. [SendMessage](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_SendMessage.html)

   1. Envie mensagens com markdown. Consulte o snippet de código anterior para importar `chatjs` como objeto para ver um exemplo de como enviar mensagens. Você pode usar o markdown simples para formatar texto em chats. Se você já [usa o chatjs hoje para enviar mensagens de texto simples](https://github.com/amazon-connect/amazon-connect-chatjs/blob/master/src/core/chatController.js#L66), você pode modificar sua lógica existente para chamar [SendMessage](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_SendMessage.html)com `text/markdown` as `contentType` em vez de `text/plain` quando quiser enviar mensagens de markdown. Atualize o parâmetro `sendMessage` para ter o formato markdown de suas mensagens. Para obter mais informações, consulte [Markdown Guide Basic Syntax](https://www.markdownguide.org/basic-syntax/).

   1. Implemente sua própria lógica no pacote de interface do usuário para renderizar mensagens de marcação na área de entrada e na transcrição do chat. Se você usa o React, pode usar o [react-markdown](https://github.com/remarkjs/react-markdown) como referência.

**nota**  
Os recursos de formatação de texto vão aparecer para o atendente somente se o recurso tiver sido habilitado para o cliente na interface de usuário do chat. Se a formatação de texto não for suportada ou habilitada na interface de usuário do chat do cliente, o atendente não poderá redigir e enviar mensagens com formatação de texto.
Todos os recursos de formatação de texto, exceto anexos, estão disponíveis para [respostas rápidas](create-quick-responses.md).

## Como adicionar links de e-mail e telefone
<a name="add-email-phone-links"></a>

O exemplo a seguir mostra como adicionar links clicáveis e que podem ser chamados às suas aplicações web e aplicativos móveis.

```
Call us today: [+1 (123) 456-7890](tel:+11234567890)
[Call Us](tel:+11234567890)
[Skype Us](callto:+91123-456-7890)
[Fax Us](fax:+91123-456-7890)
[Text Us](SMS:+91123-456-7890)
[Email Us](mailto:name@email.com)
```

## Como adicionar mensagens do chatbot
<a name="add-bot-messages"></a>

Ao habilitar a marcação para mensagens de chat, você pode usar a formatação rich text para os seguintes tipos de mensagens do chatbot:
+ Fluxos [Reproduzir mensagem](play.md)
+ Fluxos [Obter informações dos clientes](get-customer-input.md)
+ `SYSTEM_MESSAGE`
+ `Lex BOT`
+ `Third Party BOT`
+ `Lex BOT Lambda`

A seguinte imagem mostra como habilitar um prompt manualmente em um bloco de fluxo [Reproduzir mensagem](play.md):

![\[Imagem de um bloco de fluxo e um prompt com dois links, um para Perguntas frequentes e outro para um número de telefone.\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/chat-rtf-play-prompt-flow-1.png)


A seguinte imagem mostra como habilitar um prompt manualmente em um bloco de fluxo [Obter informações dos clientes](get-customer-input.md) e, em seguida, associar o bloco de fluxo a um bot do Amazon Lex:

![\[Imagem de um bloco de fluxo e um prompt com dois links, um para Perguntas frequentes e outro para um número de telefone.\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/chat-rtf-get-customer-flow.png)


A seguinte imagem mostra como o prompt é exibido na SYSTEM\$1MESSAGE e em vários tipos de mensagem do BOT:

![\[Imagem mostrando os links “Consulte nossas perguntas frequentes” e “Ligue para nós” nas mensagens SYSTEM e BOT.\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/chat-rtf-sys-bot-messages.png)


A seguinte imagem mostra como configurar um prompt em uma intenção do bot do Amazon Lex:

![\[Imagem de uma intenção do Amazon Lex contendo um prompt com dois links, um para Perguntas frequentes e outro para um número de telefone.\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/chat-rtf-lex-flow.png)


Para obter mais informações sobre intenções, consulte [Adding intents](https://docs.aws.amazon.com/lexv2/latest/dg/add-intents.html) no *Guia do desenvolvedor do Amazon Lex V2*. Para obter mais informações sobre mensagens do Lambda, consulte [Habilitando a lógica personalizada com funções do AWS Lambda](https://docs.aws.amazon.com/lexv2/latest/dg/lambda.html), também no Guia do desenvolvedor do *Amazon Lex* V2.

# Habilitar notificações para clientes de chat no Amazon Connect
<a name="message-receipts"></a>

Você pode habilitar a mensagem *Entregue* e *Lida* na [interface de usuário do chat](add-chat-to-website.md) para que os clientes saibam o status das mensagens enviadas. Isso proporciona transparência aos clientes e melhora a experiência geral do chat. 

Independentemente de os recebimentos de mensagens estarem habilitados, os dados e eventos do recebimento de mensagens são sempre enviados e podem ser vistos no log da rede. Habilitar e desabilitar os recebimentos de mensagens na interface de usuário do chat só surtirá efeito se os recebimentos aparecerem na transcrição do widget de comunicação.

**dica**  
Por padrão, o recebimento de mensagens já está habilitado na experiência de [Chat de teste](chat-testing.md#test-chat), no Painel de Controle de Contato (CCP) e no [exemplo de código aberto disponível para download](download-chat-example.md) do widget de chat.

**Para habilitar o recebimento de mensagens na interface de usuário do chat**

1. Faça login no site de administração do Amazon Connect em https://*nome da instância*.my.connect.aws/. Escolha **Personalizar widget de comunicação**.  
![\[A página do guia de configuração, a opção de personalização do widget de comunicação.\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/chatwidget-customize-chat-window-button.png)

1. Escolha **Editar**.  
![\[A página de personalização do widget de comunicação salva, o botão de edição.\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/chatwidget-edit-messagereceipt.png)

1. Por padrão, **Recibos de mensagens** não está habilitado. Defina como **Habilitado**.  
![\[A opção Recibos de mensagens, habilitada.\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/chatwidget-enable-messagereceipt.png)

O recebimento de mensagens agora está habilitado. Os clientes que estão usando o widget de comunicação começarão a ver as mensagens *Entregues* e *Lidas* imediatamente. 

# Configurar tempos limite de chat para participantes do chat
<a name="setup-chat-timeouts"></a>

Quando uma conversa de chat entre um atendente e um cliente permanece inativa (nenhuma mensagem enviada) por um determinado período, convém considerar um participante do chat inativo e até mesmo desconectar automaticamente um atendente do chat.

Para fazer isso, você pode configurar os tempos limite de inatividade e os tempos limite de fechamento automático usando a ação. [UpdateParticipantRoleConfig](https://docs.aws.amazon.com/connect/latest/APIReference/API_UpdateParticipantRoleConfig.html)

**dica**  
Este tópico trata da configuração de tempos limite de chat para conversas entre clientes e atendentes. Se você está procurando informações sobre como configurar os tempos limite de chat para quando os clientes interagem com o Lex, consulte a seção [Tempos limite configuráveis para entrada de chat durante uma interação com Lex](get-customer-input.md#get-customer-input-configurable-timeouts-chat) do bloco [Bloco de fluxo no Amazon Connect: Obter informações dos clientes](get-customer-input.md). 

**Você pode definir quatro tipos diferentes de temporizadores.**
+ Você especifica o tempo que deve decorrer para que uma ação seja tomada.
+ Qualquer combinação de temporizadores pode ser usada.     
[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/setup-chat-timeouts.html)

**Especifique todos os temporizadores em minutos.**
+ Mínimo: 2 minutos
+ Máximo: 480 minutos (8 horas)

**Os temporizadores se aplicam às funções dos participantes e à vida útil do chat.**
+ Você configura temporizadores para funções de participantes, como atendente e cliente, em vez de participantes individuais.
+  Depois de definir os temporizadores, eles se aplicam à vida útil do chat. Se um bate-papo for transferido, os cronômetros serão aplicados à nova agent/customer interação.

## Como funcionam os temporizadores de chat
<a name="how-chat-timer-work"></a>

Os temporizadores se comportam da seguinte maneira:
+ Os temporizadores funcionam quando um atendente e um cliente estão conectados ao chat ou quando um cliente e um participante personalizado (como um bot personalizado) estão conectados. 
+ Os cronômetros começam quando um agent/custom participante entra no bate-papo e param quando o agent/custom participante sai do bate-papo.
+ Os temporizadores de inatividade são executados antes dos temporizadores de desconexão automática, se ambos estiverem configurados para uma função. Por exemplo, se os dois temporizadores estiverem configurados, o de desconexão automática será iniciado somente depois que um participante for considerado inativo.
+ Se apenas um tipo de temporizador estiver configurado para uma função, ele será iniciado imediatamente.
+ Se, a qualquer momento, um participante enviar uma mensagem, os temporizadores desse participante serão redefinidos. Se eles foram considerados ociosos, não serão mais.
+ Quando um anexo é adicionado a uma mensagem, o cronômetro do chat é redefinido.
+  A configuração que foi definida quando o agent/custom participante entrou se aplica enquanto o agent/custom participante permanecer no chat. Se você atualizar a configuração do cronômetro enquanto um agent/custom participante e um cliente já estiverem conectados um ao outro, a nova configuração será armazenada, mas não será aplicada até que um novo agent/custom participante se conecte ao chat.
+ Quando ocorre um evento de desconexão automática, todos os participantes, exceto o cliente (como o atendente, qualquer supervisor de monitoramento ou participantes personalizados), são desconectados. Se o atendente for desconectado e um bloco [Set disconnect flow (Definir fluxo de desconexão)](set-disconnect-flow.md) tiver sido configurado, o chat será encaminhado para ele.

### Expiração do temporizador de ociosidade
<a name="idle-timer-expiry"></a>

Veja a seguir o que acontece quando um temporizador de ociosidade expira durante uma interação personalizada entre o cliente e o participante: 

1. Um evento inativo é distribuído para todos os websockets/streaming endpoints.

1. Se um temporizador de desconexão automática estiver configurado, ele será iniciado. 

1. Se o temporizador de ociosidade expirar enquanto o contato de chat estiver em um bloco **Aguardar**, o contato NÃO é roteado para a ramificação **Tempo expirado**. Nenhuma ação é executada se esse cenário ocorrer. 

### Desconexão automática de participantes personalizados
<a name="auto-disconnecting"></a>

Quando um temporizador de desconexão automática expira, o participante personalizado é desconectado do chat. 

O Amazon Connect executa uma das seguintes etapas quando os temporizadores de desconexão automática expiram:

1. Atualmente, o chat reside em um bloco [Aguardar](wait.md) configurado para um participante personalizado. 
   + O participante personalizado é desconectado do chat, e o chat retoma o fluxo com a ramificação **Participante do bot desconectado**.

1. Atualmente, o chat reside em um bloco [Aguardar](wait.md) configurado para o cliente OU o chat não está em um bloco **Aguardar**.
   + O participante personalizado é desconectado do chat e nenhuma outra ação é realizada. 

## Mensagens exibidas aos participantes
<a name="chat-timeouts-events"></a>

As mensagens são exibidas para todos os participantes quando qualquer um dos seguintes eventos acontece:
+ Um participante fica ocioso.
+ Um participante inativo envia uma mensagem e não está mais ocioso.
+ Ocorre uma desconexão automática. Como está desconectado, o atendente não consegue ver a mensagem.

Esses eventos não persistem nas transcrições nem são cobrados.

As mensagens padrão (em todos os idiomas aceitos) são exibidas aos atendentes no Painel de controle de contato (CCP) para cada um desses eventos. 

A imagem a seguir mostra exemplos de mensagens de ociosidade padrão que o atendente veria no CCP. Por exemplo, o *Atendente ficou inativo*.

![\[O CCP, as mensagens de ociosidade padrão.\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/chat-timeout-message.png)


## Uso recomendado
<a name="chat-timeouts-usage"></a>

Para usar o recurso de tempo limite do chat, recomendamos que você faça o seguinte:

1. Incorpore uma chamada para a [UpdateParticipantRoleConfig](https://docs.aws.amazon.com/connect/latest/APIReference/API_UpdateParticipantRoleConfig.html)ação em um Lambda em um fluxo de contato.

1. Dependendo do seu caso de uso, coloque o Lambda imediatamente após iniciar o chat (no início do fluxo) ou logo antes de encaminhar o contato para uma fila.

## Personalizar a interface de usuário do chat do cliente para um evento de desconexão
<a name="chat-timeouts-ui"></a>

Para personalizar a interface de usuário do chat do seu cliente para um evento de desconexão, consulte os seguintes métodos no [ChatJS](https://github.com/amazon-connect/amazon-connect-chatjs):
+ `onParticipantIdle(callback)`
+ `onParticipantReturned(callback)`
+ `onAutoDisconnection(callback)`

Use esses métodos para registrar manipuladores de retorno de chamada que são acionados quando os novos eventos chegam.

# Habilitar notificações por push para chat móvel
<a name="enable-push-notifications-for-mobile-chat"></a>

As notificações por push para chat móvel são configuradas por meio do [AWS End User Messaging](https://docs.aws.amazon.com/sms-voice/latest/userguide/what-is-service.html). É possível habilitar as notificações por push para chat móvel em dispositivos iOS ou Android, permitindo alertar os clientes sobre novas mensagens mesmo quando eles não estão usando ativamente sua aplicação móvel. Você pode ativar esse recurso em seu aplicativo existente integrado ao [Amazon Connect celular SDKs](https://docs.aws.amazon.com/connect/latest/adminguide/integrate-chat-with-mobile.html), a uma [solução de webview](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/mobileChatExamples) ou a uma solução nativa personalizada. 

 As etapas e os recursos a seguir ajudarão você a começar a integrar notificações Amazon Connect push em seus aplicativos móveis nativos: 

## Etapa 1: obter credenciais do console FCM da Apple APNs e do Google
<a name="step-1-enable-push-notifications-for-mobile-chat"></a>

Para configurar para que ele Amazon Connect possa enviar notificações push para seus aplicativos, primeiro você precisa obter credenciais do console FCM da Apple APNs e do Google que permitirão que o [AWS End User Messaging](https://docs.aws.amazon.com/sms-voice/latest/userguide/what-is-service.html) envie notificações para seus aplicativos móveis. As credenciais que você fornece dependem do sistema de notificação por push usado: 
+  Para obter as credenciais do serviço Apple Push Notification (APNs), consulte [Obter uma chave de criptografia e um ID de chave da Apple](https://developer.apple.com/documentation/usernotifications/establishing-a-token-based-connection-to-apns#Obtain-an-encryption-key-and-key-ID-from-Apple) e [Obter um certificado de provedor da Apple](https://developer.apple.com/documentation/usernotifications/establishing-a-certificate-based-connection-to-apns#Obtain-a-provider-certificate-from-Apple) na documentação do desenvolvedor da Apple. 
+  É possível receber as credenciais do Firebase Cloud Messaging (FCM) do Google por meio do console do Firebase. Consulte [Firebase Cloud Messaging](https://firebase.google.com/docs/cloud-messaging). 

## Etapa 2: criar um aplicativo de serviço de mensagens para o usuário AWS final usando o AWS console e ativar o canal de notificação push para o FCM ou APNs
<a name="step-2-enable-push-notifications-for-mobile-chat"></a>

 Antes de habilitar o Amazon Connect para enviar notificações por push, primeiro você precisa [criar uma aplicação do AWS End User Messaging e habilitar o canal de notificações por push](https://docs.aws.amazon.com/push-notifications/latest/userguide/procedure-enable-push.html) no [console da AWS](https://console.aws.amazon.com/push-notifications/).

 Siga estas instruções para criar uma aplicação e habilitar qualquer um dos canais por push. Para concluir esse procedimento, basta inserir o nome da aplicação. Você pode habilitar ou desabilitar qualquer um dos canais por push posteriormente: 

1.  Abra o console AWS End User Messaging Push em [https://console.aws.amazon.com/push-notifications/](https://console.aws.amazon.com/push-notifications/) 

1.  Selecione **Criar aplicativo**. 

1.  Em **Nome da aplicação**, insira um nome para sua aplicação. 

1.  (Opcional) Siga esta etapa opcional para ativar o **serviço Apple Push Notification (APNs)**. 

   1.  Para o **serviço Apple Push Notification (APNs)**, selecione **Ativar**. 

   1.  Em **Tipo de autenticação padrão**, selecione: 

      1.  Se você escolher **Credenciais chave**, forneça as seguintes informações da sua conta de desenvolvedor da Apple. AWS O End User Messaging Push requer essas informações para criar tokens de autenticação. 

         1.  **ID de chave**: o ID atribuído à sua chave de assinatura. 

         1.  **Identificador do pacote**: o ID atribuído ao seu aplicativo iOS. 

         1.  **Identificador da equipe**: o ID atribuído à sua equipe de conta de Desenvolvedor da Apple. 

         1.  **Chave de autenticação**: o arquivo .p8 que você baixa da sua conta de desenvolvedor da Apple ao criar uma chave de autenticação. 

      1.  Se você escolher **Credenciais do certificado**, forneça as seguintes informações: 

         1.  **Certificado SSL**: o arquivo .p12 do certificado TLS. 

         1.  **Senha do certificado**: se você atribuiu uma senha ao certificado, insira-a aqui. 

         1.  **Tipo de certificado**: selecione o tipo de certificado a ser usado. 

1.  (Opcional) Siga esta etapa opcional para habilitar o **Firebase Cloud Messaging (FCM**). 

   1.  No caso do **Firebase Cloud Messaging (FCM)**, selecione **Habilitar**. 

   1.  Escolha **Credenciais de token** para o **Tipo de autenticação padrão** e, depois, escolha seu arquivo JSON de serviço. 

1.  Selecione **Criar aplicativo**. 

## Etapa 3: associar o aplicativo AWS End User Messaging a uma Amazon Connect instância
<a name="step-3-enable-push-notifications-for-mobile-chat"></a>

 Para habilitar notificações push em uma [Amazon Connect instância](https://docs.aws.amazon.com/connect/latest/adminguide/find-instance-arn.html), você precisará associar um aplicativo de mensagens de usuário AWS final a uma [Amazon Connect instância](https://docs.aws.amazon.com/connect/latest/adminguide/find-instance-arn.html) chamando a [CreateIntegrationAssociation](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateIntegrationAssociation.html)API com `PINPOINT_APP` [IntegrationType](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateIntegrationAssociation.html#API_CreateIntegrationAssociation_RequestSyntax)o. É possível chamar essa API com [AWS CLI](https://docs.aws.amazon.com/cli/latest/reference/connect/create-integration-association.html) ou com o [SDK do Amazon Connect](https://aws.amazon.com/developer/tools/) para qualquer idioma aceito. Essa é uma etapa única de integração necessária para cada integração entre um aplicativo de mensagens de usuário AWS final e uma Amazon Connect instância. 

## Etapa 4: obtenha o token do dispositivo com o FCM ou o APNs SDK e registre-o com Amazon Connect
<a name="step-4-enable-push-notifications-for-mobile-chat"></a>

Você precisará buscar o token do dispositivo e usá-lo para registrar um dispositivo móvel do usuário final com um contato de Amazon Connect bate-papo para enviar notificações push para novas mensagens no bate-papo. Leia a documentação do FCM/APNs desenvolvedor abaixo para saber como o token do dispositivo é gerado e obtido do aplicativo móvel.
+  Para o serviço Apple Push Notification (APN), consulte [Registrar seu aplicativo APNs na documentação](https://developer.apple.com/documentation/usernotifications/registering-your-app-with-apns) do Apple Developer.
+  Em relação ao Firebase Cloud Messaging (FCM), consulte [Práticas recomendadas de gerenciamento do token de registro do FCM](https://firebase.google.com/docs/cloud-messaging/manage-tokens).

 Para registrar o dispositivo com um contato de chat, recomendamos fazer o seguinte: 

1.  Quando o aplicativo móvel chamar a [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)API, transmita o `deviceToken` e `deviceType` como [atributos de contato](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html#connect-StartChatContact-request-Attributes). Para usuários do webview e do widget de comunicação hospedado, consulte [Como transmitir atributos de contato para o widget de comunicação](https://docs.aws.amazon.com/connect/latest/adminguide/pass-contact-attributes-chat.html#how-to-contact-attributes-chatwidget) para acessar mais detalhes.

1.  Incorpore uma chamada para a [CreatePushNotificationRegistration](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateIntegrationAssociation.html)ação em uma função Lambda em um fluxo de contato. O bloco de fluxo deve ler o `deviceToken` e o `deviceType` por meio dos atributos de contato definidos pelo usuário e o `initialContactId` dos atributos do sistema e, depois, transmitir esses valores para a função do Lambda.

   1.  Dependendo do seu caso de uso, coloque a função do Lambda imediatamente após iniciar o chat (no início do fluxo), se você quiser que o usuário final receba notificações por push imediatamente, ou logo antes de encaminhar o contato para uma fila para que ele receba o contato somente quando o atendente estiver prestes a entrar. Depois que a chamada de API for feita, o dispositivo começará a receber notificações por push quando uma nova mensagem for enviada pelo atendente ou pelo sistema. Por padrão, as notificações por push serão enviadas para todas as mensagens do sistema e do atendente.  
![\[Invoque o bloco de fluxo da função do lambda no designer de fluxo do site de administração do Amazon Connect .\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/step-4-set-up-push-notifications-for-mobile-chat-1.png)

1.  (opcional) Incorpore uma chamada para a [DeletePushNotificationRegistration](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateIntegrationAssociation.html)ação em uma função Lambda em um fluxo. Depois que a chamada de API for feita, o dispositivo deixará de receber notificações por push quando uma nova mensagem for enviada pelo atendente ou pelo sistema.

## Etapa 5: receber notificações por push suas aplicações móveis
<a name="step-5-enable-push-notifications-for-mobile-chat"></a>

 Confira nosso projeto de [exemplos de interface de usuário do Amazon Connect Chat](https://github.com/amazon-connect/amazon-connect-chat-ui-examples) e consulte nossos exemplos de visualizações na web de bate-papo para [iOS](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/mobileChatExamples/iOS-WKWebView-sample) e [Android](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/mobileChatExamples/android-webview-sample) que mostram como Amazon Connect APIs integrar e receber notificações push.

## Monitorar o uso de notificações por push
<a name="monitor-your-usage-for-push-notification"></a>

 Para garantir a confiabilidade, a disponibilidade e o desempenho de suas notificações por push, é fundamental monitorar o uso delas. É possível acompanhar essas informações por meio de vários canais: 

1.  AWS fornece ferramentas abrangentes de monitoramento para notificações push. Para obter mais informações, consulte [Monitorando AWS o push de mensagens do usuário final](https://docs.aws.amazon.com/push-notifications/latest/userguide/monitoring-overview.html). 

1.  Dependendo do serviço de notificação por push que você está usando, você pode acessar dados de uso adicionais por meio de seus respectivos consoles. 

   1.  Firebase Cloud Messaging (FCM): consulte na documentação do FCM o capítulo [Noções básicas sobre o envio de mensagens](https://firebase.google.com/docs/cloud-messaging/understand-delivery?platform=android) para acessar informações sobre o uso do FCM. 

   1.  Serviço de notificação push da Apple (APNs): consulte a seção de APNs documentação sobre como [visualizar o status das notificações push usando métricas e APNs](https://developer.apple.com/documentation/usernotifications/viewing-the-status-of-push-notifications-using-metrics-and-apns) monitorar o status das notificações. 

# Permitir que os clientes retomem conversas de chat no Amazon Connect
<a name="chat-persistence"></a>

Os clientes geralmente iniciam um chat, depois saem da conversa e retornam mais tarde para continuar conversando. Isso pode acontecer muitas vezes ao longo de vários dias, meses ou até anos. Para oferecer suporte a chats de longa duração como esses, habilite o chat persistente. 

Com o chat persistente, os clientes podem retomar conversas anteriores com o contexto, os metadados e as transcrições transferidos. Eles não precisam se repetir quando retornam ao chat, e os atendentes têm acesso a todo o histórico de conversas. 

## Reidratação do chat
<a name="rehydration"></a>

O chat persistente é obtido por meio de um processo chamado reidratação do chat. Esse processo permite que as transcrições de chat sejam recuperadas de contatos de chat anteriores e exibidas. Ele permite que clientes e atendentes continuem as conversas de onde pararam com facilidade.

**Importante**  
Somente as sessões de chat que terminaram podem ser reidratadas em uma nova sessão de chat, pois a geração da transcrição ocorre de forma assíncrona.   
Os usuários devem esperar de 30 a 60 segundos antes de tentar se reidratar de um chat encerrado anteriormente.

Amazon Connect suporta dois tipos de reidratação:
+ `ENTIRE_PAST_SESSION`: inicia uma nova sessão de chat e reidrata todos os segmentos de chat de sessões anteriores.
+ `FROM_SEGMENT`: inicia uma nova sessão e se reidrata a partir do segmento de chat anterior especificado.

Por exemplo, casos de uso que mostram esses diferentes modos de reidratação, consulte [Exemplo de casos de uso](#persistentchatscenario).

## RelatedContactId
<a name="relatedcontactid"></a>

Um novo contato pode ter uma associação com um contato existente por meio do `RelatedContactId`. Esse novo contato contém uma cópia das [propriedades do contato](connect-attrib-list.md) relacionado.

Para obter mais informações sobre como o `RelatedContactId` é modelado em registros de contato, consulte [Modelo de dados para registros de contato do Amazon Connect](ctr-data-model.md).

Para um chat persistente, `RelatedContactId` mostra o `contactId` usado para reidratar o chat.

## Como habilitar o chat persistente
<a name="enable-persistent-chat"></a>

É possível habilitar o chat persistente de duas maneiras:
+ Especifique um ID de contato anterior ao criar um chat. Para instruções, consulte [Habilitar o chat persistente ao criar um contato de chat](#enable-persistent-chat-creating-new-chat-contact).
+ Adicione o bloco [Criar associação de contato persistente](create-persistent-contact-association-block.md) a um fluxo. Para instruções, consulte [Habilitar o chat persistente em um fluxo](#enable-persistent-chat-within-contact-flow).

**nota**  
Você pode escolher qualquer um dos métodos para manter os chats, mas não os dois. Ou seja, você só pode habilitar a persistência de um `SourceContactID` em um novo chat uma vez.

Para oferecer experiências de chat persistentes, você precisa fornecer um ID de contato anterior ao iniciar um novo chat ou ao usar o bloco de fluxo [Criar uma associação de contato persistente](create-persistent-contact-association-block.md). Isso não é feito automaticamente para você. Recomendamos que você crie um repositório para armazenar dados de registros de contatos. O repositório permite a recuperação desses dados para cada cliente. 

 Há duas maneiras de criar entradas em um repositório: 
+ Use a [transmissão de mensagens de chat](https://docs.aws.amazon.com/connect/latest/adminguide/chat-message-streaming.html) para criar uma entrada quando um chat terminar.
+ Inspecione os [eventos de contato](https://docs.aws.amazon.com/connect/latest/adminguide/contact-events.html#contact-events-data-model) e use a [função do AWS Lambda](https://docs.aws.amazon.com/connect/latest/adminguide/connect-lambda-functions.html) para criar entradas em seu repositório. 

Depois que um repositório é configurado, você pode recuperar o ID de contato anterior do cliente e fornecê-lo ao iniciar um novo chat ou dentro do bloco de fluxo [Criar uma associação de contato persistente](create-persistent-contact-association-block.md).

Além disso, verifique se as transcrições de chat anteriores podem ser recuperadas do bucket do Amazon S3 da instância. Os dois seguintes pontos impedem que o Amazon Connect recupere as transcrições e não permitem a persistência de chat:
+ O uso vários buckets de transcrição de chat.
+ A alteração do nome do arquivo de transcrição do chat que é gerado pelo Amazon Connect.

### Habilitar o chat persistente ao criar um contato de chat
<a name="enable-persistent-chat-creating-new-chat-contact"></a>

Para configurar experiências de bate-papo persistentes ao criar um novo contato de bate-papo, forneça o anterior `contactId` no `SourceContactId` parâmetro da [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)API. Isso permite que as transcrições de chat de contatos anteriores sejam reidratadas. As transcrições são exibidas no chat tanto para o cliente quanto para o atendente. Para ver um exemplo, consulte [Exemplo de casos de uso](#persistentchatscenario).

### Habilitar o chat persistente em um fluxo
<a name="enable-persistent-chat-within-contact-flow"></a>

Como configurar experiências de chat persistente em um fluxo:

1. Depois de criar um contato de chat, adicione o bloco [Criar associação de contato persistente](create-persistent-contact-association-block.md) ao fluxo.

1. Use um atributo definido pelo usuário para especificar um ID de contato de origem.

Como alternativa, você pode usar a [CreatePersistentContactAssociation](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreatePersistentContactAssociation.html)API para fornecer uma ID de contato de origem para tornar o bate-papo atual persistente.

A reidratação é iniciada após o início do chat, ao usar o bloco de fluxo ou a API. Um evento de reidratação é emitido para notificar você quando a reidratação for concluída.

## Exemplo de casos de uso
<a name="persistentchatscenario"></a>

Por exemplo, um cliente inicia uma sessão de chat:

1. O atendente a1 aceita o chat e a conversa começa entre o cliente e o atendente a1. Esse é o primeiro contato criado na sessão de chat atual. Por exemplo, o `contactId` **C1** pode ser 11111111-aaaa-bbbb-1111-1111111111111. 

1. O atendente a1 então transfere o chat para o atendente a2. Isso cria outro contato. Por exemplo, `contactId` **C2** pode ser 2222222-aaaa-bbbb-2222-222222222222222. 

1. O atendente a2 encerra o chat.

1. O cliente é encaminhado para o fluxo de desconexão para uma pesquisa pós-chat que cria outro contato. Por exemplo, `contactId` **C3** pode ser 33333333-aaaa-bbbb-3333-3333333333333.

1. A pesquisa pós-chat é exibida e a sessão de chat termina. 

1. Posteriormente, o cliente retorna e deseja retomar a sessão de chat anterior.

Neste momento, há possivelmente dois casos de uso diferentes para o cliente. A seguir estão os casos de uso de chat persistente que o cliente pode ter e como você configura o Amazon Connect para fornecê-los.

### Caso de uso 1
<a name="persistentchatscenario-usecase1"></a>

O cliente quer continuar a última sessão de chat, mas quer ocultar a pesquisa pós-chat. Você usa a configuração a seguir para fornecer essa experiência. 

**Solicitação:**

```
PUT /contact/chat HTTP/1.1
Content-type: application/json
{
   "Attributes": { 
      "string" : "string" 
   },
   "ContactFlowId": "string",
   "InitialMessage": { 
      "Content": "string",
      "ContentType": "string"
   },
   "InstanceId": "string",
   ... // other chat fields
     
   // NEW Attribute for persistent chat 
   "PersistentChat" : {
       "SourceContactId":"2222222-aaaa-bbbb-2222-222222222222222" 
       "RehydrationType":"FROM_SEGMENT"
   }
}
```

#### Configuração
<a name="usecase1-configuration"></a>
+ SourceContactId = 2222222-aaaa-bbbb-2222-222222222222222 (o ContactID para C2)
+ RehydrationType = "`FROM_SEGMENT`"

#### Comportamento esperado
<a name="usecase1-behavior"></a>
+ Essa configuração inicia uma sessão de chat persistente a partir do contato final anterior especificado C2 (por exemplo, 2222222-aaaa-bbbb-2222222222222222222). 

  As transcrições das sessões de chat anteriores C2 (2222222-aaaa-bbbb-2222-2222222222222) e C1 (11111111-aaaa-bbbb-1111-1111111111111) estão acessíveis na sessão de chat persistente atual. Observe que o segmento de chat C3 (33333333-aaaa-bbbb-3333-33333333333) foi removido da sessão de chat persistente.
+ Nesse caso, a [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)resposta retorna C2 (2222222-aaaa-bbbb-2222-222222222222222) como "”. ContinuedFromContactId
+ O `RelatedContactId` desta sessão de chat persistente é 2222222-aaaa-bbbb-2222-222222222222222 (C2).

### Caso de uso 2
<a name="persistentchatscenario-usecase2"></a>

O cliente quer continuar a sessão de chat anterior e ver a transcrição de todo o engajamento anterior (e não quer ocultar a pesquisa pós-chat). Você usa a configuração a seguir para fornecer essa experiência. 

**nota**  
 Para o tipo de reidratação `ENTIRE_PAST_SESSION`, especifique o primeiro contato (`contactId` inicial) da última sessão de chat como o atributo `SourceContactId`.

**Solicitação:**

```
PUT /contact/chat HTTP/1.1
Content-type: application/json
{
   "Attributes": { 
      "string" : "string" 
   },
   "ContactFlowId": "string",
   "InitialMessage": { 
      "Content": "string",
      "ContentType": "string"
   },
   "InstanceId": "string",
   ... // other chat fields
     
   // NEW Attribute for persistent chat 
   "PersistentChat":{
        "SourceContactId":"11111111-aaaa-bbbb-1111-1111111111111" // (first contactId C1)
        "RehydrationType":"ENTIRE_PAST_SESSION"
   }
}
```

#### Configuração
<a name="usecase2-configuration"></a>
+ SourceContactId = `11111111-aaaa-bbbb-1111-1111111111111` (C1)
+ RehydrationType = “E`NTIRE_PAST_SESSION`”

#### Comportamento esperado
<a name="usecase2-behavior"></a>
+ Isso inicia uma sessão de chat persistente a partir do contato de chat encerrado mais recentemente (C3). As transcrições das sessões de chat anteriores C3, C2 e C1 estão acessíveis na sessão de chat persistente atual.
+ Nesse caso, a [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)resposta retorna 33333333-aaaa-bbbb-3333-3333333333333 (C3) como "”. ContinuedFromContactId
+ O `RelatedContactId` desta sessão de chat persistente é 33333333-aaaa-bbbb-3333-3333333333333 (C3)

**nota**  
Os links de chat são cumulativos. Depois que as sessões de chat são vinculadas, elas são transferidas.  
Por exemplo, se um contato (`contactId` C2) que pertence a uma sessão de chat anterior foi vinculado a um contato (`contactId` C1) de outra sessão de chat anterior, uma nova sessão de chat persistente criada pela vinculação de C2 também resultará na vinculação implícita de C1. A nova sessão de chat persistente terá o seguinte link: C3 → C2 → C1  
O contactiD anterior, a partir do qual a sessão de bate-papo persistente é continuada, é exposto no campo na `ContinuedFromContactId` [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)resposta da API. Também está no campo RelatedContactId no [registro de contato](ctr-data-model.md#ctr-ContactTraceRecord).

## Como acessar a transcrição de contatos de chat anteriores para um chat persistente
<a name="access-past-chat-transcript"></a>

O acesso à transcrição do chat anterior para chat persistente usa o modelo de paginação `NextToken` existente. A chamada inicial para [GetTranscript](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_GetTranscript.html)uma sessão de bate-papo persistente recém-iniciada contém um `NextToken` na resposta, se existirem mensagens de bate-papo anteriores. `NextToken`deve ser usado para acessar a transcrição do bate-papo anterior, além de definir o “`ScanDirection`to” `BACKWARD` na [GetTranscript](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_GetTranscript.html)chamada subsequente para buscar mensagens de bate-papo anteriores. 

Se houver várias mensagens de bate-papo anteriores, [GetTranscript](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_GetTranscript.html)retornará uma nova `NextToken` e o mesmo processo poderá ser repetido para obter mais transcrições de conversas anteriores.

## Não suportado: usar filtros `StartPosition` e `contactId` para chat persistente
<a name="startposition"></a>

Amazon Connect não suporta o uso `StartPosition` e `contactId` os filtros na [GetTranscript](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_GetTranscript.html)chamada de atributos do item de transcrição que são do bate-papo anterior. 

# Habilitar a transmissão em tempo real de mensagens de chat no Amazon Connect
<a name="chat-message-streaming"></a>

O Amazon Connect Chat fornece [APIs](https://docs.aws.amazon.com/connect/latest/APIReference/Welcome.html)serviços que permitem que você assine um stream de mensagens de bate-papo em tempo real. Com eles APIs, você pode: 
+ Transmitir mensagens de chat em tempo real quando um novo contato de chat for criado.
+ Estender a funcionalidade atual do Amazon Connect Chat para oferecer suporte a casos de uso, como criar integrações com soluções de SMS e aplicações de mensagens de terceiros, habilitar notificações por push móveis e criar painéis de análise para monitorar e rastrear a atividade de mensagens de chat. 

**nota**  
Esta página descreve como assinar um endpoint do SNS para streaming em tempo real de mensagens de bate-papo no Amazon Connect. Se você estiver tentando habilitar o streaming de mensagens para interações conversacionais de IA no Amazon Connect, consulte[Ative o streaming de mensagens para bate-papo com tecnologia de IA](message-streaming-ai-chat.md).

## Como funciona o streaming de APIs mensagens
<a name="how-chat-message-streaming-apis-work"></a>

O [streaming de mensagens do Amazon Connect APIs](https://docs.aws.amazon.com/connect/latest/APIReference/Welcome.html) é acionado quando certos eventos ocorrem em um contato do Amazon Connect Chat. Por exemplo, quando um cliente envia uma nova mensagem de chat, o evento envia uma [carga útil](sns-payload.md) para um endpoint específico contendo dados sobre a mensagem que acabou de ser enviada. As mensagens são publicadas usando o [Amazon Simple Notification Service](https://docs.aws.amazon.com/sns/latest/dg/welcome.html) (Amazon SNS) para um endpoint específico. 

Este tópico descreve como configurar a transmissão de mensagens em tempo real usando o Amazon Connect e o Amazon SNS. As etapas são: 

1. Use o console do Amazon SNS para criar um novo tópico padrão do SNS e configurar as mensagens.

1. Chame a [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)API para iniciar o contato no chat.

1. Chame a [StartContactStreaming](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartContactStreaming.html)API para iniciar o streaming de mensagens. 

1. Chame a [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html)API para criar a conexão do participante.

## Etapa 1: Criar um tópico padrão do SNS
<a name="step1-chat-streaming"></a>

1. Acesse o console do Amazon SNS. 

1. [Crie um tópico do SNS](https://docs.aws.amazon.com/sns/latest/dg/sns-create-topic.html) na sua AWS conta. Na seção **Detalhes**, em **Tipo**, escolha **Padrão**, insira um nome para o tópico e escolha **Criar tópico**.
**nota**  
Atualmente, o streaming de mensagens suporta APIs apenas o SNS padrão para streaming de mensagens em tempo real. Elas não são compatíveis com [tópicos FIFO (primeiro a entrar, primeiro a sair) do Amazon SNS](https://docs.aws.amazon.com/sns/latest/dg/sns-fifo-topics.html). 

1. Depois de criar o tópico, o nome do recurso da Amazon (ARN) é exibido na seção **Detalhes**. Copie o ARN do tópico para a área de transferência. Você usará o ARN do tópico na próxima etapa e em [Etapa 3: Habilitar a transmissão de mensagens no contato](#step3-chat-streaming). 

   O ARN do tópico é semelhante ao seguinte exemplo: 

   ```
   arn:aws:sns:us-east-1:123456789012:MyTopic                                
   ```

1. Escolha a guia **Política de acesso**, escolha **Editar** e, em seguida, adicione uma política baseada em recursos no tópico do SNS para que o Amazon Connect tenha permissão para publicar nele. Veja a seguir um exemplo de política do SNS que você pode copiar e colar no editor JSON e, em seguida, personalizar com seus valores: 

------
#### [ JSON ]

****  

   ```
   {
      "Version":"2012-10-17",		 	 	 
      "Statement":[
         {
            "Effect":"Allow",
            "Principal":{
               "Service":"connect.amazonaws.com"
            },
            "Action":"sns:Publish",
            "Resource":"arn:aws:sns:us-east-1:111122223333:TopicName",
            "Condition":{
               "StringEquals":{
                   "aws:SourceAccount":"111122223333"
               },
               "ArnEquals":{
               "aws:SourceArn":"arn:aws:connect:us-east-1:111122223333:instance/InstanceId"
               }
            }
         }
      ]
   }
   ```

------
**nota**  
A **Política de acesso** padrão vem com condições aplicadas ao `sourceOwner` como:   

   ```
   "Condition": {
           "StringEquals": {
             "AWS:SourceOwner": "921772911154"
           }
         }
   ```
Remova e substitua por `SourceAccount`, por exemplo:  

   ```
   "Condition":{
               "StringEquals":{
                  "aws:SourceAccount":"YOUR_AWS_ACCOUNT_ID"
               },
               "ArnEquals":{
                  "aws:SourceArn":"YOUR_CONNECT_INSTANCE_ARN"
               }
            }
   ```
Isso evita um problema de [substituto confuso entre serviços](cross-service-confused-deputy-prevention.md). 

1. Se você estiver usando criptografia do lado do servidor no SNS, verifique se você tem a permissão `connect.amazonaws.com` habilitada na KMS key. Veja a seguir um exemplo de política:

------
#### [ JSON ]

****  

   ```
   {
       "Version":"2012-10-17",		 	 	 
       "Id": "key-consolepolicy-3",
       "Statement": [
           {
               "Sid": "Enable IAM User Permissions",
               "Effect": "Allow",
               "Principal": {
                   "AWS": "arn:aws:iam::111122223333:root",
                   "Service": "connect.amazonaws.com"
               },
               "Action": "kms:*",
               "Resource": "*"
           },
           {
               "Sid": "Allow access for Key Administrators",
               "Effect": "Allow",
               "Principal": {
                   "AWS": "arn:aws:iam::111122223333:root",
                   "Service": "connect.amazonaws.com"
               },
               "Action": [
                   "kms:Create*",
                   "kms:Describe*",
                   "kms:Enable*",
                   "kms:List*",
                   "kms:Put*",
                   "kms:Update*",
                   "kms:Revoke*",
                   "kms:Disable*",
                   "kms:Get*",
                   "kms:Delete*",
                   "kms:TagResource",
                   "kms:UntagResource",
                   "kms:ScheduleKeyDeletion",
                   "kms:CancelKeyDeletion"
               ],
               "Resource": "*"
           }
       ]
   }
   ```

------

## Etapa 2: Iniciar o contato do chat
<a name="step2-chat-streaming"></a>

1. Ligue para a [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)API do Amazon Connect para iniciar o contato por chat. 

   Para obter informações sobre como criar o cliente SDK para chamar o Amazon Connect APIs, consulte os seguintes tópicos:
   + [Classe AmazonConnectClientBuilder](https://docs.aws.amazon.com/AWSJavaSDK/latest/javadoc/com/amazonaws/services/connect/AmazonConnectClientBuilder.html) 
   + [Criar clientes de serviço](https://docs.aws.amazon.com/sdk-for-java/v1/developer-guide/creating-clients.html) 

1. Acompanhe a [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)resposta `ContactId` e a `ParticipantToken` partir dela, pois esses atributos de resposta são usados para chamar outro bate-papo APIs necessário para habilitar o streaming. Isso é descrito nas próximas etapas.

## Etapa 3: Habilitar a transmissão de mensagens no contato
<a name="step3-chat-streaming"></a>
+ Ligue [StartContactStreaming](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartContactStreaming.html)para ativar o streaming de mensagens em tempo real para seu tópico do SNS.
  + **Limites**: você pode assinar até dois tópicos do SNS por contato.
  + Ao ligar [StartContactStreaming](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartContactStreaming.html), você precisará fornecer o Amazon Resource Name (ARN) do tópico do SNS (consulte). [Etapa 1: Criar um tópico padrão do SNS](#step1-chat-streaming)

    Um único ARN de tópico do SNS pode ser usado em Contas da AWS vários, mas deve estar na mesma região da sua instância do Amazon Connect. Por exemplo, se o ARN do seu tópico estiver em **us-east-1**, sua instância do Amazon Connect deverá estar em **us-east-1**.
  + Para mensagens de bate-papo iniciais que não são recebidas no endpoint de streaming, você pode chamar a [GetTranscript](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_GetTranscript.html)API para receber as mensagens iniciais.

## Etapa 4: Criar a conexão do participante
<a name="step4-chat-streaming"></a>
+ Chamada [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html)com o `ConnectParticipant` atributo passado como verdadeiro. 
  + Você deve ligar [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html)dentro de cinco minutos após criar o bate-papo.
  + Ligar [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html)com `ConnectParticipant` set como true só funciona se você habilitou o streaming [Etapa 2: Iniciar o contato do chat](#step2-chat-streaming) e o participante da chamada está`Customer`.
  + Essa etapa (criar a conexão do participante) é opcional se você já se conectou com sucesso ao contato do chat usando `WEBSOCKET`.

## Próximas etapas
<a name="nextsteps-chat-streaming"></a>

Você está pronto para trabalhar com o streaming de mensagens APIs.

1. Para verificar se está funcionando, verifique se as mensagens foram publicadas no tópico do SNS que você criou. Você pode fazer isso usando as CloudWatch métricas da Amazon. Para obter instruções, consulte [Tópicos de monitoramento do Amazon SNS usando](https://docs.aws.amazon.com/sns/latest/dg/sns-monitoring-using-cloudwatch.html). CloudWatch 

1. Como o SNS tem [retenção limitada](https://aws.amazon.com/blogs//aws/sns-ttl-control/), recomendamos que você configure o [Amazon Simple Queue Service (Amazon SQS)](https://aws.amazon.com/sqs/), o [Amazon Kinesis](https://aws.amazon.com/kinesis/) ou outro serviço para reter mensagens. 

1. [StopContactStreaming](https://docs.aws.amazon.com/connect/latest/APIReference/API_StopContactStreaming.html)O uso é opcional e não obrigatório se os bate-papos estiverem sendo [desconectados](disconnect-hang-up.md) por meio de um fluxo de contato ou se o cliente desconectar o bate-papo. No entanto, `StopContactStreaming` oferece a opção de interromper a transmissão de mensagens no tópico do SNS, mesmo se o chat estiver ativo e contínuo.

# Usar a carga útil do Amazon SNS após habilitar a transmissão de mensagens no Amazon Connect
<a name="sns-payload"></a>

Depois de habilitar a transmissão de mensagens com sucesso, talvez seja necessário filtrar a mensagem para enviá-la ao participante pretendido: atendente, cliente ou todos.

Para filtrar por participante, leia o atributo específico dos cabeçalhos do SNS— `MessageVisibility` — para determinar se a mensagem é destinada somente ao cliente, somente ao atendente ou a todos. 
+ Para enviar somente para o cliente: para todo o código que o cliente vê, os clientes precisam filtrar as mensagens destinadas ao cliente e criar a seguinte lógica para encaminhar a mensagem para eles.

  ```
  if ( ( MessageVisibility == CUSTOMER || MessageVisibility == ALL)  && ParticipantRole != CUSTOMER )
  ```
+ Para enviar somente para o atendente:

  ```
  if ( ( MessageVisibility == AGENT || MessageVisibility == ALL)  && ParticipantRole != AGENT )
  ```

Você também pode aproveitar o recurso de filtragem no Amazon SNS criando [políticas personalizadas de filtragem de assinaturas](https://docs.aws.amazon.com/sns/latest/dg/sns-subscription-filter-policies.html). Isso descarrega a lógica de filtragem de mensagens do assinante do tópico do SNS para o próprio serviço do SNS.

## Atributos de mensagem na carga útil
<a name="sns-message-attributes"></a>

Veja a seguir uma descrição de cada atributo de mensagem na carga útil do Amazon SNS:
+ `InitialContactId`: o ID de contato inicial do chat.
+ `ContactId`: o ID de contato atual do chat. O `InitialContactId` e `ContactId` pode ser diferente se houver um novo agente no chat ou no fluxo de queue-to-queue contato.
+ `ParticipantRole`: o participante que enviou a mensagem.
+ `InstanceId`: o ID da instância do Amazon Connect.
+ `AccountId`: O ID AWS da conta.
+ `Type`: valores possíveis: `EVENT`, `MESSAGE`.
+ `ContentType`: valores possíveis: `application/vnd.amazonaws.connect.event.typing`, `application/vnd.amazonaws.connect.event.participant.joined`, `application/vnd.amazonaws.connect.event.participant.left`, `application/vnd.amazonaws.connect.event.transfer.succeeded`, `application/vnd.amazonaws.connect.event.transfer.failed`, `application/vnd.amazonaws.connect.message.interactive`, `application/vnd.amazonaws.connect.event.chat.ended` e muito mais. 
+ `MessageVisibility`: valores possíveis: `AGENT`, `CUSTOMER`, `ALL`.

## Exemplo de carga útil do SNS
<a name="sns-message-payload"></a>

```
{
  "Type" : "Notification",
  "MessageId" : "ccccccccc-cccc-cccc-cccc-ccccccccccccc",
  "TopicArn" : "arn:aws:sns:us-west-2:009969138378:connector-svc-test",
  "Message" :  "{\"AbsoluteTime\":\"2021-09-08T13:28:24.656Z\",\"Content\":\"help\",\"ContentType\":\"text/plain\",\"Id\":\"333333333-be0d-4a44-889d-d2a86fc06f0c\",\"Type\":\"MESSAGE\",\"ParticipantId\":\"bbbbbbbb-c562-4d95-b76c-dcbca8b4b5f7\",\"DisplayName\":\"Jane\",\"ParticipantRole\":\"CUSTOMER\",\"InitialContactId\":\"33333333-abc5-46db-9ad5-d772559ab556\",\"ContactId\":\"33333333-abc5-46db-9ad5-d772559ab556\"}",
  "Timestamp" : "2021-09-08T13:28:24.860Z",
  "SignatureVersion" : "1",
  "Signature" : "examplegggggg/1tEBYdiVDgJgBoJUniUFcArLFGfg5JCvpOr/v6LPCHiD7A0BWy8+ZOnGTmOjBMn80U9jSzYhKbHDbQHaNYTo9sRyQA31JtHHiIseQeMfTDpcaAXqfs8hdIXq4XZaJYqDFqosfbvh56VPh5QgmeHTltTc7eOZBUwnt/177eOTLTt2yB0ItMV3NAYuE1Tdxya1lLYZQUIMxETTVcRAZkDIu8TbRZC9a00q2RQVjXhDaU3k+tL+kk85syW/2ryjjkDYoUb+dyRGkqMy4aKA22UpfidOtdAZ/GGtXaXSKBqazZTEUuSEzt0duLtFntQiYJanU05gtDig==",
  "SigningCertURL" : "https://sns.us-west-2.amazonaws.com/SimpleNotificationService-11111111111111111111111111111111.pem",
  "UnsubscribeURL" : "https://sns.us-west-2.amazonaws.com/?Action=Unsubscribe&SubscriptionArn=arn:aws:sns:us-west-2:000000000000:connector-svc-test:22222222-aaaa-bbbb-cccc-333333333333",
  "MessageAttributes" : {
    "InitialContactId" : {"Type":"String","Value":"33333333-abc5-46db-9ad5-d772559ab556"},
    "MessageVisibility" : {"Type":"String","Value":"ALL"},
    "Type" : {"Type":"String","Value":"MESSAGE"},
    "AccountId" : {"Type":"String","Value":"999999999999"},
    "ContentType" : {"Type":"String","Value":"text/plain"},
    "InstanceId" : {"Type":"String","Value":"dddddddd-b64e-40c5-921b-109fd92499ae"},
    "ContactId" : {"Type":"String","Value":"33333333-abc5-46db-9ad5-d772559ab556"},
    "ParticipantRole" : {"Type":"String","Value":"CUSTOMER"}
  }
}
```

# Solucionar problemas com a transmissão de mensagens no Amazon Connect
<a name="troubleshoot-message-streaming"></a>

## As mensagens não estão sendo publicadas no SNS
<a name="message-not-published-to-sns"></a>

Quando isso acontece, recomendamos verificar as informações em [Etapa 1: Criar um tópico padrão do SNS](chat-message-streaming.md#step1-chat-streaming):
+ Verifique se você está usando o SNS padrão e não [FIFO (primeiro a entrar, primeiro a sair) do Amazon SNS](https://docs.aws.amazon.com/sns/latest/dg/sns-fifo-topics.html). Atualmente, o streaming de mensagens APIs suporta somente o SNS padrão para streaming de mensagens em tempo real.
+ Certifique-se de que uma permissão baseada em recursos do SNS seja aplicada corretamente em sua conta.
  + Se a criptografia do lado do servidor estiver habilitada, você precisará dar a mesma permissão da entidade principal do serviço Amazon Connect para criptografar e descriptografar.

## O fluxo não começa
<a name="contact-flow-not-starting"></a>

Se você estiver usando o streaming de mensagens APIs no lugar de websockets, envie um evento de confirmação de conexão; consulte. [Etapa 4: Criar a conexão do participante](chat-message-streaming.md#step4-chat-streaming) Isso é sinônimo de conexão com o websocket. O fluxo começa somente depois do evento de confirmação da conexão.

Ligue [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html)depois [StartContactStreaming](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartContactStreaming.html)para marcar `Customer` como conectado; consulte[Etapa 3: Habilitar a transmissão de mensagens no contato](chat-message-streaming.md#step3-chat-streaming). Isso garante que as mensagens sejam enviadas após você confirmar que o cliente está pronto para recebê-las.

## Problema não resolvido?
<a name="other-issues-message-streaming"></a>

Se, depois de tentar as soluções anteriores, você ainda tiver problemas com o streaming de mensagens, entre em contato Suporte para obter ajuda. 

Os administradores do Amazon Connect podem escolher uma das seguintes opções para entrar em contato com o suporte:
+ Se você tiver uma conta do AWS Support, acesse a [Central de Suporte](https://console.aws.amazon.com/support/home) e envie um ticket.
+ Caso contrário, abra o [Console de gerenciamento da AWS](https://console.aws.amazon.com/) e escolha **Amazon Connect**, **Suporte**, **Criar caso**.

É útil fornecer as seguintes informações:
+ ID/ARN da instância da central de atendimento. Para localizar o ARN da instância, consulte [Encontrar o ID ou ARN da instância do Amazon Connect](find-instance-arn.md). 
+ Sua região. 
+ Uma descrição detalhada do problema.

# Personalizar experiências de fluxo de chat do Amazon Connect integrando participantes personalizados
<a name="chat-customize-flow"></a>

Você pode integrar outras soluções, como bots, ao chat do Amazon Connect para criar experiências personalizadas de fluxo de chat.

Veja a seguir uma visão geral de como você pode personalizar a experiência de fluxo de chat. Implemente essas etapas para cada segmento de chat após o início da conversa. Recomendamos adicionar um [Função AWS Lambda ](invoke-lambda-function-block.md) bloco para ligar para o APIs em seu fluxo de bate-papo. 

**Importante**  
Adicione um bloco [Play prompt (Reproduzir aviso)](play.md) antes de um bloco [Função AWS Lambda ](invoke-lambda-function-block.md). Isso é necessário somente quando um bloco **Invoke AWS Lambda** é o primeiro bloco em seu fluxo de bate-papo de entrada.

1.  [Ative a transmissão em tempo real de mensagens de chat](chat-message-streaming.md). 

1. Ligue para a [CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html)API do Amazon Connect para adicionar um participante personalizado (`ParticipantRole`=`CUSTOM_BOT`) ao contato do chat.

   1. Para obter informações sobre como criar o cliente SDK para chamar o Amazon Connect APIs, consulte os seguintes tópicos:
      + [Classe AmazonConnectClientBuilder](https://docs.aws.amazon.com/AWSJavaSDK/latest/javadoc/com/amazonaws/services/connect/AmazonConnectClientBuilder.html)
      + [Criar clientes de serviço](https://docs.aws.amazon.com/sdk-for-java/v1/developer-guide/creating-clients.html)

   1. Guarde o `ParticipantToken` que foi obtido de [CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html)para ligar [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html). `CreateParticipantConnection`retorna um`ConnectionToken`, que você pode usar para ligar para outro participante do Amazon Connect APIs. 

      Ao ligar [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html)para criar uma conexão para um participante personalizado:
      + Defina `ConnectParticipant` como `True` para marcar o participante personalizado como conectado para transmissão de mensagens.
      + Entre `Type` em contato `CONNECTION_CREDENTIALS` com o Amazon Connect Participant Service subsequente APIs.
      + `CreateParticipantConnection` deve ser chamado dentro de 15 segundos após a chamada de `CreateParticipant`.

1. Depois que o participante é adicionado ao contato, ele pode trocar mensagens com o cliente usando o Amazon Connect Participant Service APIs.

1. Para desconectar o participante, chame a [ DisconnectParticipant](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_DisconnectParticipant.html)API. 

**nota**  
Um participante personalizado não pode ser adicionado a um chat quando um atendente ou bot do Amazon Lex já está presente no contato. 
Um participante personalizado será desconectado quando um atendente ou bot do Amazon Lex entrar em um contato.
Somente um participante personalizado pode estar presente em um contato.
Um participante personalizado não tem permissão para acessar os anexos que um cliente possa carregar.

Recomendamos configurar por quanto tempo um participante personalizado pode conversar com um contato:
+ Defina a propriedade **Tempo limite** no bloco [Aguardar](wait.md) para `ParticipantRole` = `CUSTOM_BOT`.
+ Se o participante do bot personalizado não for desconectado antes do tempo limite, o contato será encaminhado para a ramificação **Tempo expirado**. Isso permite que você decida qual bloco executar em seguida para resolver a consulta do cliente.

**nota**  
Se um contato for encaminhado pela ramificação **Tempo expirado**, ele não será desconectado do contato. Você deve chamar a [ DisconnectParticipant](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_DisconnectParticipant.html)API para desconectar o participante.

## Ativar temporizadores para clientes que estão associados a um participante personalizado
<a name="integrate-bot-extension-client"></a>

Você pode ativar temporizadores em clientes que estão associados a participantes personalizados, como bots personalizados. Isso permite que você detecte quando um cliente para de responder para que você possa encerrar a conversa do bot e realizar a próxima etapa do fluxo. Ao encerrar participantes inativos, é possível reduzir o número de chats abertos em que há um cliente não responsivo interagindo com um participante personalizado.

Execute as etapas a seguir para integrar uma extensão de bot personalizada de participante inativo e, opcionalmente, definir valores de temporizador personalizados. Essas etapas partem do pressuposto de que você já usa o recurso de participantes personalizados no chat. 

1. Antes de o participante personalizado entrar no chat, invoque a [UpdateParticipantRoleConfig](https://docs.aws.amazon.com/connect/latest/APIReference/API_UpdateParticipantRoleConfig.html)API para o cliente.

   1. Os temporizadores são ativados somente para o cliente. Os participantes personalizados não têm temporizadores de participante inativo ou de desconexão automática. 

   1. Você pode escolher o método para invocar a API. 

   1. Os valores do temporizador configurados nesta etapa permanecem ativos pela duração do chat. Se você quiser valores de temporizador diferentes para a **interação entre o cliente e o atendente**, consulte a Etapa 2. 

   1. Se o cliente já estiver configurado dessa forma, você não precisa realizar nenhuma outra ação adicional para integrar o participante personalizado. 

1. (Opcional) Para configurar temporizadores e valores de temporizador que sejam diferentes durante a **interação entre o cliente e o atendente** e durante a **interação entre o cliente e o participante personalizado**:
   + Antes de o agente entrar no chat, invoque a [UpdateParticipantRoleConfig](https://docs.aws.amazon.com/connect/latest/APIReference/API_UpdateParticipantRoleConfig.html)API novamente com as configurações desejadas.

Para obter mais informações sobre os temporizadores de chat, consulte [Configurar tempos limite de chat para participantes do chat](setup-chat-timeouts.md).

### Iniciar os temporizadores
<a name="starting-timers"></a>

Um cronômetro começa para o cliente depois que o participante personalizado estabelece uma conexão com ele usando a [CreateParticipantConnection](https://docs.aws.amazon.com/connect/latest/APIReference/API_connect-participant_CreateParticipantConnection.html)API.

### O que acontece quando participantes não compatíveis entram em um chat com um participante personalizado
<a name="non-compatible-participants"></a>

A seguir, explicamos o que acontece quando um atendente ou participante do bot Lex entra em um chat com um participante personalizado, mas não ele não é um participante compatível: 

1. O participante personalizado é automaticamente desconectado do chat. 

1. Todos os temporizadores anteriormente ativos são encerrados e novos temporizadores são criados para os participantes conectados (se os temporizadores estiverem configurados).

1. Cada novo temporizador também é atualizado com a configuração mais recente (se necessário). Isso efetivamente estabelece uma nova “sessão ociosa” para o novo conjunto de participantes ativos no chat.

### Interação com o temporizador do bloco de espera
<a name="interaction-wait-block-timer"></a>

O temporizador de tempo ocioso não afeta o funcionamento do bloco [Aguardar](wait.md). 

O temporizador do bloco de **Espera** que começa quando o contato do chat entra em um bloco de **Espera** continua funcionando. Se o temporizador do bloco de **Espera** expirar, o contato retoma o fluxo e é encaminhado para a ramificação **Tempo expirado**, independentemente se há um temporizador de participante ocioso ativo ou não.

## Dicas de solução de problemas
<a name="ts-chat-custom-bot"></a>
+ `ResourceNotFoundException`: 

  Se você receber uma `ResourceNotFoundException` para o participante personalizado ao chamar a API `CreateParticipantConnection`, verifique se a API `CreateParticipantConnection` foi chamada dentro de 15 segundos após a API `CreateParticipant`.
+ `AccessDeniedException`: 

  Se você receber um erro `AccessDeniedException` e o perfil do participante for CUSTOM\$1BOT, isso indica que o bot está tentando acessar os anexos. O perfil de participante CUSTOM\$1BOT não tem permissão para acessar os anexos que os clientes carregam.

# Configurar a autenticação do cliente no Amazon Connect para contatos de chat
<a name="customer-auth"></a>

Você pode solicitar que seus clientes entrem e se autentiquem durante um chat. Por exemplo, clientes não autenticados em interação com um bot de chat podem receber uma solicitação para fazer login antes de serem encaminhados a um atendente. 

Esse recurso incorporado utiliza o Amazon Connect Customer Profiles e o [Amazon Cognito](https://aws.amazon.com/cognito/). Não há custos adicionais para usar o Customer Profiles, que já estará [habilitado](enable-customer-profiles.md) em sua instância do Amazon Connect se você escolher as definições padrão durante a configuração. Para acessar informações sobre preços do Amazon Cognito, consulte a página [Preços do Amazon Cognito](https://aws.amazon.com/cognito/pricing/).

Para configurar a autenticação do cliente para o chat:

1. [Habilite a autenticação do cliente](enable-connect-managed-auth.md#enable-customer-auth) para sua instância do Amazon Connect.

1. [Habilitar a mensagem de autenticação](enable-connect-managed-auth.md#enable-auth-message).

1. Adicione um bloco [Autenticar cliente](authenticate-customer.md) ao seu fluxo.

Se sua central de atendimento estiver usando uma solução de autenticação existente externa ao Amazon Connect, consulte [Autenticação pré-chat](pre-chat-auth.md).

# Habilitar a autenticação do cliente para widgets de comunicação hospedados
<a name="enable-connect-managed-auth"></a>

Este tópico explica como configurar a autenticação se você estiver usando o widget de comunicação hospedado do Amazon Connect para chat. Você vai habilitar a autenticação do cliente para sua instância do Amazon Connect e, depois, habilitar uma mensagem de autenticação que vai exibir um link abrindo um pop-up para a interface de usuário hospedada no Amazon Cognito. 

## Políticas do IAM necessárias
<a name="auth-page-iam-policies"></a>

Se você usar políticas personalizadas do IAM para gerenciar o acesso ao console do Amazon Connect, consulte [Permissões obrigatórias para políticas do IAM personalizadas](security-iam-amazon-connect-permissions.md) para ver uma lista das permissões necessárias para acessar a página **Autenticação do cliente**.

## Habilitar a autenticação do cliente na instância do Amazon Connect
<a name="enable-customer-auth"></a>

1. Abra o console do Amazon Connect em [https://console.aws.amazon.com/connect/](https://console.aws.amazon.com/connect/).

1. Na página Instâncias, escolha o alias da instância. O alias da instância também é o **nome da instância**, que aparece no URL do Amazon Connect. A imagem a seguir mostra a página **Instâncias da central de atendimento virtual do Amazon Connect**, com uma caixa ao redor do alias da instância.  
![\[Página Instâncias da central de atendimento virtual do Amazon Connect e o alias da instância.\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/instance.png)

1. No menu de navegação esquerdo, escolha **Aplicações**, **Autenticação do cliente**. Se você não vê essa opção, ela pode não estar disponível na sua AWS região. Para acessar informações sobre onde a autenticação do cliente está disponível, consulte [Disponibilidade da autenticação do cliente por região](regions.md#customerauthentication_region). 

1. Na página **Autenticação do cliente**, escolha **Criar grupo de usuários no Amazon Cognito**. Isso abre o console do Amazon Cognito.

1. Crie um grupo de usuários com seu provedor de identidade. Para receber instruções, consulte [Conceitos básicos dos grupos de usuários](https://docs.aws.amazon.com/cognito/latest/developerguide/getting-started-user-pools.html) no *Guia do Desenvolvedor do Amazon Cognito*. 
**nota**  
Selecione **Não gerar um segredo de cliente** ao configurar o cliente da aplicação Amazon Cognito. Somente clientes da aplicação Amazon Cognito sem segredos de cliente são aceitos. Consulte mais informações em [Application-specific settings with app clients](https://docs.aws.amazon.com/cognito/latest/developerguide/user-pool-settings-client-apps.html) no *Guia do desenvolvedor do Amazon Cognito*.

1. Depois de criar um grupo de usuários do Amazon Cognito, retorne à página **Autenticação do cliente** e escolha **Associar grupo de usuários**.

1. Na seção **Grupo de usuários**, escolha o grupo de usuários que você criou no menu suspenso e selecione **Confirmar**.

   Isso associa o grupo de usuários à instância do Amazon Connect. Ele permite que o bloco de fluxo [Autenticar cliente](authenticate-customer.md) acesse o grupo de usuários.

1. Continue para a próxima etapa:[Habilitar a mensagem de autenticação](#enable-auth-message).

## Habilitar a mensagem de autenticação
<a name="enable-auth-message"></a>

Para habilitar a mensagem de autenticação, adicione a variável de trecho de parâmetros de autenticação ao final do seu trecho. Para acessar informações sobre a inclusão de variáveis do trecho, consulte [Campos de trechos de widget compatíveis no Amazon Connect que são personalizáveis](supported-snippet-fields.md). O código a seguir é um exemplo do trecho de parâmetros de autenticação que você precisa adicionar.

```
amazon_connect('authenticationParameters', { 
    redirectUri: 'your_redirect_url', // https://example.com 
    identityProvider: 'your_identity_provider_name' //optional
 });
```

Em que:
+ `redirectUri` é o URI de redirecionamento que você configurou no seu IdP (provedor de identidade) e no Amazon Cognito. É para lá que seu cliente é direcionado automaticamente após o login. Nesta página, você pode verificar os parâmetros do URL e, se houver um código e um estado, você pode chamar a [UpdateParticipantAuthentication](https://docs.aws.amazon.com/connect/latest/APIReference/API_UpdateParticipantAuthentication.html)API com esses valores. Depois que a chamada da API for concluída, feche o pop-up; o cliente retornará à experiência de chat.
+ `identityProvider` é o nome do provedor de identidade que você configurou no Amazon Cognito. Esse campo é opcional. Se um valor for fornecido, o link de login direcionará automaticamente o cliente para a página de login do provedor de identidade em vez de para a página de login gerenciada pelo Amazon Cognito, onde ele precisaria selecionar um provedor de identidade a ser usado para fazer login.

 Quando o fluxo atinge o bloco [Autenticar cliente](authenticate-customer.md), você pode registrar um retorno de chamada e armazenar o estado localmente para validar no URI de redirecionamento, conforme mostrado no exemplo de trecho de código a seguir:

```
amazon_connect('registerCallback', {
       'AUTHENTICATION_INITIATED' : (eventName, data) => {
            console.log(data.state)
        },
      });
```

Depois de habilitar a autenticação do cliente, adicione um bloco [Autenticar cliente](authenticate-customer.md) ao seu fluxo. Esse bloco autentica os contatos do chat durante o fluxo e os encaminha para caminhos específicos com base no resultado da autenticação.

# Autenticação pré-chat usando a API Amazon Connect StartChatContact
<a name="pre-chat-auth"></a>

Os clientes que se autenticam em seu site ou aplicação móvel antes de iniciar um chat podem ser reconhecidos como autenticados quando um chat é iniciado. Você pode fazer isso usando a [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)API.

Depois que um cliente autenticado iniciar um bate-papo, defina seu status usando os parâmetros na [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)API, conforme mostrado no seguinte trecho de código:

```
"SegmentAttributes": {
    "connect:CustomerAuthentication" : { 
        "ValueMap": {
            "Status": {
                "ValueString": "AUTHENTICATED"
            }
        }
    },
    "CustomerId": "12345"
```

`CustomerId` é um campo opcional para identificar o cliente. Pode ser um ID do Amazon Connect Customer Profiles ou um identificador personalizado de um sistema externo, como um CRM.

# Ative o streaming de mensagens para bate-papo com tecnologia de IA
<a name="message-streaming-ai-chat"></a>

O Amazon Connect oferece suporte ao streaming de mensagens para interações de bate-papo com inteligência artificial. As respostas dos agentes de IA aparecem progressivamente à medida que são geradas, melhorando a experiência do cliente durante as conversas.

A seguir estão as opções de integração, juntamente com os recursos de cada opção:
+ Atendentes do Amazon Connect
  + Elimina as limitações de tempo limite do Amazon Lex
  + Fornece mensagens de atendimento durante o processamento (como “Um momento enquanto eu reviso sua conta”)
  + Exibe respostas parciais com texto progressivo (bolha de texto crescente)
+ Bots de terceiros via Amazon Lex ou Lambda
  + Elimina as limitações de tempo limite do Amazon Lex
  + Comportamento padrão de resposta do bot

As instâncias criadas a partir de dezembro de 2025 são automaticamente ativadas por esse recurso. Para instâncias existentes, você deve ativar o streaming de mensagens manualmente usando a API ou por meio do console.

## Ative o streaming de mensagens usando a API
<a name="message-streaming-enable-api"></a>

Use a [UpdateInstanceAttribute](https://docs.aws.amazon.com/connect/latest/APIReference/API_UpdateInstanceAttribute.html)API para ativar o streaming de mensagens. Defina o recurso `MESSAGE_STREAMING` como `true`.

```
aws connect update-instance-attribute \
  --instance-id your-instance-id \
  --attribute-type MESSAGE_STREAMING \
  --value true
```

Para optar por não participar, defina o atributo como`false`.

## Ativar o streaming de mensagens usando o console
<a name="message-streaming-enable-console"></a>

Para instâncias recém-criadas, o streaming de mensagens é ativado por padrão.

Para instâncias existentes:

1. Abra o console do Amazon Connect e escolha sua instância.

1. No painel de navegação, escolha **Flows** > **Amazon Lex bots**.

1. Em **Configuração de bots Lex**, selecione **Habilitar streaming de mensagens no Amazon Connect**.

**nota**  
Quando você ativa o streaming de mensagens usando o console, a `lex:RecognizeMessageAsync` permissão necessária é adicionada automaticamente à política baseada em recursos do alias do bot. Ao usar a API, você deve adicionar essa permissão manualmente.

![\[Ative a opção de streaming de mensagens no console do Amazon Connect.\]](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/message-streaming-ai-chat-enablement.png)


## Atualize as permissões do Lex bot
<a name="message-streaming-lex-permissions"></a>

Depois que o streaming de mensagens estiver ativado, o Amazon Connect precisará de permissão para chamar a API do Amazon Lex:

```
lex:RecognizeMessageAsync
```

Você deve atualizar a política baseada em recursos para cada alias de bot do Amazon Lex usado pela instância do Amazon Connect.

### Quando atualizar a política baseada em recursos do bot
<a name="message-streaming-when-to-update"></a>
+ **Novas instâncias** — Qualquer alias de bot recém-associado do Amazon Lex terá `lex:RecognizeMessageAsync` em sua política de aliases por padrão.
+ **Instâncias existentes com bots existentes** — Se a instância usou anteriormente o Amazon Lex e você habilita o streaming de mensagens agora, você deve atualizar a política baseada em recursos em todos os aliases de bots do Amazon Lex associados para incluir a nova permissão.

### Exemplo de trecho da política baseada em recursos do alias do bot Lex
<a name="message-streaming-rbp-example"></a>

```
{
  "Version": "2012-10-17",		 	 	 
  "Statement": [
    {
      "Sid": "connect-us-west-2-MYINSTANCEID",
      "Effect": "Allow",
      "Principal": {
        "Service": "connect.amazonaws.com"
      },
      "Action": [
        "lex:RecognizeMessageAsync",
        "lex:RecognizeText",
        "lex:StartConversation
      ],
      "Resource": "arn:aws:lex:us-west-2:123456789012:bot-alias/MYBOT/MYBOTALIAS",
      "Condition": {
        "StringEquals": {
          "AWS:SourceAccount": "123456789012"
        },
        "ArnEquals": {
          "AWS:SourceArn": "arn:aws:connect:us-west-2:123456789012:instance/MYINSTANCEID"
        }
      }
    }
  ]
}
```

Você pode adicionar essa permissão chamando a [UpdateResourcePolicy](https://docs.aws.amazon.com/lexv2/latest/APIReference/API_UpdateResourcePolicy.html)API do Amazon Lex para atualizar a política baseada em recursos do alias de bot do Amazon Lex para incluir a `lex:RecognizeMessageAsync` ação para o recurso ARN da instância do Amazon Connect.

**Importante**  
Atualmente, esse recurso não oferece suporte à ramificação para o mesmo bloco de [Bloco de fluxo no Amazon Connect: Obter informações dos clientes](get-customer-input.md) fluxo ou à reutilização de um bot Amazon Lex com o mesmo alias em outro bloco **Get customer input**. Em vez disso, crie um novo bloco **Get customer input** usando um alias de bot diferente do Amazon Lex.

## Limites de tempo limite
<a name="message-streaming-timeout-limits"></a>

Os seguintes limites de tempo limite se aplicam às experiências de bate-papo:
+ **Experiência de bate-papo padrão** — tempo limite de 10 segundos
+ **Streaming de bate-papo** — tempo limite de 60 segundos

# Habilite a redação de dados confidenciais em andamento e o processamento de mensagens
<a name="redaction-message-processing"></a>

O Amazon Connect oferece suporte ao processamento de mensagens que intercepta e modifica mensagens de bate-papo antes que elas cheguem a qualquer participante. Esse recurso permite a redação automática de dados confidenciais e o processamento personalizado de mensagens, ajudando as empresas a manter os padrões de conformidade e segurança.

A seguir estão as opções de processamento, juntamente com os recursos de cada opção:
+ Redação de dados confidenciais integrada
  + Detecta e remove automaticamente números de cartão de crédito, números de previdência social e outras PII
  + Suporta vários idiomas, incluindo variantes em inglês, francês, português, alemão, italiano e espanhol. Para obter uma lista dos idiomas compatíveis com a edição do Contact Lenas, consulte [Idiomas compatíveis com os recursos do Amazon Connect](supported-languages.md).
  + Opte por redigir entidades de dados selecionadas ou todas as entidades de dados confidenciais
  + Substitua por espaços reservados genéricos ([PII]) ou espaços reservados específicos da entidade ([NAME], [CREDIT\$1CARD])
+ Processadores de mensagens personalizados (via Lambda). Para obter mais informações, consulte [O que é Lambda](https://docs.aws.amazon.com/lambda/latest/dg/welcome.html)? no Guia do *desenvolvedor do AWS Lambda.*
  + Integre serviços de terceiros para tradução de idiomas
  + Aplicar filtragem de palavrões
  + Transforme mensagens usando AI/LLM serviços
  + Implemente modificações de mensagens específicas da empresa

Para configurar o processamento de mensagens, defina as regras de redação no bloco **Definir comportamento de gravação e análise**. Para obter mais informações, consulte [Habilitar a edição de dados confidenciais](enable-analytics.md#enable-redaction). Você também pode especificar uma função Lambda para processamento personalizado.

Seu processador personalizado Lambda receberá uma entrada JSON no seguinte formato:

```
{
  "version": "1.0",
  "instanceId": "string",
  "associatedResourceArn": "string",
  "chatContent": {
    "absoluteTime": "string",
    "content": "string",
    "contentType": "string",
    "id": "string",
    "participantId": "string",
    "displayName": "string",
    "participantRole": "string",
    "initialContactId": "string",
    "contactId": "string"
  }
}
```

E imprima um JSON no seguinte formato:

```
{
  "status": "string", // "PROCESSED"|"APPROVED"|"FAILED"|"REJECTED"
  "result": {
    "processedChatContent": {
      "content": "string",
      "contentType": "string" // "text/plain"|"text/markdown"|"application/json"
    }
  }
}
```

O conteúdo processado do bate-papo substituirá a mensagem original quando publicada para os participantes do bate-papo.