Adicione o widget Amazon Connect ao seu site para aceitar contatos de chat, tarefas, e-mail e chamadas pela web

Os tópicos desta seção explicam como criar e personalizar um widget de comunicação para seu site. Você criará um formulário de contato que determina o comportamento dos contatos criados por meio do widget e, em seguida, personalizará a aparência e a funcionalidade do widget.

Etapa 1: criar um formulário de contato para seu widget

Nesta etapa, você cria e personaliza uma visualização que determina o comportamento dos contatos criados por meio do widget.

1. Faça login no site do Amazon Connect administrador emhttps://instance name.my.connect.aws/. Na guia Roteamento, selecione Fluxos.

2. No canto superior esquerdo, clique em Visualizações.

3. Selecione Criar visualização.

4. Aqui você pode configurar um formulário de contato para seus clientes usando o criador sem código. Algumas dicas importantes:

   • O uso do componente Formulário permitirá que você vincule as Entradas do Formulário ao seu contato na criação. A vinculação de formulários permitirá que você receba informações diretamente de qualquer pessoa que esteja interagindo com seu widget e use as informações incluídas no formulário durante a criação do contato.

   • O componente Connect Action é o elemento mais importante no formulário para criar um contato. Esse componente deve ser usado sem nenhum outro componente do tipo botão no formulário.

   • Exatamente um componente Connect Action deve estar presente para usar o widget Exibir com um formulário de contato.

   • Há três opções suportadas ConnectActionType para o componente Connect Action:

     • StartEmailContact

     • StartTaskContact

     • StartChatContact

     Tanto o e-mail quanto a tarefa podem ser usados em um formulário de contato. Para criar um formulário pré-chat para contatos de bate-papo, consulteAdicionar uma interface de usuário de chat ao seu site hospedado pelo Amazon Connect.

   • Há muitas opções de estilo para os componentes View, permitindo que você personalize o formulário para se adequar ao seu ambiente.

5. Depois de adicionar um botão Connect Action ao seu formulário, você pode definir valores para os contatos criados pelo formulário vinculando-os às opções no botão Connect Action. Os componentes que você gostaria de vincular devem estar no mesmo Formulário na Exibição do botão Connect Action.

   

   Os seguintes componentes são compatíveis com a vinculação de formulários:

   • Entrada do formulário

   • Menu suspenso (desative a seleção múltipla)

   • Seletor de data

   • Área de texto

   • Seletor de horário

6. Quando sua visualização estiver pronta, selecione Publicar.

Etapa 2: personalizar seu 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 de administração do Amazon Connect emhttps://instance name.my.connect.aws/. Escolha Personalizar widget de comunicação.

2. Na página Widgets de comunicação, escolha Adicionar widget de comunicação para começar a personalizar uma nova experiência de widget de comunicação. Para editar, excluir ou duplicar um widget de comunicação existente, escolha entre as opções na coluna Ações.

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

4. Na seção Opções de comunicação, selecione Adicionar formulário de contato.

5. Selecione a Visualização que você configurou na etapa anterior. Se o componente Connect Action na exibição não tiver um fluxo de contato definido, você precisará definir um aqui.

6. Clique em Save and Continue (Salvar e continuar).

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.

nota

A visualização prévia não exibirá o formulário Exibir contato que você criou. Somente o estilo do cabeçalho será exibido.

Tipo de exibição

Você pode escolher entre dois tipos de exibição para os widgets do Formulário de Contato:

• O botão de ação flutuante permite que você fixe seu widget como um botão interativo no canto inferior direito da página da web

• O embutido incorporado permite que você incorpore seu widget diretamente na página da web sem precisar pressionar um botão para carregá-lo.

Estilos de botão

1. Escolha as cores do plano de fundo do botão inserindo valores hexadecimais (códigos de cores HTML).

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

2. URL do logotipo: insira um URL no banner do seu logotipo a partir de um bucket do Amazon S3 ou de outra fonte online.

Importante

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.

• 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 no Guia do usuário do Amazon Simple Storage Service.

• 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 no tópico Configurando permissões para acesso ao site.

Etapa 3: especifique 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 widget carrega somente nos sites que você seleciona 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ê permitir 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 ou 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.

2. 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 contato. Isso proporciona mais controle ao iniciar novos contatos, incluindo a capacidade de verificar se as solicitações enviadas ao Amazon Connect são de usuários autenticados.

   

   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 contato é 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 você escolher essa opção, na próxima etapa, você receberá uma chave de segurança para todas as solicitações de contato 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.

3. Escolha Salvar.

Etapa 4: Confirme e copie o código do widget de comunicação e as chaves de seguranç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 3, 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. 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.

Quando seus clientes interagem com o widget de comunicação em seu site, o widget solicita ao seu servidor web um JWT. Quando esse JWT for fornecido, o widget o incluirá como parte da solicitação de contato 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 contato 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.

  • 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 StartChatContactAPI.

  • atributos (opcional): objeto com pares de string-to-string valores-chave. Os atributos de contato devem seguir as limitações definidas pela StartChatContactAPI.

  • relatedContactId (opcional): Cadeia de caracteres com ID de contato válida. Eles relatedContactId devem seguir as limitações definidas pela StartChatContactAPI.

  • CustomerID (opcional): pode ser um ID do Amazon Connect 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), 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": "[e-mail]", "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 interajam com sua central de atendimento. Esse script exibe o widget no canto inferior direito do seu site.

nota

Inclua o script do widget no elemento HTML que precisa renderizar o widget ao usar o estilo embutido incorporado.

Quando seu site carrega, os clientes veem primeiro o ícone do widget. Quando eles escolhem esse ícone, o widget de comunicação é aberto e os clientes podem iniciar o contato com seus agentes.

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.