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á.
# Adicione uma interface de usuário de chat ao seu site hospedado pelo Connect Customer
Para apoiar seus clientes por meio do chat, você pode adicionar um widget de comunicação ao seu site hospedado pelo Connect Customer. Você pode configurar o widget de comunicação no site Connect Customer 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 Connect Customer 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 [Connect Customer service quotas](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 as APIs Connect Customer](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)
+ [Post-chat pesquisa](enable-post-chat-survey.md)
## Navegadores compatíveis
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
Nesta etapa, você personaliza a experiência do widget de comunicação para seus clientes.
1. Faça login no site do Connect Customer administrador em https://{{instance name}}.my.connect.aws/. Escolha **Personalizar widget de comunicação**.
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.
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 Connect Customer.
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 [Adicione o widget Connect Customer ao seu site](connect-widget-on-website.md).
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.
**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\_MESSAGE**.
+ **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
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.
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 Por exemplo. com/checkout) estão acessíveis. Você não pode permitir nem bloquear subdiretórios específicos.
**Importante**
Double-check que os URLs do seu site são válidos 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 chat. Isso fornece mais controle ao iniciar novos bate-papos, incluindo a capacidade de verificar se as solicitações de bate-papo enviadas ao Connect Customer são de usuários autenticados.
Escolher **Sim** resulta no seguinte:
+ O Connect Customer 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 Connect Customer 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 bate-papo é 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 usando essa 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
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
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. Ao fazer isso, o Connect Customer 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 Connect Customer e excluir a chave anterior.
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 bate-papo do cliente final para o Connect Customer. Em seguida, o Connect Customer usa a chave secreta para descriptografar o token. Se for bem-sucedido, isso confirma que o JWT foi emitido pelo seu servidor web e o Connect Customer encaminha a solicitação de bate-papo para os agentes da sua central de atendimento.
#### Especificações do token Web JSON
+ 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**: \*emitido no momento.
+ **exp**: \*expiraçã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.
+ **attributes (opcional)**: objeto com pares chave/valor de string para string. 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.
+ **related ContactId (opcional)**: string com ID de contato válida. O relacionado ContactId deve seguir as limitações definidas pela [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)API.
+ **CustomerID (opcional**): pode ser uma ID do Connect Customer Customer Profiles ou um identificador personalizado de um sistema externo, como um CRM.
\* 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 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.
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.
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?
Se você encontrar mensagens de erro, consulte [Solucione problemas com seu widget de comunicação Connect Customer](ts-cw.md).