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á.

# 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)