Habilitar a formatação de texto no Amazon Connect para a experiência de chat do cliente

Quando você cria uma nova interface de usuário de chat, a formatação rich text é habilitada imediatamente. Não é exigida nenhuma configuração adicional.

Para adicionar recursos de formatação de texto a uma interface de usuário de chat existente, atualize o código do widget de comunicação com o seguinte código destacado em negrito:

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

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

Para adicionar recursos de formatação de texto à sua própria interface de usuário de chat personalizada (por exemplo, Interface de chat ou sua própria solução de interface de usuário sobre o ChatJS), siga estas etapas:

1. Chame a API StartChatContact. Ao chamar StartChatContact, adicione o parâmetro SupportedMessagingContentTypes conforme mostrado em negrito no exemplo a seguir:

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

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

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

   Se você não usa o ChatJS, consulte estes tópicos para obter informações sobre o envio de texto markdown por meio das APIs do Amazon Connect: StartChatContact e SendMessage.

3. Envie mensagens com markdown. Consulte o snippet de código anterior para importar chatjs como objeto para ver um exemplo de como enviar mensagens. Você pode usar o markdown simples para formatar texto em chats. Se já usa o chatjs hoje para enviar mensagens de texto simples, você pode modificar sua lógica existente para chamar SendMessage com text/markdown como contentType em vez de text/plain quando quiser enviar mensagens de markdown. Atualize o parâmetro sendMessage para ter o formato markdown de suas mensagens. Para obter mais informações, consulte Markdown Guide Basic Syntax.

4. Implemente sua própria lógica no pacote de interface do usuário para renderizar mensagens de marcação na área de entrada e na transcrição do chat. Se você usa o React, pode usar o react-markdown como referência.