Abilitare la formattazione del testo in Amazon Connect per l’esperienza di chat del cliente

Quando crei una nuova interfaccia utente di chat, la formattazione RTF è già abilitata e non sono necessarie ulteriori configurazioni.

Per aggiungere funzionalità di formattazione del testo a un'interfaccia utente di chat esistente, aggiorna il codice del widget di comunicazione utilizzando il codice seguente evidenziato in grassetto:

    (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' ]);
                

Il codice evidenziato in rosso viene impostato sui valori corretti quando ricevi il frammento dalla console Amazon Connect. L'unico contenuto che devi aggiungere o rimuovere è l'ultima riga in grassetto per supportedMessagingContentTypes.

Per aggiungere funzionalità di formattazione del testo a un'interfaccia utente di chat personalizzata (ad esempio, l'interfaccia di chat di Amazon Connect o la tua soluzione di interfaccia utente personalizzata in aggiunta a ChatJS), segui questa procedura:

1. Chiama l'API StartChatContact. Mentre chiami StartChatContact, aggiungi il parametro SupportedMessagingContentTypes, come mostrato in grassetto nell'esempio seguente:

   // 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. Importa chatjs come oggetto, come illustrato nell'esempio seguente:

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

   Se non utilizzi ChatJS, consulta questi argomenti per informazioni sull'invio di testo markdown tramite le API di Amazon Connect StartChatContact e SendMessage.

3. Invia messaggi con markdown. Per un esempio, fai riferimento al precedente frammento di codice per l'importazione di chatjs come oggetto. Puoi utilizzare markdown semplice per formattare il testo nelle chat. Se utilizzi già ChatJS per inviare messaggi in testo semplice, puoi modificare la logica esistente per chiamare SendMessage con text/markdown come contentType anziché text/plain quando desideri inviare messaggi con markdown. Assicurati di aggiornare il parametro sendMessage in modo che includa il formato markdown dei tuoi messaggi. Per ulteriori informazioni, consulta la sezione relativa alla sintassi di base di Markdown Guide.

4. Implementa la tua logica nel pacchetto UI per visualizzare i messaggi con markdown nell'area di input e nella trascrizione della chat. Se utilizzi React, puoi usare react-markdown come riferimento.