Aktivieren der Textformatierung für die Chat-Umgebung Ihrer Kunden in Amazon Connect

Wenn Sie eine neue Chat-Benutzeroberfläche erstellen, ist die Rich-Text-Formatierung standardmäßig aktiviert. Es ist keine zusätzliche Konfiguration erforderlich.

Um einer vorhandenen Chat-Benutzeroberfläche Funktionen zur Textformatierung hinzuzufügen, aktualisieren Sie den Kommunikations-Widget-Code mit dem folgenden Code, der fett hervorgehoben ist:

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

Der rot hervorgehobene Code wird auf die richtigen Werte gesetzt, wenn Sie das Snippet von der Amazon Connect Konsole abrufen. Hinzuzufügen oder zu entfernen ist ausschließlich die letzte fettgedruckte Zeile für supportedMessagingContentTypes.

Gehen Sie wie folgt vor, um Ihrer eigenen benutzerdefinierten Chat-Benutzeroberfläche (z. B. Chat Interface oder einer eigenen UI-Lösung zusätzlich zu ChatJS) Textformatierungsfunktionen hinzuzufügen:

1. Rufen Sie die API StartChatContact auf. Fügen Sie beim Aufrufen von StartChatContact den Parameter SupportedMessagingContentTypes hinzu, wie im folgenden Beispiel fett hervorgehoben:

   // 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. Importieren Sie chatjs als Objekt, wie im folgenden Beispiel gezeigt:

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

   Wenn Sie nicht ChatJS verwenden, finden Sie unter diesen Themen Informationen zum Senden von Markdown-Text über die Amazon Connect APIs: StartChatContact und SendMessage.

3. Senden von Nachrichten mit Markdown Ein Beispiel für das Senden von Nachrichten finden Sie im vorherigen Codeausschnitt für den Import von chatjs als Objekt. Sie können einfaches Markdown zum Formatieren von Text in Chats verwenden. Wenn Sie chatjs bereits zum Senden von Klartext-Nachrichten verwenden, können Sie die bestehende Logik so ändern, dass SendMessage mit text/markdown als contentType anstelle von text/plain aufgerufen wird, wenn Sie Markdown-Nachrichten senden möchten. Achten Sie darauf, den Parameter sendMessage so zu aktualisieren, dass er das Markdown-Format Ihrer Nachrichten hat. Weitere Informationen finden Sie unter Markdown Guide Basic Syntax.

4. Implementieren Sie eine eigene Logik im UI-Paket, um Markdown-Nachrichten im Eingabebereich und im Chat-Transkript auszugeben. Wenn Sie React verwenden, können Sie React-Markdown als Referenz verwenden.