Activation de la mise en forme de texte pour l'expérience de chat de vos clients

Lorsque vous créez une nouvelle interface utilisateur de chat, la mise en forme de texte enrichi est activée immédiatement. Aucune configuration supplémentaire n'est requise.

Pour ajouter des fonctionnalités de mise en forme de texte à une interface utilisateur de chat existante, mettez à jour le code du widget de communication avec le code suivant, mis en évidence en gras :

    (function(w, d, x, id){
        s=d.createElement('script');
        s.src='https://d3xxxx.cloudfront.net/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' ]);
                

Les valeurs correctes sont affectées au code mis en évidence en rouge lorsque vous obtenez l'extrait de code depuis la console Amazon Connect. Le seul contenu que vous choisissez d'ajouter ou de supprimer est la dernière ligne en gras pour supportedMessagingContentTypes.

Pour ajouter des fonctionnalités de mise en forme de texte à votre propre interface utilisateur de chat personnalisée (par exemple, Interface de chat ou votre propre solution d'interface utilisateur en plus de ChatJS), procédez comme suit :

1. Appelle le StartChatContactAPI. Lors de l'appel de StartChatContact, ajoutez le paramètre SupportedMessagingContentTypes comme indiqué en gras dans l'exemple suivant :

   // 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. Importez chatjs en tant qu'objet, comme illustré dans l'exemple suivant :

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

   Si vous ne l'utilisez pas ChatJs, consultez ces rubriques pour plus d'informations sur l'envoi de texte Markdown via Amazon Connect APIs : StartChatContactet SendMessage.

3. Envoyez des messages avec la syntaxe Markdown. Consultez l'extrait de code précédent pour importer chatjs en tant qu'objet afin d'obtenir un exemple d'envoi de messages. Vous pouvez utiliser la syntaxe Markdown simple pour mettre en forme le texte dans les chats. Si vous utilisez déjà chatjs aujourd'hui pour envoyer des messages en texte brut, vous pouvez modifier votre logique existante pour appeler SendMessageavec text/markdown as contentType plutôt que text/plain lorsque vous souhaitez envoyer des messages Markdown. Veillez à mettre à jour le paramètre sendMessage pour qu'il corresponde au format Markdown de vos messages. Pour plus d'informations, consultez Syntaxe de base du guide Markdown.

4. Mettez en œuvre votre propre logique dans le package d'interface utilisateur pour afficher les messages Markdown dans la zone de saisie et dans la transcription de chat. Si vous utilisez React, vous pouvez vous servir de react-markdown comme référence.