Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra. # Activation de la mise en forme de texte dans Amazon Connect pour l’expérience de chat de vos clients Grâce à la mise en forme des messages Amazon Connect, vous pouvez permettre à vos clients et vos agents d'ajouter rapidement de la structure et de la clarté à leurs messages de chat. **Topics** + [Types de formats pris en charge](#supported-format-types) + [Activation de la mise en forme des messages](#how-to-enable-message-formatting) + [Comment ajouter des liens permettant d’envoyer un e-mail et d’appeler un numéro de téléphone](#add-email-phone-links) + [Comment ajouter des messages de chatbot](#add-bot-messages) ## Types de formats pris en charge Vous pouvez indiquer les types de mise en forme suivants à la fois sur l'interface utilisateur de chat et sur l'application d'agent en utilisant la syntaxe Markdown : + Gras + Italique + Liste à puces + Liste numérotée + Hyperliens + Emoji + Pièces jointes. Pour activer les pièces jointes, consultez [Activation des pièces jointes dans le CCP afin que les clients et les agents puissent partager et charger des fichiers](enable-attachments.md). ## Comment activer la mise en forme des messages 1. Lorsque vous créez une nouvelle [interface utilisateur de chat](add-chat-to-website.md), la mise en forme de texte enrichi est activée immédiatement. Aucune configuration supplémentaire n’est requise. 1. Pour ajouter des fonctionnalités de mise en forme de texte à une [interface utilisateur de chat](add-chat-to-website.md) existante, mettez à jour le [code du widget de communication](add-chat-to-website.md) avec le code suivant, mis en évidence en gras : ``` (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' ]); ``` 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`. 1. Pour ajouter des fonctionnalités de mise en forme de texte à votre propre interface utilisateur de chat personnalisée (par exemple, [Interface de chat](https://github.com/amazon-connect/amazon-connect-chat-interface) ou votre propre solution d'interface utilisateur en plus de [ChatJS](https://github.com/amazon-connect/amazon-connect-chatjs)), procédez comme suit : 1. Appelez l'API [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html). 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" ] } ``` 1. 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 : [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)et [SendMessage](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_SendMessage.html). 1. 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](https://github.com/amazon-connect/amazon-connect-chatjs/blob/master/src/core/chatController.js#L66), vous pouvez modifier votre logique existante pour appeler [SendMessage](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_SendMessage.html)avec `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](https://www.markdownguide.org/basic-syntax/). 1. 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](https://github.com/remarkjs/react-markdown) comme référence. **Note** Les fonctionnalités de mise en forme de texte sont visibles pour votre agent uniquement si elles ont été activées pour votre client dans l'interface utilisateur de chat. Si la mise en forme de texte n'est pas prise en charge ou activée sur l'interface utilisateur de chat du client, l'agent ne sera pas en mesure de composer et d'envoyer des messages avec une mise en forme de texte. Toutes les fonctionnalités de mise en forme de texte, à l’exception des pièces jointes, sont disponibles pour les [réponses rapides](create-quick-responses.md). ## Comment ajouter des liens permettant d’envoyer un e-mail et d’appeler un numéro de téléphone L’exemple suivant montre comment ajouter des liens cliquables et des liens permettant d’appeler un numéro à vos applications Web et mobiles. ``` Call us today: [+1 (123) 456-7890](tel:+11234567890) [Call Us](tel:+11234567890) [Skype Us](callto:+91123-456-7890) [Fax Us](fax:+91123-456-7890) [Text Us](SMS:+91123-456-7890) [Email Us](mailto:name@email.com) ``` ## Comment ajouter des messages de chatbot Lorsque vous activez le markdown pour les messages de chat, vous pouvez utiliser le format de texte enrichi pour les types de messages de chatbot suivants : + Flux [Lire l’invite](play.md) + Flux [Obtenir les données client](get-customer-input.md) + `SYSTEM_MESSAGE` + `Lex BOT` + `Third Party BOT` + `Lex BOT Lambda` L’image suivante montre comment activer une invite manuellement dans un bloc de flux [Lire l’invite](play.md) : ![\[Image d’un bloc de flux et d’une invite contenant deux liens, l’un pour une FAQ et l’autre pour un numéro de téléphone.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/chat-rtf-play-prompt-flow-1.png) L’image suivante montre comment activer une invite manuellement dans le bloc de flux [Get customer input](get-customer-input.md), puis comment associer ce bloc de flux à un bot Amazon Lex : ![\[Image d’un bloc de flux et d’une invite contenant deux liens, l’un pour une FAQ et l’autre pour un numéro de téléphone.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/chat-rtf-get-customer-flow.png) L’image suivante montre comment l’invite apparaît dans SYSTEM\$1MESSAGE et dans les différents types de messages BOT : ![\[Image montrant les liens « Review our FAQ » et « give us a call » dans les messages SYSTEM et BOT.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/chat-rtf-sys-bot-messages.png) L’image suivante montre comment configurer une invite dans une intention de bot Amazon Lex : ![\[Image d’une intention Amazon Lex contenant une invite avec deux liens, l’un pour une FAQ et l’autre pour un numéro de téléphone.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/chat-rtf-lex-flow.png) Pour plus d’informations sur les intentions, consultez [Ajout d’intentions](https://docs.aws.amazon.com/lexv2/latest/dg/add-intents.html) dans le *Guide du développeur Amazon Lex V2*. Pour plus d'informations sur les messages Lambda, consultez la section [Activation de la logique personnalisée avec les fonctions AWS Lambda](https://docs.aws.amazon.com/lexv2/latest/dg/lambda.html), également dans le guide du développeur *Amazon Lex V2*.