Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés. # Habilitación del formato de texto en Amazon Connect para la experiencia de chat del cliente Con el formato de mensajes de Amazon Connect, puede habilitar a sus clientes y agentes para que agreguen rápidamente estructura y claridad a sus mensajes de chat. **Topics** + [Tipos de formato admitidos](#supported-format-types) + [Habilitación del formato de mensajes](#how-to-enable-message-formatting) + [Adición de enlaces de correo electrónico y teléfono](#add-email-phone-links) + [Adición de mensajes de chatbot](#add-bot-messages) ## Tipos de formato admitidos Puede proporcionar los siguientes tipos de formato tanto en la interfaz de usuario de chat como en la aplicación del agente mediante Markdown: + Negrita + Cursiva + Lista con viñetas + Lista numerada + Hipervínculos + Emoji + Archivos adjuntos. Para habilitar los archivos adjuntos, siga [Habilitación de los archivos adjuntos en su CCP para que los clientes y agentes puedan compartir y cargar archivos](enable-attachments.md). ## Cómo habilitar el formato de mensajes 1. Al crear una nueva [interfaz de usuario de chat](add-chat-to-website.md), el formato de texto enriquecido está habilitado listo para usar. No se necesita configuración adicional. 1. Para agregar capacidades de formato de texto a una [interfaz de usuario de chat](add-chat-to-website.md) existente, actualice el [código del widget de comunicaciones](add-chat-to-website.md) con el siguiente código resaltado en negrita: ``` (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' ]); ``` El código resaltado en rojo se establece a los valores correctos cuando se obtiene el fragmento de la consola de Amazon Connect. El solo contenido que elige agregar o eliminar es la última línea en negrita para `supportedMessagingContentTypes`. 1. Para agregar funciones de formato de texto a su propia interfaz de usuario de chat personalizada (por ejemplo, [Interfaz de chat](https://github.com/amazon-connect/amazon-connect-chat-interface) o su propia solución de interfaz de usuario basada en [ChatJS](https://github.com/amazon-connect/amazon-connect-chatjs)), siga estos pasos: 1. Llame a la API [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html). Al llamar a `StartChatContact`, agregue el parámetro `SupportedMessagingContentTypes` como se muestra en negrita en el siguiente ejemplo: ``` // 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. Importe `chatjs` como un objeto, como se muestra en el siguiente ejemplo: ``` import "amazon-connect-chatjs"; this.session = connect.ChatSession.create({ ... }); this.session.sendMessage({ message: "message-in-markdown-format", contentType: "text/markdown" }); ``` Si no lo usas ChatJs, consulta estos temas para obtener información sobre el envío de textos rebajados a través de Amazon Connect APIs: [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)y [SendMessage](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_SendMessage.html). 1. Envíe mensajes con Markdown. Consulte el fragmento de código anterior para importar `chatjs` como objeto para ver un ejemplo de cómo enviar mensajes. Puede utilizar Markdown simple para dar formato al texto en los chats. Si ya [utilizas chat.js para enviar mensajes de texto sin formato](https://github.com/amazon-connect/amazon-connect-chatjs/blob/master/src/core/chatController.js#L66), puedes modificar tu lógica actual para llamar [SendMessage](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_SendMessage.html)con «`text/markdown`as» `contentType` en vez de `text/plain` cuando quieres enviar mensajes rebajados. Asegúrese de actualizar el parámetro `sendMessage` para que tenga el formato Markdown de sus mensajes. Para obtener más información, consulte [Sintaxis básica de la guía de Markdown](https://www.markdownguide.org/basic-syntax/). 1. Implemente su propia lógica en el paquete de interfaz de usuario para representar los mensajes Markdown en el área de entrada y la transcripción del chat. Si utiliza React, puede utilizar [react-markdown](https://github.com/remarkjs/react-markdown) como referencia. **nota** Las características de formato de texto solo aparecen para su agente si la característica se ha habilitado para su cliente en la interfaz de usuario de chat. Si el formato de texto no está admitido ni habilitado en la interfaz de usuario de chat del cliente, el agente no tendrá la posibilidad de redactar y enviar mensajes con formato de texto. Todas las capacidades de formato de texto, excepto los adjuntos, están disponibles para las [respuestas rápidas](create-quick-responses.md). ## Adición de enlaces de correo electrónico y teléfono En el siguiente ejemplo, se muestra cómo añadir enlaces en los que se puede hacer clic y en los que se puede llamar a las aplicaciones web y móviles. ``` 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) ``` ## Adición de mensajes de chatbot Si habilita la función Markdown para los mensajes de chat, puede usar el formato de texto enriquecido para los siguientes tipos de mensajes de chatbot: + Flujos [Reproducir mensaje](play.md) + Flujos [Obtener la entrada del cliente](get-customer-input.md) + `SYSTEM_MESSAGE` + `Lex BOT` + `Third Party BOT` + `Lex BOT Lambda` La siguiente imagen muestra cómo habilitar un mensaje de forma manual en un bloque de flujo [Reproducir mensaje](play.md): ![\[Imagen de un bloque de flujo y un mensaje con dos enlaces, uno a una sección de preguntas frecuentes y otro a un número de teléfono.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/chat-rtf-play-prompt-flow-1.png) En la imagen siguiente, se muestra cómo activar un mensaje manualmente en el bloque de flujo [Obtener la entrada del cliente](get-customer-input.md) y, a continuación, asociar el bloque de flujo a un bot de Amazon Lex: ![\[Imagen de un bloque de flujo y un mensaje con dos enlaces, uno a una sección de preguntas frecuentes y otro a un número de teléfono.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/chat-rtf-get-customer-flow.png) En la siguiente imagen, se muestra cómo aparece el mensaje en SYSTEM\$1MESSAGE y en diversos tipos de mensajes BOT: ![\[Imagen que muestra los enlaces a Review our FAQ y give us a call en los mensajes SYSTEM y BOT.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/chat-rtf-sys-bot-messages.png) En la siguiente imagen se muestra cómo configurar un mensaje en la intención del bot de Amazon Lex: ![\[Imagen de una intención de Amazon Lex que contiene un mensaje con dos enlaces, uno a una sección de preguntas frecuentes y otro a un número de teléfono.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/chat-rtf-lex-flow.png) Para obtener más información sobre las intenciones, consulte [Adición de intenciones](https://docs.aws.amazon.com/lexv2/latest/dg/add-intents.html) en la *Guía para desarrolladores de Amazon Lex V2*. Para obtener más información sobre los mensajes Lambda, consulte [Habilitar la lógica personalizada con funciones AWS Lambda](https://docs.aws.amazon.com/lexv2/latest/dg/lambda.html), también en la Guía para desarrolladores de *Amazon Lex* V2.