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.

# Configuración de la experiencia de chat de sus clientes en Amazon Connect
<a name="enable-chat-in-app"></a>

Puede proporcionar una experiencia de chat a sus clientes mediante la utilización de uno de los siguientes métodos: 
+ [Adición de una interfaz de usuario de chat al sitio web alojado en Amazon Connect](add-chat-to-website.md). 
+ [Personalización del chat con el ejemplo de código abierto de Amazon Connect](download-chat-example.md). 
+ [Personalice su solución con Amazon Connect APIs](integrate-with-startchatcontact-api.md). Le recomendamos que empiece por la biblioteca de código abierto ChatJS de Amazon Connect cuando personalice sus propias experiencias de chat. Para obtener más información, consulte el repositorio [Amazon Connect ChatJS](https://github.com/amazon-connect/amazon-connect-chatjs) en Github. 

## Más recursos para personalizar la experiencia de chat
<a name="more-resource-customize-chat"></a>
+ Los mensajes interactivos proporcionan a los clientes un mensaje y opciones de visualización preconfiguradas que un cliente puede seleccionar. Estos mensajes utilizan tecnología de Amazon Lex y se configuran a través de Amazon Lex mediante una Lambda. Para obtener instrucciones sobre cómo agregar mensajes interactivos a través de Amazon Lex, consulte este blog: [Configuración de mensajes interactivos para su chatbot de Amazon Connect](https://aws.amazon.com/blogs/contact-center/easily-set-up-interactive-messages-for-your-amazon-connect-chatbot/).

  Amazon Connect admite las siguientes plantillas: un selector de lista y un selector de tiempo. Para obtener más información, consulte [Adición de mensajes interactivos de Amazon Lex para los clientes en el chat](interactive-messages.md). 
+  [Habilitación de Apple Messages for Business con Amazon Connect](apple-messages-for-business.md) 
+  [Documentación de la API de Amazon Connect Service](https://docs.aws.amazon.com/connect/latest/APIReference), especialmente la [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)API.
+  [API del servicio para participantes de Amazon Connect](https://docs.aws.amazon.com/connect-participant/latest/APIReference/Welcome.html). 
+  [SDK de chat de Amazon Connect e implementaciones de ejemplo](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/) 
+  [Amazon Connect Streams](https://github.com/aws/amazon-connect-streams). Utilícelo para integrar sus aplicaciones existentes con Amazon Connect. Puede incrustar los componentes del Panel de control de contacto (CCP) en su aplicación. 
+  [Habilite la transmisión de mensajes para un chat con tecnología de IA](message-streaming-ai-chat.md) 

# El chat/SMS canal en Amazon Connect
<a name="web-and-mobile-chat"></a>

**importante**  
**¿Intenta contactar con el servicio de asistencia de Amazon?** Consulte el [Servicio de atención al cliente de Amazon](https://www.amazon.com/gp/help/customer/display.html?icmpid=docs_connect_messagingcap_customerservice) (pedidos y entregas de Amazon) o [AWS Support](https://aws.amazon.com/premiumsupport/?icmpid=docs_connect_messagingcap_premiumsupport) (Amazon Web Services).

Amazon Connect le permite incorporar características de mensajería de chat (chat móvil, chat web, SMS y servicios de mensajería de terceros) en su sitio web y aplicaciones móviles. Permite a sus clientes empezar a chatear con los agentes del centro de contacto desde cualquiera de sus aplicaciones empresariales, web o móviles. 

Las interacciones son sincrónicas, lo que permite a sus clientes iniciar un chat con un agente o bot de Amazon Lex, alejarse de él y reanudar la conversación de nuevo. Incluso pueden cambiar de dispositivo y continuar con el chat.

**Topics**
+ [Múltiples canales, una experiencia](#unified-experience-chat)
+ [Introducción](#enable-chat)
+ [Escenario de chat de ejemplo](#example-chat-scenario)
+ [¿Cuándo terminan los chats?](#when-do-chats-end)
+ [Precios](#web-and-mobile-chat-pricing)
+ [Más información](#chat-more-info)

## Múltiples canales, una experiencia
<a name="unified-experience-chat"></a>

Los agentes tienen una única interfaz de usuario para ayudar a los clientes mediante voz, chat y tareas. Esto reduce la cantidad de herramientas que los agentes tienen que aprender y la cantidad de pantallas con las que deben interactuar. 

Las actividades de chat se integran en los flujos de su centro de contacto existentes y en la automatización que creó para voz. Puede crear los flujos una vez y reutilizarlos en varios canales. 

La recopilación de métricas y los paneles que creó se benefician automáticamente de las métricas unificadas en varios canales.

## Introducción
<a name="enable-chat"></a>

Para agregar funciones de mensajería de chat al centro de contactos de Amazon Connect y permitir que sus agentes participen en los chats, lleve a cabo los siguientes pasos:
+ El chat se habilita en el nivel de instancia cuando [se crea un bucket de Amazon S3 para almacenar las transcripciones de chat](amazon-connect-instances.md#get-started-data-storage).
+ [Agregue el chat al perfil de enrutamiento de su agente](routing-profiles.md).
+ Opcionalmente, puede configurar subtipos de chat, como la mensajería SMS. Para obtener un número de teléfono compatible con SMS, lo importas y AWS End User Messaging SMS, después Amazon Connect, lo asignas a tus flujos. Para obtener más información, consulte lo siguiente: 
  + [Solicita un número de teléfono compatible con SMS a través de AWS End User Messaging SMS](sms-number.md)
  + [Configuración de la mensajería SMS en Amazon Connect](setup-sms-messaging.md)

A continuación, los agentes pueden empezar a aceptar chats a través del Panel de control de contacto.

Puedes ver las métricas históricas y en tiempo real del canal de mensajería de chat (por ejemplo, la hora de llegada o el tiempo de atención) como parte de las métricas generales del canal de chat en la misma experiencia de generación de informes utilizada para calls/chats/tasks evaluar el rendimiento y la productividad de los agentes.

Amazon Connect ofrece varios recursos para ayudarlo a agregar el chat a su sitio web. Para obtener más información, consulte [Configuración de la experiencia de chat de sus clientes en Amazon Connect](enable-chat-in-app.md).

## Escenario de chat de ejemplo
<a name="example-chat-scenario"></a>

Un cliente y un agente están chateando. El cliente deja de responderle al agente. El agente pregunta: “¿Está ahí?” y no recibe respuesta. El agente abandona el chat. Ahora, el chat deja de estar asociado a un agente. Su flujo determina lo que sucede a continuación. 

En este escenario, el cliente finalmente envía otro mensaje (“Hola, sí. He vuelto”) y el chat se reanuda. Dependiendo de la lógica que defina en el flujo, el chat se puede asignar al agente original o a un agente o cola diferentes.

A continuación se muestra cómo se crea este escenario:

1. Cree un flujo de desconexión. En la imagen siguiente, se muestra el [Ejemplo de flujo de desconexión en Amazon Connect](sample-disconnect.md) en el diseñador de flujos. Este flujo incluye los siguientes bloques conectados: **Reproducir mensaje**, **Espera** que se ramifica en tres bloques **Reproducir mensaje** (para **Cliente devuelto**, **Tiempo caducado** y **Error**), **Transferir a la cola** y **Desconectar**.  
![\[El flujo de desconexión de ejemplo.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/sample-disconnect-flow.png)

1.  En el flujo de desconexión, añada un bloque [Espera](wait.md) . El bloque de espera tiene dos ramificaciones: 
   +  **Tiempo de espera**: ejecute esta ramificación si el cliente no ha enviado un mensaje después de un periodo especificado. La duración total del chat, incluidos varios bloques **Espera**, no puede superar los 7 días. 

      Por ejemplo, para esta ramificación es posible que solo desee ejecutar un bloque **Desconexión** y finalizar el chat. 
   +  **Devolución del cliente**: ejecute esta ramificación cuando el cliente vuelva y envíe un mensaje. Con esta ramificación, puede dirigir al cliente al agente anterior, a la cola anterior o establecer una nueva cola de trabajo o agente. 

1.  En el flujo entrante, agregue el bloque [Establecer flujo de desconexión](set-disconnect-flow.md). Utilícelo para especificar que cuando el agente o bot de Amazon Lex se haya desconectado del chat y solo quede el cliente, el flujo de establecimiento del flujo de desconexión debería ejecutarse. 

    En el siguiente bloque, por ejemplo, especificamos que debería ejecutarse el **flujo de desconexión de ejemplo** .   
![\[El bloque Establecer flujo de desconexión, el menú desplegable Seleccionar un flujo y la opción de ejemplo de flujo de desconexión.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/set-disconnect-flow.png)

    Para ver un ejemplo que utiliza el bloque **Establecimiento de flujo de desconexión**, consulte [Flujo de entrada de ejemplo](sample-inbound-flow.md). 

## ¿Cuándo terminan los chats?
<a name="when-do-chats-end"></a>

 De forma predeterminada, la duración total de una conversación de chat, incluido el tiempo de espera cuando el cliente no está activo, no puede superar las 25 horas. Sin embargo, puede cambiar esta duración predeterminada y, en su lugar, configurar una duración de chat personalizada. Puede configurar un chat para que dure desde un mínimo de 1 hora (60 minutos) hasta 7 días (10 080 minutos). Para configurar una duración de chat personalizada, llama a la [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)API y añade el `ChatDurationInMinutes` parámetro. 

Durante una sesión de chat en curso, no hay límite en la cantidad de veces que un cliente puede salir y volver a unirse a una sesión de chat en curso existente. Para ello, usa el bloque [Espera](wait.md). Por ejemplo, puede esperar 12 horas para que el cliente reanude el chat antes de finalizar la sesión de chat. Si el cliente intenta reanudar el chat después de 12 horas, puede tener en el flujo puede un bot de Amazon Lex que pregunte si se está poniendo en contacto con usted sobre el mismo problema o sobre otro diferente. 

Al especificar un tiempo de espera significativamente más corto que la duración del chat, contribuye a garantizar que los clientes tengan una buena experiencia. Por ejemplo, para un chat con una duración de 25 horas, es posible que el cliente reanude un chat después de 24 horas y 58 minutos, y luego se interrumpa después de dos minutos porque la conversación termina automáticamente en el límite de 25 horas.

**sugerencia**  
Si usa Amazon Lex con el chat, tenga en cuenta que el tiempo de espera de sesión predeterminado para una sesión de Amazon Lex es de 5 minutos. La duración total de una sesión no puede superar las 24 horas. Para cambiar el tiempo de espera de la sesión, consulte [Configuración del tiempo de espera de la sesión](https://docs.aws.amazon.com/lex/latest/dg/context-mgmt.html#context-mgmt-session-timeoutg) en la *Guía para desarrolladores de Amazon Lex*. 

## Precios
<a name="web-and-mobile-chat-pricing"></a>

El chat se cobra por uso. No se requieren pagos por adelantado, compromisos a largo plazo ni cuotas mensuales mínimas. Se paga por mensaje de chat, independientemente del número de agentes o clientes que lo utilicen. Los precios por región pueden variar. Para obtener más información, consulte [Precios de Amazon Connect](https://aws.amazon.com/connect/pricing/). 

## Más información
<a name="chat-more-info"></a>

Para obtener más información acerca del chat, consulte los siguientes temas:
+  [Prueba de las experiencias de voz, chat y tareas en Amazon Connect](chat-testing.md) 
+  [Cómo funciona el enrutamiento con varios canales](about-routing.md#routing-profile-channels-works) 
+  [Creación de un perfil de enrutamiento en Amazon Connect para vincular las colas a los agentes](routing-profiles.md) 
+  [SDK de chat de Amazon Connect e implementaciones de ejemplo](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/) 

# Adición de una interfaz de usuario de chat al sitio web alojado en Amazon Connect
<a name="add-chat-to-website"></a>

Para ayudar a sus clientes a través del chat, puede agregar a su sitio web un widget de comunicaciones alojado en Amazon Connect. Puede configurar el widget de comunicaciones en el sitio web Amazon Connect de administración. Puede personalizar la fuente y los colores, y proteger el widget para que solo se pueda iniciar desde su sitio web. Como resultado, tendrá un fragmento de código corto que podrá agregar a su sitio web. 

Como Amazon Connect aloja el widget, garantiza que la última versión esté siempre disponible en su sitio web. 

**sugerencia**  
El uso del widget de comunicaciones está sujeto a las cuotas de servicio predeterminadas, como la cantidad de caracteres necesarios para cada mensaje. Antes de lanzar su widget de comunicaciones a producción, asegúrese de que sus cuotas de servicio estén establecidas según las necesidades de su organización. Para obtener más información, consulte [Amazon Connect cuotas de servicio](amazon-connect-service-limits.md). 

**Topics**
+ [Campos de fragmentos de widgets compatibles que se pueden personalizar](supported-snippet-fields.md)
+ [Navegadores compatibles](#chat-widget-supported-browsers)
+ [Paso 1: personalizar el widget de comunicaciones](#customize-chat-widget)
+ [Paso 2: especificar los dominios del sitio web en los que espera mostrar el widget de comunicaciones](#chat-widget-domains)
+ [Paso 3: confirmar y copiar el código del widget de comunicaciones y las claves de seguridad](#confirm-and-copy-chat-widget-script)
+ [¿Recibe mensajes de error?](#chat-widget-error-messages)
+ [Personalización del comportamiento de lanzamiento del widget y del icono del botón](customize-widget-launch.md)
+ [Transferencia del nombre para mostrar del cliente](pass-display-name-chat.md)
+ [Transferencia de atributos de contacto](pass-contact-attributes-chat.md)
+ [Personalizaciones adicionales del widget de chat](pass-customization-object.md)
+ [Descarga de la transcripción del widget de chat](chat-widget-download-transcript.md)
+ [Descarga y personalización de nuestro ejemplo de código abierto](download-chat-example.md)
+ [Inicie chats en sus aplicaciones mediante Amazon Connect APIs](integrate-with-startchatcontact-api.md)
+ [Envío de notificaciones del navegador a los clientes cuando lleguen los mensajes de chat](browser-notifications-chat.md)
+ [Desconexión mediante programación de un chat](programmatic-chat-disconnect.md)
+ [Transferencia de propiedades personalizadas para anular las predeterminadas en el widget de comunicaciones](pass-custom-styles.md)
+ [Orienta el botón y el marco de tu widget con CSS/ JavaScript](target-widget-button.md)
+ [Solución de problemas del widget de comunicaciones](ts-cw.md)
+ [Cómo añadir un formulario previo al contacto o al chat](add-precontact-form.md)
+ [Encuesta posterior al chat](enable-post-chat-survey.md)

# Campos de fragmentos de widgets compatibles en Amazon Connect que se pueden personalizar
<a name="supported-snippet-fields"></a>

En la siguiente tabla, se muestran los campos de fragmentos del widget de comunicaciones que puede personalizar. El código de ejemplo que aparece después de la tabla muestra cómo utilizar los campos de fragmentos.


| Campo de fragmento | Tipo | Description (Descripción) | Documentación adicional | 
| --- | --- | --- | --- | 
| `snippetId` | Cadena | Obligatorio, generado automáticamente | n/a | 
| `styles` | Cadena | Obligatorio, generado automáticamente | n/a | 
| `supportedMessagingContentTypes` | Matriz | Obligatorio, generado automáticamente | n/a | 
| `customLaunchBehavior` | Objeto | Personalice la forma en que su sitio web se renderiza y lanza el icono del widget alojado | [Personalización del comportamiento de lanzamiento del widget y del icono del botón de su sitio web alojado en Amazon Connect](customize-widget-launch.md), más adelante en este tema. | 
| `authenticate` | Función | Función de devolución de llamada para habilitar la seguridad de JWT en su sitio web | [Paso 2: especificar los dominios del sitio web en los que espera mostrar el widget de comunicaciones](add-chat-to-website.md#chat-widget-domains), anteriormente en esta sección. | 
| `customerDisplayName` | Función | Transferencia del nombre público del cliente cuando se inicializa un contacto | [Transferencia del nombre de visualización del cliente cuando se inicia un chat de Amazon Connect](pass-display-name-chat.md), más adelante en esta sección. | 
| `customStyles` | Objeto | Anule los estilos CSS predeterminados | [Transferencia de propiedades personalizadas para anular las predeterminadas en el widget de comunicaciones de Amazon Connect](pass-custom-styles.md), más adelante en esta sección. | 
| `chatDurationInMinutes` | Número | La duración total de la sesión de chat recién iniciada | Predeterminado: 1500, mínimo 60, máximo 10 080 | 
| `enableLogs` | Booleano | Habilite la herramienta de depuración | Predeterminado: false | 
| `language` | Cadena |  Amazon Connect puede realizar traducciones para los códigos de idioma del formato ISO-639 compatibles. Para obtener más información, consulte [https://en.wikipedia. org/wiki/List\$1of\$1ISO\$1639-1\$1Codes](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes). Esto no traduciría las anulaciones de texto personalizadas ni el contenido de los mensajes (tanto enviados como recibidos).  | Predeterminado: en\$1US. Compatibles: 'cs\$1CZ', 'da\$1DK', 'de\$1DE', 'en\$1AU', 'en\$1CA', 'en\$1GB', 'en\$1US', 'es\$1ES', 'fi\$1FI', 'fr\$1FR', 'hu\$1HU', 'id\$1ID', 'it\$1IT', 'ja\$1JP', 'ko\$1KR', 'nl\$1NL', 'nn\$1NO' 'pt\$1BR', 'pt\$1PT', 'sk\$1SK', 'sv\$1SE', 'zh\$1CN', 'zh\$1TW' | 
| `disableCSM` | Booleano | Deshabilite el seguimiento de las métricas del cliente desde el widget de comunicación. | Predeterminado: false | 
| `nonce` | Cadena | Valor de enlace entre el iframe y la política de csp del sitio web del cliente. Ejemplo: el csp del cliente permite un valor nonce de 1234, el iframe que extrae otro script debe tener el mismo valor nonce de 1234 para que el navegador sepa que es un script de confianza según el sitio principal del iframe. | Valor predeterminado: indefinido | 
| `customizationObject` | Objeto | Personalice el diseño y la transcripción del widget | Para obtener más información, consulte [Personalizaciones adicionales del widget de chat de Amazon Connect](pass-customization-object.md) más adelante en esta sección. | 
| `contactAttributes` | Objeto | Transfiera los atributos al flujo de contactos directamente desde un fragmento de código, sin necesidad de configurar JWT | Para obtener más información, consulte [Pass contact attributes when a chat initializes](https://docs.aws.amazon.com/connect/latest/adminguide/pass-contact-attributes-chat.html). | 
| `customDisplayNames` | Objeto | Anule las configuraciones de logotipo y el nombre mostrado del sistema o bot establecidas en el sitio web de administración de Amazon Connect. | Para obtener más información, consulte [Cómo anular los logotipos y los nombres de visualización del sistema y del bot para el widget de comunicaciones](https://docs.aws.amazon.com/connect/latest/adminguide/pass-custom-styles.html#pass-override-system). | 
| `contactMetadataHandler` | Función | Función de devolución de llamada para acceder a contactId. Por ejemplo, añada un detector de eventos para gestionar situaciones como llamar a la StopContact función con el ContactID cuando la pestaña del navegador está cerrada o mantener la persistencia del chat con un ContactID anterior.  |  | 
| `registerCallback` | Objeto | Esto permite ejecutar llamadas de retorno para los eventos del ciclo de vida expuestos.  Para obtener más información, consulte [amazon-connect-chatjs](https://github.com/amazon-connect/amazon-connect-chatjs).  | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/supported-snippet-fields.html) | 
| `initialMessage` | Cadena | Mensaje que se enviará al chat recién creado. Limitaciones de longitud: mínimo de 1, máximo de 1024. | Para invocar el bot de Lex configurado en el flujo de contactos mediante un mensaje inicial, modifique el [bloque de flujo de entrada de obtención de clientes](get-customer-input.md) seleccionando la opción **Inicializar el bot con un mensaje**. Para obtener más información, consulte el artículo sobre [cómo configurar el bloque de flujo de entrada de obtención de clientes](get-customer-input.md#get-customer-input-properties). | 
| `authenticationParameters` | Objeto | Esto habilita el bloque de flujo [Autenticar al cliente](authenticate-customer.md). | Para obtener más información, consulte [Habilitación de la autenticación del cliente](enable-connect-managed-auth.md). | 
| `mockLexBotTyping` | Booleano | Habilite el indicador de escritura simulada para los mensajes del bot de Lex. | Predeterminado: false | 
| `customStartChat` | Función | Función de devolución de llamada para llamar a la API Start Chat desde su backend. | Para obtener más información, consulte [Hosted widget UI with custom Start Chat API](https://github.com/amazon-connect/amazon-connect-chat-interface#option-3-hosted-widget-ui-with-custom-start-chat-api)  | 

El siguiente ejemplo muestra cómo agregar campos de fragmentos al script HTML que agrega el widget de chat a su sitio web.

```
(function(w, d, x, id) {   /* ... */})(window, document, 
'amazon_connect', 'widgetId');
 amazon_connect('snippetId', 'snippetId');
 amazon_connect('styles', /* ... */);
 amazon_connect('registerCallback', {
    // Custom event example
    // WIDGET_FRAME_CLOSED
    /**
     * This event is triggered when user clicks on the chat widget close button, 
     * either widget close button was clicked when error in the chat session or normally by the user. 
     * This event can be used for webview use cases to go back to main app
     * 
     * @param {string} status - The reason for widget closure
     *   - "error_chat": Indicates the user clicked on widget close button due to an error in the chat session
     *   - "close_chat": Indicates the user clicked on widget close button normally by the user
     */
    'WIDGET_FRAME_CLOSED': (eventName, { status }) => {
        // You can implement custom logic based on the status value(error_chat or close_chat)
        if (status == "error_chat") {
            // handle error chat
        } else if (status == "close_chat") {
            // handle close chat  
        } 
    },
    // System event example
    /**
     * chatDetails: { 
     *     contactId: string, 
     *     participantId: string,
     *     participantToken: string,
     * }
     * data: {
     *     AbsoluteTime?: string,
     *     ContentType?: string,
     *     Type?: string,
     *     ParticipantId?: string,
     *     DisplayName?: string,
     *     ParticipantRole?: string,
     *     InitialContactId?: string
     * }
     */
    'PARTICIPANT_JOINED': (eventName, { chatDetails, data }) => {
        alert(`${data.ParticipantRole} joined the chat.`);
    },
    'event_Name_3': callback(function),
    'event_Name_4': callback(function),
    // ...
}); 
amazon_connect('initialMessage', 'Your initial message string');
// ... 
amazon_connect('snippetFieldHere', /* ... */);
<script/>
```

## Navegadores compatibles
<a name="chat-widget-supported-browsers"></a>

El widget de comunicaciones prediseñado es compatible con las siguientes versiones de navegador y superiores: 
+ Google Chrome 85.0
+ Safari 13.1
+ Microsoft Edge versión 85
+ Mozilla Firefox 81.0

El widget de comunicaciones admite notificaciones del navegador para dispositivos de escritorio. Para obtener más información, consulte [Envío de notificaciones del navegador a los clientes cuando lleguen los mensajes de chat](browser-notifications-chat.md).

## Paso 1: personalizar el widget de comunicaciones
<a name="customize-chat-widget"></a>

En este paso, se personaliza la experiencia del widget de comunicaciones para los clientes.

1. Inicie sesión en el sitio web de Amazon Connect administración en https://*instance name*.my.connect.aws/. Seleccione **Personalizar el widget de comunicaciones**.  
![\[La página de la guía de configuración con el enlace para personalizar el widget de comunicaciones.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/chatwidget-customize-chat-window-button.png)

1. En la página **Widgets de comunicaciones**, seleccione **Añadir widget de comunicaciones** para empezar a personalizar una nueva experiencia de widgets de comunicaciones. Para editar, eliminar o duplicar un widget de comunicaciones existente, elija una de las opciones de la columna **Acciones**, tal como se muestra en la siguiente imagen.   
![\[En la página de widgets de comunicaciones, añada el enlace al botón del widget de comunicaciones.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/chatwidget-add-chat-widget.png)

1. Introduzca un **nombre** y una **descripción** para el chat de comunicaciones. 
**nota**  
El nombre debe ser único para cada widget de comunicaciones creado en una instancia de Amazon Connect. 

1. En la sección **Opciones de comunicación**, elija cómo pueden interactuar sus clientes con el widget y, a continuación, seleccione **Guardar y continuar**.
**nota**  
Solo puede habilitar una tarea o un formulario previo al contacto por correo electrónico si el chat y la voz no están habilitados.

   La siguiente imagen muestra las opciones para habilitar el chat y la recepción de mensajes, así como para crear un formulario previo al chat para los clientes. Para habilitar un formulario previo al chat, primero debe crear una [vista](view-resources-sg.md) con un botón de acción de conexión y seleccionar la acción `StartChatContact`. Para obtener más información acerca de los formularios previos al chat y al contacto, consulte [Cómo añadir el widget de Amazon Connect a su sitio web](connect-widget-on-website.md).  
![\[La página del widget de comunicación está configurada para el chat y las llamadas web.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/comm-widget-page-chat.png)

1. En la página **Crear widget de comunicación**, elija los estilos del botón del widget, los nombres públicos y los estilos.

   A medida que elija estas opciones, la versión preliminar del widget se actualizará automáticamente para que pueda ver el aspecto de la experiencia para los clientes.  
![\[Versión preliminar del widget de comunicaciones.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/netra-chat-preview.png)

**Estilos de botón**

1. Para elegir los colores del fondo del botón, introduzca valores hexadecimales ([códigos de color HTML](https://htmlcolorcodes.com/)).

1. Elija **Blanco** o **Negro** para el color del icono. El color del icono no se puede personalizar.

**Encabezado del widget**

1. Proporcione valores para el mensaje y el color del encabezado y el color de fondo del widget. 

1. **URL del logotipo**: inserte una URL en el banner de su logotipo desde un bucket de Amazon S3 u otro origen en línea.
**nota**  
La versión preliminar del widget de comunicaciones en la página de personalización no mostrará el logotipo si procede de un origen que no sea un bucket de Amazon S3. No obstante, el logotipo se mostrará cuando se implemente el widget de comunicaciones personalizado en su página.

   El banner debe estar en formato .svg, .jpg o .png. La imagen puede tener 280 píxeles (ancho) por 60 píxeles (alto). Cualquier imagen que supere esas dimensiones se escalará para ajustarse al espacio del componente de logotipo de 280 x 60.

   1. Para obtener instrucciones sobre cómo cargar en S3 un archivo como el banner de su logotipo, consulte [Carga de objetos](https://docs.aws.amazon.com/AmazonS3/latest/userguide/upload-objects.html) en la *Guía del usuario de Amazon Simple Storage Service*.

   1. Asegúrese de que los permisos de imagen estén configurados correctamente para que el widget de comunicaciones tenga permisos para acceder a la imagen. Para obtener más información sobre cómo hacer que un objeto S3 sea de acceso público, consulte [Paso 2: agregar una política de bucket](https://docs.aws.amazon.com/AmazonS3/latest/userguide/WebsiteAccessPermissionsReqd.html#bucket-policy-static-site) en el tema *Configuración de permisos para el acceso al sitio web*.

**Vista del chat**

1.  **Tipo de letra**: use el menú desplegable para elegir la fuente del texto en el widget de comunicaciones.

1. 
   + **Nombre para mostrar del mensaje del sistema**: escriba un nuevo nombre para mostrar que sustituya al predeterminado. El valor predeterminado es **SYSTEM\$1MESSAGE**.
   + **Nombre para mostrar del mensaje del bot**: escriba un nuevo nombre para mostrar que sustituya al predeterminado. El valor predeterminado es **BOT**.
   + **Marcador de posición de entrada de texto**: escriba un nuevo marcador de posición que sustituya al predeterminado. El valor predeterminado es **Escriba un mensaje**. 
   + **Texto del botón de fin de chat**: escriba un texto nuevo para reemplazar el predeterminado. El valor predeterminado es **Finalizar chat**.

1. **Color de la burbuja de chat del agente**: elija los colores de las burbujas de mensajes del agente con valores hexadecimales ([códigos de color HTML](https://htmlcolorcodes.com/)).

1. **Color de la burbuja de chat del cliente**: elija los colores de las burbujas de mensajes del cliente con valores hexadecimales ([códigos de color HTML](https://htmlcolorcodes.com/)). 

1. Elija **Guardar y continuar**.

## Paso 2: especificar los dominios del sitio web en los que espera mostrar el widget de comunicaciones
<a name="chat-widget-domains"></a>

1. Introduzca los dominios del sitio web en los que desea colocar el widget de comunicaciones. El chat se carga solo en los sitios web que seleccione en este paso. 

   Seleccione **Agregar dominio** para agregar hasta 50 dominios.  
![\[La opción de agregar dominio.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/chatwidget-add-domain.png)

   Comportamiento de las listas de dominios permitidos:
   + Los subdominios están incluidos automáticamente. Por ejemplo, si permite example.com, sus subdominios (como sub.example.com) también estarán permitidos.
   + El protocolo http:// o https:// debe coincidir de forma exacta con la configuración. Especifique el protocolo exacto al configurar los dominios permitidos.
   + Todas las rutas URL están permitidas automáticamente. Por ejemplo, si se permite example.com, todas las páginas incluidas en él (por ejemplo). com/cart or example.com/checkout) son accesibles. No puede permitir ni bloquear subdirectorios específicos.
**importante**  
Compruebe que su sitio web URLs sea válido y no contenga errores. Incluya la URL completa que comience por https://.
Le recomendamos utilizar https:// para sus sitios web y aplicaciones de producción.

1. En **Añadir seguridad a tu widget de comunicaciones**, te recomendamos que selecciones **Sí** y que trabajes con el administrador del sitio web para configurar tus servidores web de forma que emitan tokens web JSON (JWTs) para las nuevas solicitudes de chat. Esto le proporciona un mayor control a la hora de iniciar nuevos chats, incluida la posibilidad de verificar que las solicitudes de chat enviadas a Amazon Connect proceden de usuarios autenticados.  
![\[La activación de la seguridad para las nuevas solicitudes de widgets de comunicación.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/chatwidget-choose-security.png)

   Si elige **Sí**, obtendrá lo siguiente:
   + Amazon Connect proporciona una clave de seguridad de 44 caracteres en la página siguiente que puede utilizar para crear tokens web JSON ()JWTs.
   + Amazon Connect agrega una función de devolución de llamada en el script de inserción del widget de comunicaciones que comprueba si hay un token web JSON (JWT) cuando se inicia un chat.

     Debe implementar la función de devolución de llamada en el fragmento insertado, como se muestra en el siguiente ejemplo.

     ```
     amazon_connect('authenticate', function(callback) {
       window.fetch('/token').then(res => {
         res.json().then(data => {
           callback(data.data);
         });
       });
     });
     ```

   Si elige esta opción, en el siguiente paso obtendrá una clave de seguridad para todas las solicitudes de chat iniciadas en sus sitios web. Pídale al administrador de su sitio web que configure sus servidores web para que puedan JWTs utilizar esta clave de seguridad. 

1. Seleccione **Save**.

## Paso 3: confirmar y copiar el código del widget de comunicaciones y las claves de seguridad
<a name="confirm-and-copy-chat-widget-script"></a>

En este paso, confirme las selecciones y copie el código para el widget de comunicaciones e insértelo en su sitio web. Si eligió utilizarlas JWTs en el [paso 2](#chat-widget-domains), también puede copiar las claves secretas para crearlas. 

### Clave de seguridad
<a name="chat-widget-security-key"></a>

Utilice esta clave de seguridad de 44 caracteres para generar tokens web JSON desde su servidor web. También puede actualizar, o rotar, las claves si necesita cambiarlas. Al hacerlo, Amazon Connect le proporciona una clave nueva y conserva la clave anterior hasta que tenga la oportunidad de reemplazarla. Una vez implementada la nueva clave, puede volver a Amazon Connect y eliminar la clave anterior.

![\[La clave de seguridad proporcionada por Amazon Connect.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/chatwidget-security-key.png)


Cuando sus clientes interactúan con el icono de iniciar chat en su página web, el widget de comunicaciones solicita a su servidor web un JWT. Cuando se proporcione este JWT, el widget lo incluirá como parte de la solicitud de chat del cliente final a Amazon Connect. A continuación, Amazon Connect utiliza la clave secreta para descifrar el token. Si se realiza correctamente, esto confirma que el JWT lo ha emitido su servidor web y Amazon Connect enruta la solicitud de chat a los agentes de su centro de contacto.

#### Aspectos específicos del token web JSON
<a name="jwt"></a>
+ Algoritmo: **HS256**
+ Notificaciones:
  + **sub**: *widgetId*

    Reemplace `widgetId` por su propio widgetId. Para encontrar su widgetId, consulte el ejemplo en [Script del widget de comunicaciones](#chat-widget-script).
  + **iat**: \$1hora de emisión.
  + **exp**: \$1vencimiento (10 minutos máximo).
  + **segmentAttributes (opcional)**: un conjunto de pares clave-valor definidos por el sistema que se almacenan en segmentos de contacto individuales mediante un mapa de atributos. Para obtener más información, consulte SegmentAttributes la [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html#connect-StartChatContact-request-SegmentAttributes)API.
  + **atributos (opcional)**: objeto con pares string-to-string clave-valor. Los atributos de contacto deben seguir las limitaciones establecidas por la [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html#connect-StartChatContact-request-Attributes)API.
  + **relatedContactId (opcional)**: cadena con un identificador de contacto válido. relatedContactId Deben seguir las limitaciones establecidas por la [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)API.
  + **customerId (optional)**: puede ser un ID de Perfiles de clientes de Amazon Connect o un identificador personalizado de un sistema externo, como un CRM. 

  \$1 Para obtener información sobre el formato de fecha, consulte el siguiente documento del grupo de trabajo de ingeniería de Internet (IETF): [Token web JSON (JWT)](https://tools.ietf.org/html/rfc7519), página 5. 

El siguiente fragmento de código muestra un ejemplo de cómo generar un JWT en Python:

```
import jwt 
import datetime 
CONNECT_SECRET = "your-securely-stored-jwt-secret" 
WIDGET_ID = "widget-id" 
JWT_EXP_DELTA_SECONDS = 500

payload = { 
'sub': WIDGET_ID, 
'iat': datetime.datetime.utcnow(), 
'exp': datetime.datetime.utcnow() + datetime.timedelta(seconds=JWT_EXP_DELTA_SECONDS), 
'customerId': "your-customer-id",
'relatedContactId':'your-relatedContactId',                    
'segmentAttributes': {"connect:Subtype": {"ValueString" : "connect:Guide"}}, 'attributes': {"name": "Jane", "memberID": "123456789", "email": "Jane@example.com", "isPremiumUser": "true", "age": "45"} } 
header = { 'typ': "JWT", 'alg': 'HS256' } 
encoded_token = jwt.encode((payload), CONNECT_SECRET, algorithm="HS256", headers=header) // CONNECT_SECRET is the security key provided by Amazon Connect
```

### Script del widget de comunicaciones
<a name="chat-widget-script"></a>

La siguiente imagen muestra un ejemplo de lo JavaScript que incluyes en los sitios web en los que quieres que los clientes conversen con los agentes. Este script muestra el widget en la esquina inferior derecha de su página web. 

![\[Script del widget de comunicaciones.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/chatwidget-code.png)


Cuando se carga la página web, los clientes ven primero el icono **Iniciar**. Si eligen este icono, se abre el widget de comunicaciones y los clientes pueden enviar un mensaje a sus agentes.

Para realizar cambios en el widget de comunicaciones en cualquier momento, elija **Editar**.

**nota**  
Los cambios guardados actualizan la experiencia del cliente en pocos minutos. Confirme la configuración de su widget antes de guardarla. 

![\[Enlace de edición de la versión preliminar del widget.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/chatwidget-edit.png)


Para realizar cambios en los iconos de los widgets de la página web, recibirá un nuevo fragmento de código para actualizar directamente su página web.

## ¿Recibe mensajes de error?
<a name="chat-widget-error-messages"></a>

Si encuentra mensajes de error, consulte [Resolución de problemas en el widget de comunicaciones de Amazon Connect](ts-cw.md).

# Personalización del comportamiento de lanzamiento del widget y del icono del botón de su sitio web alojado en Amazon Connect
<a name="customize-widget-launch"></a>

Para personalizar aún más el modo en que su sitio web muestra y lanza el icono del widget alojado, puede configurar el comportamiento de lanzamiento y ocultar el icono predeterminado. Por ejemplo, puede lanzar mediante programación el widget desde un elemento de botón **Chatear con nosotros** que esté renderizado en su sitio web.

**Topics**
+ [Cómo configurar el comportamiento de lanzamiento personalizado del widget](#config-widget-launch)
+ [Restricciones y opciones admitidas](#launch-options-constraints)
+ [Configuración del lanzamiento del widget para casos de uso personalizados](#launch-usage)
+ [Habilitación de la persistencia de sesiones de chat entre pestañas](#chat-persistence-across-tabs)

## Cómo configurar el comportamiento de lanzamiento personalizado del widget
<a name="config-widget-launch"></a>

Para pasar un comportamiento de lanzamiento personalizado, utilice el siguiente bloque de código de ejemplo e insértelo en su widget. Todos los campos que se muestran en el siguiente ejemplo son opcionales y se puede utilizar cualquier combinación.

```
amazon_connect('customLaunchBehavior', {
    skipIconButtonAndAutoLaunch: true,
    alwaysHideWidgetButton: true,
    programmaticLaunch: (function(launchCallback) {
        var launchWidgetBtn = document.getElementById('launch-widget-btn');
        if (launchWidgetBtn) {
            launchWidgetBtn.addEventListener('click', launchCallback);
            window.onunload = function() {
            launchWidgetBtn.removeEventListener('click', launchCallback);
            return;
            }
        }
    })
});
```

## Restricciones y opciones admitidas
<a name="launch-options-constraints"></a>

En la siguiente tabla, se enumeran las opciones de comportamiento de lanzamiento personalizado admitidas. Los campos son opcionales y puede utilizarse cualquier combinación.


| Nombre de la opción | Tipo | Description (Descripción) | Predeterminado | 
| --- | --- | --- | --- | 
|  `skipIconButtonAndAutoLaunch`  | Booleano  | Un indicador que indica enable/disable el inicio automático del widget sin que el usuario haga clic en la carga de la página. | sin definir | 
|  `alwaysHideWidgetButton`  | Booleano  | Un indicador que impide que enable/disable se renderice el icono del widget (a menos que haya una sesión de chat en curso). | sin definir | 
|  `programmaticLaunch`  | Función  |  | sin definir | 

## Configuración del lanzamiento del widget para casos de uso personalizados
<a name="launch-usage"></a>

### Botón de lanzamiento del widget personalizado
<a name="custom-launch-button"></a>

En el siguiente ejemplo se muestran los cambios que tendría que realizar en el widget para configurar el lanzamiento programático de modo que se abra solo cuando el usuario elija un elemento de botón personalizado renderizado en cualquier parte de su sitio web. Por ejemplo, puede elegir un botón llamado **Contacto** o **Chatear**. Opcionalmente, puede ocultar el icono predeterminado del widget de Amazon Connect hasta que se haya abierto el widget.

```
<button id="launch-widget-btn">Chat With Us</button>
```

```
<script type="text/javascript">
 (function(w, d, x, id){
    s=d.createElement("script");
    s.src="./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', 'asfd-asdf-asfd-asdf-asdf');
  amazon_connect('styles', { openChat: { color: '#000', backgroundColor: '#3498fe'}, closeChat: { color: '#fff', backgroundColor: '#123456'} });
  amazon_connect('snippetId', "QVFJREFsdafsdfsadfsdafasdfasdfsdafasdfz0=")
  amazon_connect('customLaunchBehavior', {
        skipIconButtonAndAutoLaunch: true,
        alwaysHideWidgetButton: true,
        programmaticLaunch: (function(launchCallback) {
            var launchWidgetBtn = document.getElementById('launch-widget-btn');
            if (launchWidgetBtn) {
                launchWidgetBtn.addEventListener('click', launchCallback);
                window.onunload = function() {
                launchWidgetBtn.removeEventListener('click', launchCallback);
                return;
                }
            }
        }),
    });
</script>
```

### Compatibilidad con hipervínculos
<a name="hyperlink-support"></a>

En el siguiente ejemplo se muestran los cambios que tendría que hacer en la configuración del widget `auto-launch`, que abre el widget sin esperar a que el usuario haga clic. Puede implementarlo en una página alojada en su sitio web para crear un hipervínculo que se puede compartir.

```
https://example.com/contact-us?autoLaunchMyWidget=true
```

```
<script type="text/javascript">
 (function(w, d, x, id){
    s=d.createElement("script");
    s.src="./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', 'asfd-asdf-asfd-asdf-asdf');
  amazon_connect('styles', { openChat: { color: '#000', backgroundColor: '#3498fe'}, closeChat: { color: '#fff', backgroundColor: '#123456'} });
  amazon_connect('snippetId', "QVFJREFsdafsdfsadfsdafasdfasdfsdafasdfz0=")
  amazon_connect('customLaunchBehavior', {
        skipIconButtonAndAutoLaunch: true
    });
</script>
```

### Carga de los activos del widget al hacer clic en el botón
<a name="load-assets"></a>

En el siguiente ejemplo se muestran los cambios que tendría que hacer en el widget para que la página de su sitio web se cargue más rápidamente al obtener los activos estáticos del widget cuando un usuario hace clic en el botón **Chatear**. Normalmente, solo un pequeño porcentaje de los clientes que visitan una página **Contacto** abren el widget de Amazon Connect. El widget podría estar agregando latencia en la carga de la página al obtener archivos de CDN, aunque los clientes nunca abran el widget.

Una solución alternativa es ejecutar el código del fragmento de forma asíncrona (o nunca) al hacer clic en el botón. 

```
<button id="launch-widget-btn">Chat With Us</button>
```

```
var buttonElem = document.getElementById('launch-widget-btn');

buttonElem.addEventListener('click', function() {
    (function(w, d, x, id){
        s=d.createElement("script");
        s.src="./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', 'asfd-asdf-asfd-asdf-asdf');
    amazon_connect('styles', { openChat: { color: '#000', backgroundColor: '#3498fe'}, closeChat: { color: '#fff', backgroundColor: '#123456'} });
    amazon_connect('snippetId', "QVFJREFsdafsdfsadfsdafasdfasdfsdafasdfz0=")
    amazon_connect('customLaunchBehavior', {
        skipIconButtonAndAutoLaunch: true
    });
});
```

### Lanzamiento de un nuevo chat en una ventana del navegador
<a name="new-chat-browser-window"></a>

En el siguiente ejemplo se muestran los cambios que tendría que hacer en el widget para lanzar una nueva ventana del navegador y lanzar automáticamente el chat a pantalla completa.

```
<button id="openChatWindowButton">Launch a Chat</button>
```

```
<script> // Function to open a new browser window with specified URL and dimensions
    function openNewWindow() {
        var url = 'https://mycompany.com/support?autoLaunchChat=true';

        // Define the width and height
        var width = 300;
        var height = 540;

        // Calculate the left and top position to center the window
        var left = (window.innerWidth - width) / 2;
        var top = (window.innerHeight - height) / 2;

        // Open the new window with the specified URL, dimensions, and position
        var newWindow = window.open(url, '', 'width=${width}, height=${height}, left=${left}, top=${top}');
    }

    // Attach a click event listener to the button
    document.getElementById('openChatWindowButton').addEventListener('click', openNewWindow);
</script>
```

## Habilitación de la persistencia de sesiones de chat entre pestañas
<a name="chat-persistence-across-tabs"></a>

De forma predeterminada, si se abre un chat en una pestaña y, a continuación, el usuario abre una nueva pestaña e inicia otro chat, se iniciará un nuevo chat, en lugar de conectarse al chat existente. Puede habilitar la persistencia de las sesiones de chat en todas las pestañas si quiere que el usuario se conecte al chat existente iniciado en la pestaña original. 

La sesión de chat se guarda en el almacenamiento de sesiones del navegador, en la variable `persistedChatSession`. Debe copiar este valor en el almacenamiento de sesiones de la nueva pestaña cuando se inicialice el widget por primera vez. A continuación, encontrará las instrucciones.

Para conectarse a la misma sesión de chat cuando el usuario navega a diferentes subdominios, puede configurar la propiedad de dominio de la cookie. Por ejemplo, imagine que tiene los subdominios `domain1.example.com` y `domain2.example.com`. Puede añadir la propiedad `domain=.example.com` para poder acceder a la cookie desde todos los subdominios.

1. Copie el siguiente código junto a las demás funciones de amazon\$1connect en el fragmento de widget alojado. Utilice los controladores de eventos `registerCallback` para almacenar `persistedChatSession` como una cookie y poder acceder en la nueva pestaña. Esto también limpia la cookie cuando finaliza el chat.

   

   ```
   amazon_connect('registerCallback', {
   'CONNECTION_ESTABLISHED': (eventName, { chatDetails, data }) => {
    document.cookie = `activeChat=${sessionStorage.getItem("persistedChatSession")}; SameSite=None; Secure`;
   }, 
   'CHAT_ENDED': () => {
     document.cookie = "activeChat=; SameSite=None; Secure";
   }
   });
   ```

1. Recupere el valor de la cookie, si existe, y establezca el valor de almacenamiento de la sesión en la nueva pestaña.

   ```
   const cookie = document.cookie.split('; ').find(c => c.startsWith('activeChat='));
   if (cookie) {
     const activeChatValue = cookie.split('=')[1];
     sessionStorage.setItem('persistedChatSession', activeChatValue);
   }
   
   //Your hosted widget snippet should be on this page
   ```

# Transferencia del nombre de visualización del cliente cuando se inicia un chat de Amazon Connect
<a name="pass-display-name-chat"></a>

Para ofrecer una experiencia más personalizada tanto a sus clientes como a sus agentes, puede personalizar el widget de comunicaciones de Amazon Connect para que transfiera el nombre público del cliente durante la inicialización del contacto. Tanto el cliente como el agente pueden ver el nombre durante toda la interacción por chat. Este nombre para mostrar se registra en la transcripción del chat.

En las siguientes imágenes se presenta el nombre para mostrar del cliente en su experiencia de chat y su nombre en el CCP del agente.

![\[El nombre del cliente en su experiencia de chat, el nombre del cliente en el CCP del agente.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/chatwidget-displayname.png)


1. Cómo puede aparecer el nombre para mostrar al cliente que utiliza la interfaz de usuario del chat.

1. Cómo puede aparecer el nombre para mostrar del cliente al agente que utiliza el CCP.

## Cómo transferir el nombre público de un cliente en el widget de comunicaciones
<a name="setup-display-name"></a>

Para transferir el nombre para mostrar de un cliente, implemente su función de devolución de llamada en el fragmento. Amazon Connect recupera automáticamente el nombre para mostrar.

1. Realice los pasos de [Adición de una interfaz de usuario de chat al sitio web alojado en Amazon Connect](add-chat-to-website.md) si aún no lo ha hecho.

1. Aumente el fragmento de widget existente para agregar una devolución de llamada `customerDisplayName`. Podría tener un aspecto similar al ejemplo siguiente:

   ```
   amazon_connect('customerDisplayName', function(callback) {
     const displayName = 'Jane Doe';
     callback(displayName);
   });
   ```

   Lo importante es que el nombre se pase a `callback(name)`.

## Qué debe saber del nombre para mostrar del cliente
<a name="setup-display-name-important-notes"></a>
+ Solo puede existir una función `customerDisplayName` cada vez.
+ El nombre para mostrar del cliente debe cumplir con las limitaciones establecidas por la [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html#connect-Type-ParticipantDetails-DisplayName)API. Es decir, el nombre debe ser una cadena de entre 1 y 256 caracteres.
+ Una cadena vacía, nula o sin definir es una entrada no válida para el nombre para mostrar. Para protegerse contra la transferencia accidental de estas entradas, el widget registra un error `Invalid customerDisplayName provided` en la consola del navegador y, a continuación, inicia el chat con el nombre para mostrar predeterminado, **Cliente**.
+ Dado que el fragmento se encuentra en el frontend de su sitio web, no pase datos confidenciales como nombre para mostrar. Asegúrese de seguir las prácticas de seguridad adecuadas para mantener sus datos a salvo y protegerse contra ataques y personas malintencionadas.

# Transferencia de atributos de contacto a un agente en el Panel de control de contacto (CCP) cuando se inicia un chat
<a name="pass-contact-attributes-chat"></a>

Puede utilizar [atributos de contacto](what-is-a-contact-attribute.md) para capturar información sobre el contacto que utiliza el widget de comunicaciones. A continuación, puede mostrar esa información al agente a través del Panel de control de contacto (CCP) o utilizarla en cualquier otra parte del flujo.

Por ejemplo, puede personalizar su flujo para que diga el nombre del cliente en su mensaje de bienvenida. O bien, puedes usar atributos específicos de tu empresa, como identificadores de clientes account/member IDs, como nombres y correos electrónicos, u otros metadatos asociados a un contacto.

## Cómo transferir los atributos de contacto al widget de comunicaciones
<a name="how-to-contact-attributes-chatwidget"></a>

1. Habilite la seguridad en el widget de comunicaciones, tal como se describe en [Adición de una interfaz de usuario de chat al sitio web alojado en Amazon Connect](add-chat-to-website.md), si aún no lo ha hecho:

   1. En el paso 2, en **Agregar seguridad para su widget de chat**, elija **Sí**.

   1. En el paso 3, utilice la clave de seguridad para generar los tokens web JSON.

1. Agregue los atributos de contacto a la carga de su JWT como solicitud `attributes`.

   A continuación, se muestra un ejemplo de cómo podría generar un JWT con atributos de contacto en Python:
**nota**  
Es un requisito previo que JWT esté instalado. Para instalarlo, ejecute `pip install PyJWT` en su terminal.

   ```
   import jwt 
   import datetime 
   CONNECT_SECRET = "your-securely-stored-jwt-secret" 
   WIDGET_ID = "widget-id" 
   JWT_EXP_DELTA_SECONDS = 500
   
   payload = { 
   'sub': WIDGET_ID, 
   'iat': datetime.datetime.utcnow(), 
   'exp': datetime.datetime.utcnow() + datetime.timedelta(seconds=JWT_EXP_DELTA_SECONDS), 
   'segmentAttributes': {"connect:Subtype": {"ValueString" : "connect:Guide"}}, 'attributes': {"name": "Jane", "memberID": "123456789", "email": "Jane@example.com", "isPremiumUser": "true", "age": "45"} } 
   header = { 'typ': "JWT", 'alg': 'HS256' } 
   encoded_token = jwt.encode((payload), CONNECT_SECRET, algorithm="HS256", headers=header) // CONNECT_SECRET is the security key provided by Amazon Connect
   ```

   En la carga, debe crear una clave de cadena `attributes` (tal cual, todo en minúsculas), con un objeto como valor. Ese objeto debe tener pares string-to-string clave-valor. Si se pasa algo distinto a una cadena en cualquiera de los atributos, el chat no se iniciará. 

   Los atributos de contacto deben seguir las limitaciones establecidas por la [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html#connect-StartChatContact-request-Attributes)API: 
   + Las claves deben tener una longitud mínima de 1
   + Los valores pueden tener una longitud mínima de 0

Si lo desea, puede añadir la cadena SegmentAttributes al mapa de [SegmentAttributeValue](https://docs.aws.amazon.com/connect/latest/APIReference/API_SegmentAttributeValue.html)objetos, en la carga útil. Los atributos son atributos estándar. Amazon Connect Se puede acceder a ellos en los flujos. Los atributos de contacto deben seguir las limitaciones establecidas por la [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html#connect-StartChatContact-request-SegmentAttributes)API.

## Método alternativo: pasar los atributos de contacto directamente desde un fragmento de código
<a name="pass-attributes-directly"></a>

**nota**  
El código del fragmento añade `HostedWidget-` al principio de todas las claves de atributos de contacto que transfiere. En el siguiente ejemplo, el agente verá el par clave-valor `HostedWidget-foo: 'bar'`.
Aunque estos atributos están definidos con el prefijo `HostedWidget-`, se pueden modificar en el sitio del cliente. Utilice la configuración JWT si necesita información confidencial o datos no modificables en el flujo. 

En el ejemplo siguiente, se muestra cómo transferir atributos de contacto directamente desde el código del fragmento sin activar la seguridad del widget. 

```
<script type="text/javascript">
  (function(w, d, x, id){ /* ... */ })(window, document, 'amazon_connect', 'widgetId');
  amazon_connect('snippetId', 'snippetId');
  amazon_connect('styles', /* ... */);
  // ...

  amazon_connect('contactAttributes', {
   foo: 'bar'
  })
<script/>
```

### Uso de los atributos en los flujos
<a name="contact-flow-usage-chat"></a>

El bloque de flujo [Comprobar atributos de contacto](check-contact-attributes.md) proporciona acceso a estos atributos a través del espacio de nombres **Definido por el usuario**, como se muestra en la siguiente imagen. Puede utilizar el bloque de flujo para añadir una lógica de ramificación. La ruta completa es `$.Attributes.HostedWidget-attributeName`.

![\[Imagen que muestra un bloque de flujo que se deriva a las peticiones Válido y No válido.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/flow-check-contact-attrib.png)


## Qué debe saber
<a name="contact-attributes-chatwidget-important-notes"></a>
+ El widget de comunicaciones tiene un límite de 6144 bytes para todo el token codificado. Como JavaScript utiliza la codificación UTF-16, se utilizan 2 bytes por carácter, por lo que el tamaño máximo `encoded_token` debe ser de unos 3000 caracteres.
+ Se debe transferir el encoded\$1token a `callback(data)`. El fragmento `authenticate` no necesita ningún cambio adicional. Por ejemplo:

  ```
  amazon_connect('authenticate', function(callback) {
    window.fetch('/token').then(res => {
      res.json().then(data => {
        callback(data.data);
      });
    });
  });
  ```
+ El uso de un JWT para transferir los atributos de contacto garantiza la integridad de los datos. Si protege el secreto compartido y sigue las prácticas de seguridad adecuadas, puede contribuir a garantizar que una persona malintencionada no pueda manipular los datos.
+ Los atributos de contacto solo están codificados en el JWT, no cifrados, por lo que es posible descodificarlos y leerlos.
+ Si desea probar la experiencia de chat con la [experiencia de chat simulada](chat-testing.md#test-chat) e incluir atributos de contacto, asegúrese de encerrar tanto la clave como el valor entre comillas, como se muestra en la siguiente imagen.  
![\[La página de configuración de la prueba, una clave de atributo de contacto entre comillas, un valor entre comillas.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/test-chat-contact-attributes.png)

# Personalizaciones adicionales del widget de chat de Amazon Connect
<a name="pass-customization-object"></a>

Puede añadir las siguientes personalizaciones opcionales a la interfaz de usuario del chat:
+ Mostrar el botón **Finalizar chat** en el menú desplegable del encabezado en lugar de en el pie de página.
+ Enmascarar u ocultar los nombres públicos.
+ Agregar iconos de mensajes.
+ Anular los mensajes de eventos.
+ Configurar un cuadro de diálogo de confirmación que se mostrará a los clientes cuando pulsen el botón **Finalizar chat**. Este cuadro de diálogo verifica que los clientes realmente tienen la intención de finalizar la sesión de chat. Puede personalizar el cuadro de diálogo de confirmación, el título, el mensaje y el texto del botón.
+ Anular el mensaje de rechazo del archivo adjunto.

## Configuración del objeto de personalización
<a name="configure-customization-object"></a>

En este ejemplo, se muestra cómo implementar todas las personalizaciones opcionales. Para ver una lista de todas las personalizaciones posibles, consulte [Restricciones y opciones admitidas](#customization-options-constraints). Como son opcionales, puede implementar algunos o todos los campos que se muestran en el siguiente ejemplo. Sustituya las cadenas `eventNames.customer`, `eventNames.agent`, `eventNames.supervisor`, `eventMessages.participantJoined`, `eventMessages.participantDisconnect`, `eventMessages.participantLeft`, `eventMessages.participantIdle`, `eventMessages.participantReturned` y `eventMessages.chatEnded` según sea necesario. Los iconos deben estar alojados en un entorno público. URLs

```
amazon_connect('customizationObject', {
        header: { 
            dropdown: true, 
            dynamicHeader: true,
        },
        transcript: { 
            hideDisplayNames: false, 
            eventNames: {
                customer: "User",
                agent: "Webchat Agent",
                supervisor: "Webchat Supervisor"
            },
            eventMessages: {
                participantJoined: "{name} has joined the chat",
                participantDisconnect: "",
                participantLeft: "{name} has dropped",
                participantIdle: "{name}, are you still there?",
                participantReturned: "",
                chatEnded: "Chat ended",
            },
            displayIcons: true,
            iconSources: { 
                botMessage: "imageURL",
                systemMessage: "imageURL",
                agentMessage: "imageURL",
                customerMessage: "imageURL",
            },
        },
        composer: {
            disableEmojiPicker: true,
            disableCustomerAttachments: true,
            alwaysHideToolbar: true,
            hide: false,
        },
        footer: {
            disabled:true,
            skipCloseChatButton: true,
        },
        endChat: {
            enableConfirmationDialog: true,
            confirmationDialogText: {
                title: "End Chat",
                message: "Are you sure you want to end this chat?",
                confirmButtonText: "End Chat",
                cancelButtonText: "Cancel",
        },
    },
    attachment: {
         // Default rejectedErrorMessage: Attachment was rejected.
        rejectedErrorMessage: "Custom Error Message: Files cannot exceed 15 MB." //this is customizable attribute 
    }
});
```

La siguiente imagen muestra el aspecto de las personalizaciones si usa el ejemplo:

![\[Diagrama con los nombres públicos, las ubicaciones de los menús y los iconos personalizables\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/chat-customization-diagram2.png)


## Restricciones y opciones admitidas
<a name="customization-options-constraints"></a>

En la siguiente tabla se enumeran los nombres de personalización admitidos y las restricciones de valor recomendadas.


| Opción de diseño personalizado | Tipo | Descripción | 
| --- | --- | --- | 
|  `header.dropdown`  |  Booleano  |  Representa el menú desplegable del encabezado en lugar del pie de página predeterminado.  Si configura esta opción como `true`, aparece el botón **Descarga de transcripciones** y permanece visible hasta que establezca la opción en `false` o hasta que la elimine.   | 
| `header.dynamicHeader` | Booleano | Establece dinámicamente el título del encabezado como «Chatear con Bot/AgentName». | 
| `header.hideTranscriptDownloadButton` | Booleano | Oculta el botón de [descarga de la transcripción](chat-widget-download-transcript.md) en el menú desplegable del encabezado. El valor predeterminado es false. | 
|  `transcript.hideDisplayNames`  |  Booleano  |  Oculta todos los nombres públicos y aplica máscaras de nombres predeterminados si no se proporcionan `eventNames`.  | 
|  `transcript.eventNames.customer`  |  Cadena  |  Enmascara el nombre público del cliente.  | 
|  `transcript.eventNames.agent`  |  Cadena  |  Enmascara el nombre público del agente.  | 
|  `transcript.eventNames.supervisor`  |  Cadena  |  Enmascara el nombre público del supervisor.  | 
|  ` transcript.eventMessages.participantJoined`  |  Cadena  |  Anula el mensaje del evento en la transcripción para cuando un participante se haya unido al chat. Si se especifica una cadena vacía, el mensaje del evento se omitirá de la transcripción. Se puede pasar `{name}` en el mensaje; se sustituirá por el nombre público del participante correspondiente. El mensaje predeterminado es `{name} has joined the chat`.   | 
|  `transcript.eventMessages.participantDisconnect`  |  Cadena  |  Anula el mensaje del evento en la transcripción para cuando un participante se desconecta del chat. Si se especifica una cadena vacía, el mensaje del evento se omitirá de la transcripción. Se puede pasar `{name}` en el mensaje; se sustituirá por el nombre público del participante correspondiente. El mensaje predeterminado es \$1`name} has been idle too long, disconnecting`.  | 
|  `transcript.eventMessages.participantLeft`  |  Cadena  |  Anula el mensaje del evento en la transcripción para cuando un participante se haya marchado del chat. Si se especifica una cadena vacía, el mensaje del evento se omitirá de la transcripción. Se puede pasar `{name}` en el mensaje; se sustituirá por el nombre público del participante correspondiente. El mensaje predeterminado es `{name} has left the chat`.  | 
|  `transcript.eventMessages.participantIdle`  |  Cadena  |  Anula el mensaje del evento en la transcripción para cuando un participante esté inactivo. Si se especifica una cadena vacía, el mensaje del evento se omitirá de la transcripción. Se puede pasar `{name}` en el mensaje; se sustituirá por el nombre público del participante correspondiente. El mensaje predeterminado es `{name} has become idle`.  | 
|  `transcript.eventMessages.participantReturned`  |  Cadena  |  Anula el mensaje del evento en la transcripción para cuando un participante haya vuelto al chat. Si se especifica una cadena vacía, el mensaje del evento se omitirá de la transcripción. Se puede pasar `{name} ` en el mensaje; se sustituirá por el nombre público del participante correspondiente. El mensaje predeterminado es `{name} has returned`.  | 
|  `transcript.eventMessages.chatEnded`  |  Cadena  |  Anula el mensaje del evento en la transcripción para cuando el chat ha finalizado. Si se especifica una cadena vacía, el mensaje del evento se omitirá de la transcripción. Se puede pasar `{name}` en el mensaje; se sustituirá por el nombre público del participante correspondiente. El mensaje predeterminado es `Chat has ended!`  | 
|  `transcript.displayIcons`  |  Booleano  |  Activa los iconos de visualización de mensajes.  | 
|  `transcript.iconSources.botMessage`  |  Cadena  |  El icono que se muestra para los mensajes del bot debe estar alojado en una URL pública.  | 
|  `transcript.iconSources.systemMessage`  |  Cadena  |  El icono que se muestra para el mensaje del sistema debe estar alojado en una URL pública.  | 
|  `transcript.iconSources.agentMessage`  |  Cadena  |  El icono que se muestra para el mensaje del agente debe estar alojado en una URL pública.  | 
|  `transcript.iconSources.customerMessage`  |  Cadena  |  El icono que se muestra para el mensaje del cliente debe estar alojado en una URL pública.  | 
|  `composer.alwaysHideToolbar`  |  Booleano  |  Oculta la barra de herramientas de formato que incluye características de estilo de texto, como negrita, cursiva y opciones de listas numeradas y con viñetas.  | 
|  `composer.disableEmojiPicker`  |  Booleano  |  Desactiva el selector de emojis cuando se utiliza el [editor de texto enriquecido](enable-text-formatting-chat.md).  | 
| `composer.disableCustomerAttachments` | Booleano | Impide que los clientes envíen o carguen archivos adjuntos. | 
| `composer.hide` | Booleano | Oculta el compositor (`true`) o lo muestra (`false`). Para cambiar el compositor en función de los eventos (por ejemplo, cuando se une un agente), utilícelo `registerCallback` con el `hideComposer` método. Para obtener más información, consulte [Campos de fragmentos de widgets compatibles en Amazon Connect que se pueden personalizar](supported-snippet-fields.md).<pre>document.getElementById("amazon-connect-chat-widget-iframe").contentWindow.connect.ChatInterface.hideComposer(false)</pre> | 
|  `footer.disabled`  |  Booleano  |  Oculta el pie de página predeterminado y el botón **Finalizar chat**.  | 
|  `footer.skipCloseChatButton`  |  Booleano  |  Cierra directamente el widget al hacer clic en el botón **Finalizar chat**, en lugar de mostrar el botón **Cerrar**.  | 
| `endChat.enableConfirmationDialog` | Booleano | Activa el cuadro de diálogo de confirmación Finalizar chat. Si no se proporciona confirmationDialogText, se utilizan los textos predeterminados. | 
| `endChat.confirmationDialogText.title` | Cadena | Anula el título del cuadro de diálogo de confirmación Finalizar chat. | 
| `endChat.confirmationDialogText.message` | Cadena | Anula el mensaje del cuadro de diálogo de confirmación Finalizar chat. | 
| `endChat.confirmationDialogText.confirmButtonText` | Cadena | Anula el texto del botón de confirmación en el cuadro de diálogo de confirmación Finalizar chat. | 
| `endChat.confirmationDialogText.cancelButtonText` | Cadena | Anula el texto del botón de cancelación en el cuadro de diálogo de confirmación Finalizar chat. | 
| `attachment.rejectedErrorMessage` | Cadena | Anula el mensaje de error al rechazar los archivos adjuntos del widget de chat. | 

# Descarga la transcripción del widget de chat en Amazon Connect
<a name="chat-widget-download-transcript"></a>

Puede descargar un PDF de la transcripción en el widget de chat.

**Topics**
+ [Habilitación del menú desplegable de encabezado](#chat-widget-download-transcript-enable-header-dropdown)
+ [Descarga del PDF de la transcripción del chat](#chat-widget-download-transcript-pdf)

## Habilitación del menú desplegable de encabezado
<a name="chat-widget-download-transcript-enable-header-dropdown"></a>

El botón para descargar la transcripción se encuentra dentro de un menú desplegable en el encabezado. Para activar el menú desplegable del encabezado, debemos configurar el [customizationObject](pass-customization-object.md) del widget de chat en el script del widget.

```
amazon_connect('customizationObject', {
        header: { 
            dropdown: true, 
        }
});
```

Tenga en cuenta que si activa el menú desplegable, se desactivará automáticamente el pie de página, ya que la función **Finalizar chat** se trasladará al menú desplegable del encabezado. Si desea conservar el pie de página, puede volver a activarlo de la manera siguiente:

```
amazon_connect('customizationObject', {
        header: { 
            dropdown: true, 
        },
        footer: {
            disabled: false,
        }
});
```

## Descarga del PDF de la transcripción del chat
<a name="chat-widget-download-transcript-pdf"></a>

Tras activar el menú desplegable del encabezado, debería ver un menú de tres puntos en la parte superior izquierda del widget de chat. Dentro de ese menú desplegable, debería mostrarse un botón para descargar la **transcripción del chat**.

![\[Muestra el botón para descargar la transcripción del chat.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/chat-widget-download-transcript-pdf-1.png)


Al elegir descargar la **transcripción del chat**, se iniciará una descarga en PDF. El PDF de la transcripción del chat mostrará todos los mensajes, los nombres de visualización, las fechas y los eventos del mensaje, como los participantes que se van o se unen.

![\[Ejemplo de transcripción de chat descargada.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/chat-widget-download-transcript-pdf-2.png)


# Personalización del chat con el ejemplo de código abierto de Amazon Connect
<a name="download-chat-example"></a>

Puede personalizar aún más la experiencia de chat que utilizan los clientes para interactuar con los agentes. Utilice la [biblioteca de código abierto Amazon Connect](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/cloudformationTemplates/asyncCustomerChatUX) en GitHub. Es una plataforma que lo ayudará a empezar rápidamente. Así es como funciona:
+ El GitHub repositorio enlaza con una CloudFormation plantilla, que inicia el punto final de Amazon API Gateway que inicia una función Lambda. Puede utilizar esta plantilla como ejemplo.
+ Tras crear la AWS CloudFormation pila, puede llamar a esta API desde su aplicación, importar el widget de comunicaciones prediseñado, pasar la respuesta al widget y empezar a chatear. 

Para obtener más información acerca de la personalización de la experiencia de chat, consulte: 
+ [Documentación de la API de Amazon Connect Service](https://docs.aws.amazon.com/connect/latest/APIReference/welcome.html), especialmente la [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)API. 
+  [API del servicio para participantes de Amazon Connect](https://docs.aws.amazon.com/connect-participant/latest/APIReference/Welcome.html) 
+  [Amazon Connect Streams](https://github.com/aws/amazon-connect-streams). Utilícelo para integrar sus aplicaciones existentes con Amazon Connect. Puede incrustar los componentes del Panel de control de contacto (CCP) en su aplicación. 
+ [SDK de chat de Amazon Connect e implementaciones de ejemplo](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/) 

# Inicie chats en sus aplicaciones mediante Amazon Connect APIs
<a name="integrate-with-startchatcontact-api"></a>

Utilice la StartChatContact API de Amazon Connect APIs para iniciar chats en sus propias aplicaciones.

Para iniciar un chat, usa la [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)API.

Cuando explore la experiencia de chat por primera vez, notará que los chats no se cuentan en la métrica **Contactos entrantes** del informe de métricas históricas. Esto se debe a que el método de inicio para el chat en el registro de contacto (CTR) es **API**. 

En la siguiente imagen de un registro de contacto se muestra el *método de iniciación* establecido a *API*. 

![\[Un registro de contacto, el método de inicio establecido a API.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/ctr-api.png)


Después de transferir un chat a un agente, se incrementa la métrica **Contacts Incoming** (Contactos entrantes). El registro de contacto para la transferencia ya no incrementa la API, pero sí incrementa los **contactos entrantes**. 

# Envío de notificaciones del navegador a los clientes cuando lleguen los mensajes de chat
<a name="browser-notifications-chat"></a>

El widget de comunicaciones admite las notificaciones del navegador para sus clientes a través de sus dispositivos de escritorio. En concreto, sus clientes recibirán una notificación a través del navegador web cuando reciban un nuevo mensaje, pero no estarán activos en la página web que contiene la ventana de chat. Cuando los clientes hagan clic o toquen esta notificación, serán redirigidos automáticamente a la página web que contiene la ventana de chat. Sus clientes pueden habilitar o deshabilitar las notificaciones al inicio de cada conversación de chat. 

En la siguiente imagen se muestra un ejemplo del banner de notificación que reciben los clientes cuando no se encuentran en la página web que contiene la ventana de chat. El banner informa a sus clientes de que tienen un nuevo mensaje y muestra el nombre del sitio web. 

![\[Un banner de Google Chrome que indica que se ha recibido un nuevo mensaje.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/chatwidget-notification-banner.png)


Los clientes también reciben un icono de notificación (un punto rojo) en el widget de comunicaciones cuando se minimiza. En la siguiente imagen se muestra una imagen del icono de notificación que reciben los clientes cuando se minimiza su ventana de chat.

![\[Un icono de notificación.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/chatwidget-browser-notification.png)


Ambas características se incluyen automáticamente en el widget de comunicaciones. No necesita realizar ningún paso para ponerlos a disposición de sus clientes.

Tus clientes reciben una allow/deny notificación emergente cuando inician un chat y aún no han permitido las notificaciones de tu sitio web o dominio. Una vez concedidos los permisos de notificación, comenzarán a recibir notificaciones del navegador para cualquier mensaje o archivo adjunto enviado por el agente cuando no se encuentren en la página web con la ventana de chat. Este comportamiento se aplica incluso si ya ha implementado el widget de comunicaciones.

## Cómo efectuar la prueba
<a name="test-browser-notifications-chat"></a>

1. Después de permitir las notificaciones como cliente de prueba y de que el agente se conecte al chat, minimice la ventana del chat y abra una nueva instancia del navegador para que no esté en la página web que contiene la ventana de chat.

1. Envíe un mensaje desde la ventana del agente.

1. Como cliente de prueba, verá el banner de notificación.

1. Elija o toque el banner de notificación. Irá automáticamente a la página web que contiene la ventana de chat.

1. Como antes ha minimizado la ventana de chat, también verá un icono de notificación (un punto rojo) en el widget de comunicaciones.

Si no puede ver la notificación del navegador, compruebe lo siguiente: 
+ Utiliza un [navegador compatible](add-chat-to-website.md#chat-widget-supported-browsers).
+ El permiso de notificación está allowed/enabled en tu navegador para la página web con ventana de chat.
+ El agente (o usted desde la sesión de chat de su agente) ha enviado una nueva message/attachment mientras se encuentra en una página web distinta de la que contiene la ventana de chat. Para que el icono de notificación (un punto rojo) del widget sea visible, minimice la ventana del chat.
+ Las notificaciones del navegador no se posponen (se descartan temporalmente).

# Desconexión mediante programación de la sesión de chat de un widget de comunicación de Amazon Connect
<a name="programmatic-chat-disconnect"></a>

Puedes desconectar la sesión de chat de un widget de comunicación mediante programación usando 'JavaScript llamando al `disconnect` método almacenado en el widget. `iframe` Desde el documento host del widget, puede hacer referencia a la función `disconnect` con el siguiente fragmento de código: 

```
document.getElementById("amazon-connect-chat-widget-iframe").contentWindow.connect.ChatSession.disconnect()
```

Puede añadirlo fácilmente al script del widget existente. A continuación, se muestra un fragmento de código de ejemplo:

```
<script type="text/javascript">
  (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', '...');
  amazon_connect('styles', { iconType: 'CHAT', openChat: { color: '#ffffff', backgroundColor: '#123456' }, closeChat: { color: '#ffffff', backgroundColor: '#123456'} });
  amazon_connect('snippetId', '...');
  amazon_connect('supportedMessagingContentTypes', [ 'text/plain', 'text/markdown', 'application/vnd.amazonaws.connect.message.interactive', 'application/vnd.amazonaws.connect.message.interactive.response' ]);
 
  // Add disconnect event listener
  window.addEventListener("pagehide", () => {
      document.getElementById("amazon-connect-chat-widget-iframe").contentWindow.connect.ChatSession.disconnect();
  });
</script>
```

## Casos de uso e implementación
<a name="implementation-chat-disconnect"></a>

Llamar a disconnect mediante programación puede resultar útil en varios casos. Proporciona más control sobre cuándo terminar la conversación (aparte de haciendo clic manualmente en el botón `End Chat`). A continuación, se indican algunos casos de uso frecuentes de la llamada a `disconnect`.

### Al cerrar o durante la navegación
<a name="close-chat-disconnect"></a>

Un caso de uso común sería adjuntar la funcionalidad disconnect a los eventos que se activan cuando se destruye el contexto del navegador o la pestaña. `pagehide` y `beforeunload` son los eventos más comunes que se activan en esos casos. Se activan cuando un usuario actualiza la página, navega a una URL diferente o cierra la pestaña o el navegador. Aunque ambos eventos se activan cuando se destruye el contexto del navegador, no hay garantía de que la función `disconnect` pueda ejecutarse por completo antes de que se limpien los recursos del navegador.

`pagehide` es un evento de ciclo de vida de página más moderno y es compatible con los principales navegadores y sistemas operativos. `beforeunload` es un evento alternativo que se puede probar si el evento `pagehide` no logra llamar a disconnect de forma fiable. `beforeunload` se activa antes de `pagehide`, lo que puede proporcionar una fiabilidad adicional si la función `disconnect` no se completa antes del cierre del navegador. Ha habido problemas de fiabilidad con `beforeunload`, especialmente, en los dispositivos iOS.

A continuación, se muestra un fragmento de código de ejemplo:

```
// Call disconnect when `beforeunload` triggers
window.addEventListener("beforeunload", (event) => {
    document.getElementById("amazon-connect-chat-widget-iframe").contentWindow.connect.ChatSession.disconnect();
});

// Call disconnect when `pagehide` triggers
window.addEventListener("pagehide", (event) => {
    document.getElementById("amazon-connect-chat-widget-iframe").contentWindow.connect.ChatSession.disconnect();
});
```

### En el momento de cambiar de contexto
<a name="context-chat-disconnect"></a>

Otro caso de uso sería activar una desconexión cuando el usuario cambia de contexto, por ejemplo, cuando un usuario cambia, minimiza tab/app o bloquea su pantalla. El evento `visibilitychange` puede gestionar de forma fiable estos escenarios en los que el contexto ya no está visible.

A continuación, se muestra un fragmento de código de ejemplo:

```
window.addEventListener("visibilitychange", () => {
    if (document.visibilityState === "hidden") {
        document.getElementById("amazon-connect-chat-widget-iframe").contentWindow.connect.ChatSession.disconnect();
    } else if (document.visibilityState === "visible") {
        ...
    }
});
```

# Transferencia de propiedades personalizadas para anular las predeterminadas en el widget de comunicaciones de Amazon Connect
<a name="pass-custom-styles"></a>

Para personalizar aún más su interfaz de usuario de chat, puede anular las propiedades predeterminadas si transfiere sus propios valores. Por ejemplo, puede establecer la anchura del widget a 400 píxeles y la altura a 700 píxeles (a diferencia del tamaño predeterminado de 300 píxeles por 540 píxeles). También puede utilizar los colores y tamaños de fuente que prefiera.

## Cómo transferir estilos personalizados al widget de comunicaciones
<a name="chat-widget-pass-custom-styles"></a>

Para transferir estilos personalizados, usa el siguiente bloque de código de ejemplo e incrustarlo en tu widget. Amazon Connect recupera los estilos personalizados automáticamente. Todos los campos que se muestran en el siguiente ejemplo son opcionales.

```
amazon_connect('customStyles', {
 global: {
     frameWidth: '400px',
     frameHeight: '700px',
     textColor: '#fe3251',
     fontSize: '20px',
     footerHeight: '120px',
     typeface: "'AmazonEmber-Light', serif",
     customTypefaceStylesheetUrl: "https://ds6yc8t7pnx74.cloudfront.net/etc.clientlibs/developer-portal/clientlibs/main/css/resources/fonts/AmazonEmber_Lt.ttf",
     headerHeight: '120px',
 },
 header: {
     headerTextColor: '#541218',
     headerBackgroundColor: '#fe3',
 },
 transcript: {
     messageFontSize: '13px',
     messageTextColor: '#fe3',
     widgetBackgroundColor: '#964950',
     agentMessageTextColor: '#ef18d3',
     systemMessageTextColor: '#ef18d3',
     customerMessageTextColor: '#ef18d3',
     agentChatBubbleColor: '#111112',
     systemChatBubbleColor: '#111112',
     customerChatBubbleColor: '#0e80f2',
 },
 footer: {
     buttonFontSize: '20px',
     buttonTextColor: '#ef18d3',
     buttonBorderColor: '#964950',
     buttonBackgroundColor: '#964950',
     footerBackgroundColor: '#0e80f2',
     startCallButtonTextColor: '#541218',
     startChatButtonBorderColor: '#fe3',
     startCallButtonBackgroundColor: '#fe3',
 },
 logo: {
     logoMaxHeight: '61px',   
     logoMaxWidth: '99%',
 },
  composer: {
     fontSize: '20px', 
 },
  fullscreenMode: true // Enables fullscreen mode on the widget when a mobile screen size is detected in a web browser.
})
```

## Estilos y restricciones admitidos
<a name="chat-widget-supported-styles"></a>

En la siguiente tabla se enumeran los nombres de estilos personalizados admitidos y las restricciones de valor recomendadas. Algunos estilos existen en los niveles global y de componente. Por ejemplo, el estilo `fontSize` existe globalmente y en el componente de transcripción. Los estilos en el nivel de componente tienen mayor prioridad y se tendrán en cuenta en el widget de chat.


|  Nombre de estilo personalizado  |  Description (Descripción)  |  Restricciones recomendadas  | 
| --- | --- | --- | 
|  `global.frameWidth`  |  Ancho de todo el marco del widget  |  Mínimo: 300 píxeles Máximo: ancho de ventana Se recomienda ajustar en función del tamaño de la ventana  | 
|  `global.frameHeight`  |  Altura de todo el marco del widget  |  Mínimo: 480 píxeles Máximo: altura de la ventana Se recomienda ajustar en función del tamaño de la ventana  | 
|  `global.textColor`  |  Color para todos los textos  |  Cualquier valor de color válido para CSS. Para obtener más información, consulte [Valores de color válidos para CSS](https://www.w3schools.com/cssref/css_colors_legal.php).  | 
|  `global.fontSize`  |  Tamaño de fuente para todos los textos  |  Recomendado de 12 píxeles a 20 píxeles para diferentes casos de uso  | 
|  `global.footerHeight`  |  Altura del pie de página del widget  |  Mínimo: 50 píxeles Máximo: altura del marco Se recomienda ajustar en función del tamaño del marco  | 
|  `global.typeface`  |  El tipo de letra utilizado en el widget.  |  Cualquier tipo de letra de esta lista: Arial, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond, Bookman, Tacoma, Trebuchet MS, Arial Black, Impact o Comic Sans MS. También puede añadir un tipo de letra o familia de fuentes personalizados, pero necesita alojar el archivo del tipo de letra con acceso público de lectura. Por ejemplo, puede ver la documentación sobre el uso de la familia de fuentes Amazon Ember en la [biblioteca para desarrolladores de Amazon](https://developer.amazon.com/en-US/alexa/branding/echo-guidelines/identity-guidelines/typography).   | 
|  `global.customTypefaceStylesheetUrl`  |  Ubicación donde se aloja el archivo de tipo de letra personalizado con acceso público de lectura  |  Enlace a la ubicación HTTP pública donde se aloja el archivo del tipo de letra. Por ejemplo, la ubicación de la AmazonEmber CDN de la tipografía Light es `https://ds6yc8t7pnx74.cloudfront.net/etc.clientlibs/developer-portal/clientlibs/main/css/resources/fonts/AmazonEmber_Lt.ttf`  | 
|  `header.headerTextColor`  |  Color del texto del mensaje de encabezado  |  Cualquier valor de color válido para CSS. Para obtener más información, consulte [Valores de color válidos para CSS](https://www.w3schools.com/cssref/css_colors_legal.php).  | 
|  `header.headerBackgroundColor`  |  Color del texto del fondo del encabezado  |  Cualquier valor de color válido para CSS. Para obtener más información, consulte [Valores de color válidos para CSS](https://www.w3schools.com/cssref/css_colors_legal.php).  | 
|  `global.headerHeight`  |  Altura del encabezado del widget  |  Es recomendable ajustarla en función del título, la imagen del logotipo o ambos.  | 
|  `transcript.messageFontSize`  |  Tamaño de fuente para todos los textos  |  Recomendado de 12 píxeles a 20 píxeles para diferentes casos de uso  | 
|  `transcript.messageTextColor`  |  Color del texto de los mensajes de transcripción  |  Cualquier valor de color válido para CSS. Para obtener más información, consulte [Valores de color válidos para CSS](https://www.w3schools.com/cssref/css_colors_legal.php).  | 
|  `transcript.widgetBackgroundColor`  |  Color del texto del fondo de la transcripción  |  Cualquier valor de color válido para CSS. Para obtener más información, consulte [Valores de color válidos para CSS](https://www.w3schools.com/cssref/css_colors_legal.php).  | 
|  `transcript.customerMessageTextColor`  |  Color del texto en los mensajes del cliente  |  Cualquier valor de color válido para CSS. Para obtener más información, consulte [Valores de color válidos para CSS](https://www.w3schools.com/cssref/css_colors_legal.php).  | 
|  `transcript.agentMessageTextColor`  |  Color del texto en los mensaje del agente  |  Cualquier valor de color válido para CSS. Para obtener más información, consulte [Valores de color válidos para CSS](https://www.w3schools.com/cssref/css_colors_legal.php).  | 
|  `transcript.systemMessageTextColor`  |  Color del texto en los mensajes del sistema  |  Cualquier valor de color válido para CSS. Para obtener más información, consulte [Valores de color válidos para CSS](https://www.w3schools.com/cssref/css_colors_legal.php).  | 
|  `transcript.agentChatBubbleColor`  |  Color de fondo en las burbujas de los mensajes del agente  |  Cualquier valor de color válido para CSS. Para obtener más información, consulte [Valores de color válidos para CSS](https://www.w3schools.com/cssref/css_colors_legal.php).  | 
|  `transcript.customerChatBubbleColor`  |  Color de fondo en las burbujas de los mensajes del cliente  |  Cualquier valor de color válido para CSS. Para obtener más información, consulte [Valores de color válidos para CSS](https://www.w3schools.com/cssref/css_colors_legal.php).  | 
|  `transcript.systemChatBubbleColor`  |  Color de fondo en las burbujas de los mensajes del sistema  |  Cualquier valor de color válido para CSS. Para obtener más información, consulte [Valores de color válidos para CSS](https://www.w3schools.com/cssref/css_colors_legal.php).  | 
|  `footer.buttonFontSize`  |  Tamaño de fuente del texto del botón de acción  |  Se recomienda ajustar en función de la altura del pie de página  | 
|  `footer.buttonTextColor`  |  Color del texto del botón de acción  |  Cualquier valor de color válido para CSS. Para obtener más información, consulte [Valores de color válidos para CSS](https://www.w3schools.com/cssref/css_colors_legal.php).  | 
|  `footer.buttonBorderColor`  |  Color del borde del botón de acción  |  Cualquier valor de color válido para CSS. Para obtener más información, consulte [Valores de color válidos para CSS](https://www.w3schools.com/cssref/css_colors_legal.php).  | 
|  `footer.buttonBackgroundColor`  |  Color del fondo del botón de acción  |  Cualquier valor de color válido para CSS. Para obtener más información, consulte [Valores de color válidos para CSS](https://www.w3schools.com/cssref/css_colors_legal.php).  | 
|  `footer.BackgroundColor`  |  Color del fondo del pie de página  |  Cualquier valor de color válido para CSS. Para obtener más información, consulte [Valores de color válidos para CSS](https://www.w3schools.com/cssref/css_colors_legal.php).  | 
|  `footer.startCallButtonTextColor`  |  Color del texto del botón de inicio de llamada  |  Cualquier valor de color válido para CSS. Para obtener más información, consulte [Valores de color válidos para CSS](https://www.w3schools.com/cssref/css_colors_legal.php).  | 
|  `footer.startCallButtonBorderColor`  |  Color del borde del botón de inicio de llamada  |  Cualquier valor de color válido para CSS. Para obtener más información, consulte [Valores de color válidos para CSS](https://www.w3schools.com/cssref/css_colors_legal.php).  | 
|  `footer.startCallButtonBackgroundColor`  |  Color del fondo del botón de inicio de llamada  |  Cualquier valor de color válido para CSS. Para obtener más información, consulte [Valores de color válidos para CSS](https://www.w3schools.com/cssref/css_colors_legal.php).  | 
|  `logo.logoMaxHeight`  |  Altura máxima del logotipo  |  Mínimo: 0 píxeles Máximo: altura del encabezado Se recomienda ajustar en función de la altura de la imagen y del marco  | 
|  `logo.logoMaxWidth`  |  Ancho máximo del logotipo  |  Mínimo: 0 píxeles Máximo: ancho del encabezado Se recomienda ajustar en función de la anchura de la imagen y del marco  | 
|  `composer.fontSize`  |  Tamaño de fuente del texto del compositor  |  Recomendado de 12 píxeles a 20 píxeles para diferentes casos de uso  | 
|  `fullscreenMode`  |  Activa el modo de pantalla completa en el widget cuando se detecta el tamaño de la pantalla de un móvil en un navegador web.  |  Tipo: booleano  | 

A continuación, se indican los elementos que componen el widget de comunicaciones.

![\[Elementos que componen el widget de comunicaciones.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/chatwidget-elements.png)


## Cómo anular los logotipos y los nombres de visualización del sistema y del bot para el widget de comunicaciones
<a name="pass-override-system"></a>

Para anular las configuraciones de nombre y logotipo para System/Bot mostrar establecidas en el sitio web de Amazon Connect administración, inserta el siguiente bloque de código en el fragmento de código del widget. Todos los campos que se muestran en el siguiente ejemplo son opcionales.

```
amazon_connect('customDisplayNames', {
 header: {
     headerMessage: "Welcome!",
     logoUrl: "https://example.com/abc.png",
     logoAltText: "Amazon Logo Banner"
 },
 transcript: {
     systemMessageDisplayName: "Amazon System",
     botMessageDisplayName: "Alexa"
 },
 footer: {
     textInputPlaceholder: "Type Here!",     
      endChatButtonText: "End Session",      
      closeChatButtonText: "Close Chat",      
      startCallButtonText: "Start Call"
 },
})
```

### Propiedades y restricciones admitidas
<a name="supported-properties-displaynames"></a>


| Nombre de estilo personalizado | Description (Descripción) | Restricciones recomendadas | 
| --- | --- | --- | 
|  `header.headerMessage`  | Color del texto del mensaje de encabezado | Longitud mínima: 1 carácter Longitud máxima: 11 caracteres  Se recomienda ajustar en función de la anchura del encabezado | 
|  `header.logoUrl`  | URL que apunta a la imagen del logotipo |  Longitud máxima: 2048 caracteres Debe ser una URL válida que apunte a un archivo .png, .jpg o .svg. | 
|  `header.logoAltText`  | Texto para anular el atributo alt del banner del logotipo |  Longitud máxima: 2048 caracteres | 
|  `transcript.systemMessageDisplayName`  | Texto para anular el nombre de visualización de SYSTEM\$1MESSAGE | Longitud mínima: 1 carácter Longitud máxima: 26 caracteres  | 
|  `transcript.botMessageDisplayName`  | Texto para anular el nombre de visualización de BOT | Longitud mínima: 1 carácter Longitud máxima: 26 caracteres  | 
|  `footer.textInputPlaceholder`  | Texto para anular el marcador de posición en la entrada de texto | Longitud mínima: 1 carácter Longitud máxima: 256 caracteres  | 
|  `footer.endChatButtonText`  | Texto para anular el texto del botón de finalización del chat | Longitud mínima: 1 carácter Longitud máxima: 256 caracteres Se recomienda ajustar en función de la anchura del botón  | 
|  `footer.closeChatButtonText`  | Texto para anular el texto del botón de cierre del chat | Longitud mínima: 1 carácter Longitud máxima: 256 caracteres Se recomienda ajustar en función de la anchura del botón  | 
|  `footer.startCallButtonText`  | Texto para anular el texto del botón de inicio de llamada | Longitud mínima: 1 carácter Longitud máxima: 256 caracteres Se recomienda ajustar en función de la anchura del botón  | 

## Versión preliminar del widget de comunicaciones con propiedades personalizadas
<a name="chat-widget-preview"></a>

Asegúrese de obtener una vista previa de su widget de comunicaciones con las propiedades personalizadas antes de ponerlo en producción. Los valores personalizados pueden alterar la interfaz de usuario del widget de comunicaciones si no se establecen correctamente. Le recomendamos que lo pruebe en diferentes navegadores y dispositivos antes de ponerlo a disposición de sus clientes.

A continuación, encontrará algunos ejemplos de elementos que pueden alterarse cuando se utilizan valores inadecuados y las soluciones sugeridas.
+ **Problema:** la ventana del widget ocupa demasiado espacio en la pantalla.

  **Solución:** utilice valores más pequeños para `frameWidth` y `frameHeight`.
+ **Problema:** el tamaño de la fuente es demasiado pequeño o demasiado grande.

  **Solución:** ajuste el tamaño de la fuente.
+ **Problema:** hay un área en blanco debajo del final del chat (pie de página).

  **Solución:** utilice un valor de `frameHeight` más pequeño o un valor de `footerHeight` más grande.
+ **Problema:** el botón de finalización del chat es demasiado pequeño o demasiado grande.

  **Solución:** ajuste `buttonFontSize`.
+ **Problema:** el botón de finalización del chat se sale del área del pie de página.

  **Solución:** utilice un valor de `footerHeight` más grande o un valor de `buttonFontSize` más pequeño.

# Orienta el botón y el marco del widget de Amazon Connect con CSS/ JavaScript
<a name="target-widget-button"></a>

El widget de comunicación muestra el botón del open/close widget y el marco del widget directamente en el sitio web anfitrión. Hay selectores específicos que puedes usar para segmentar estos elementos mediante CSS o hacer referencia a ellos. JavaScript 

**sugerencia**  
Para actualizar los colores del botón del widget o los estilos del propio widget, use el [sitio web de administración de Amazon Connect](add-chat-to-website.md#customize-chat-widget). Para obtener estilos más personalizables, puede [pasar estilos personalizados](pass-custom-styles.md) directamente al widget de comunicaciones.

## Elementos IDs y ejemplos del widget
<a name="widget-elementid"></a>

Las siguientes imágenes muestran cómo aparece el botón del widget de chat en la pantalla del usuario. La primera imagen muestra el botón Abrir para abrir el widget de chat. La segunda imagen muestra el botón Cerrar para cerrar el widget de chat.

![\[Side-by-side imágenes del widget de chat para abrir y cerrar la ventana de chat.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/widget-elements.png)


1.  Botón para abrir el widget: `#amazon-connect-open-widget-button` 

1. Botón para cerrar el widget: `#amazon-connect-close-widget-button`

1. Marco del widget: `#amazon-connect-widget-frame`

   1. Marco del widget mientras está abierto: `#amazon-connect-widget-frame.show`

   1. Marco del widget mientras está cerrado: `#amazon-connect-widget-frame:not(.show)`

A continuación, se muestra un ejemplo de una hoja de estilos CSS que modifica estos elementos:

```
/* Target widget button while widget is minimized */
#amazon-connect-open-widget-button {
  ...
}

/* Target widget button while widget is showing */
#amazon-connect-close-widget-button {
  ...
}

/* Target widget frame */
#amazon-connect-widget-frame {
  ...
}

/* Target widget frame while it is showing */
#amazon-connect-widget-frame.show {
  ...
}

/* Target widget frame while it is minimized */
#amazon-connect-widget-frame:not(.show) {
  ...
}
```

A continuación se muestra un ejemplo de cómo hacer referencia a estos elementos mediante JavaScript:

```
const openWidgetButton = document.getElementById("amazon-connect-open-widget-button");
const closeWidgetButton = document.getElementById("amazon-connect-close-widget-button");

const widgetFrame = document.querySelector("#amazon-connect-widget-frame");
const openWidgetFrame = document.querySelector("#amazon-connect-widget-frame.show");
const hiddenWidgetFrame = document.querySelector("#amazon-connect-widget-frame:not(.show)");
```

# Resolución de problemas en el widget de comunicaciones de Amazon Connect
<a name="ts-cw"></a>

Este tema está dirigido a los desarrolladores que necesitan investigar los problemas que pueden surgir al configurar un widget de comunicaciones en el sitio web de Amazon Connect administración. 

**Topics**
+ [Algo ha salido mal.](#sww)
+ [Clientes que no reciben los mensajes de los agentes: están conectados a la red o están desconectados WebSocket](#mam)
+ [Omisión de CORS al abrir enlaces externos](#bcwotpl)

## Algo ha salido mal.
<a name="sww"></a>

Si ve el mensaje **Se ha producido un error** al cargar el widget de comunicaciones, abra las herramientas del navegador para ver los registros de errores. 

![\[Un mensaje de error que indica que ha habido un problema.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/chatwidget-error-message.png)


A continuación, se indican los problemas comunes que pueden provocar este error.

### 400 solicitud no válida
<a name="400-invalid-request"></a>

Si en los registros se menciona 400 solicitud no válida, hay algunas causas posibles:
+ Su widget de comunicaciones no se está utilizando en un dominio permitido. Debe indicar específicamente los dominios en los que alojará su widget.
+ La solicitud al punto de conexión no tiene el formato adecuado. Esto suele ocurrir solo si se ha modificado el contenido del fragmento insertado.

### 401 sin autorización
<a name="401-unauthorized"></a>

![\[El mensaje Se ha producido un error.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/something-went-wrong.png)


Si en los registros se menciona 401 sin autorización, se trata de un problema con la autenticación del token web JSON (JWT). Muestra la página de error anterior.

Una vez que tenga el JWT, deberá implementarlo en la función de devolución de llamada `authenticate`. En el siguiente ejemplo se muestra cómo implementarlo si lo que pretende es obtener su token y, después, utilizarlo: 

```
amazon_connect('authenticate', function(callback) {
  window.fetch('/token').then(res => {
    res.json().then(data => {
      callback(data.data);
    });
  });
});
```

A continuación, presentamos una versión más básica de lo que hay que implementar:

```
amazon_connect('authenticate', function(callback) {
   callback(token);
});
```

Para obtener instrucciones sobre cómo implementar JWT, consulte [Paso 3: confirmar y copiar el código del widget de comunicaciones y las claves de seguridad](add-chat-to-website.md#confirm-and-copy-chat-widget-script).

Si ya ha implementado la devolución de llamada, los siguientes escenarios pueden seguir provocando un error 401:
+ Firma no válida
+ Token vencido

### 404 no encontrado
<a name="404-not-found"></a>

Por lo general, el código de estado 404 aparece cuando el recurso solicitado no existe:
+ Se especificó un widgetId no válido en la solicitud de API
+ El widgetId es válido, pero el flujo asociado se ha eliminado o archivado
+ El widget no se ha publicado o se ha eliminado

Comprueba que el fragmento es exactamente como se copió del sitio web de Amazon Connect administración y que ninguno de los identificadores ha cambiado.

Si los identificadores no han cambiado y ve un 404, contacte con AWS Support. 

### 500 error de servidor interno
<a name="500-internalservererror-chatwidget"></a>

Esto puede deberse a que su rol vinculado al servicio no tiene los permisos necesarios para iniciar el chat. Esto ocurre si su instancia de Amazon Connect se creó antes de octubre de 2018 porque no tiene configurados los roles vinculados al servicio.

**Solución**: agregue la política `connect:*` al rol asociado a su instancia de Amazon Connect. Para obtener más información, consulte [Uso de permisos de roles y roles vinculados al servicio para Amazon Connect](connect-slr.md).

Si su rol vinculado al servicio tiene los permisos correctos, contacte con AWS Support.

## Clientes que no reciben los mensajes de los agentes: están conectados a la red o están desconectados WebSocket
<a name="mam"></a>

Durante una sesión de chat, un cliente que utiliza una aplicación de chat pierde la network/WebSocket conexión. Recupera la conexión rápidamente, pero los mensajes enviados por el agente durante ese tiempo no se muestran en la interfaz de chat del cliente. 

La siguiente imagen muestra un ejemplo de la interfaz de chat del cliente y del panel de control de contactos del agente side-by-side. Un mensaje enviado por el agente no se muestra en la sesión de chat del cliente. Sin embargo, al agente le aparece como que el cliente lo ha recibido.

![\[Un mensaje del CCP que no se ha enviado al contacto.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/tw-cw-001-message-not-sent.png)


Si la aplicación de chat del cliente pierde la network/WebSocket conexión, la interfaz de usuario del chat debe hacer lo siguiente para recuperar los mensajes futuros, así como los mensajes que se le enviaron mientras estaba desconectado: 
+ Restablece la WebSocket conexión para volver a recibir mensajes entrantes en el futuro.
+ Realice una solicitud en [chatSession.getTranscript](https://github.com/amazon-connect/amazon-connect-chatjs?tab=readme-ov-file#chatsessiongettranscript) (API [getTranscripts](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_GetTranscript.html)) para recuperar todos los mensajes que faltan que se enviaron mientras el cliente estaba desconectado.

Si el agente envía un mensaje mientras la interfaz de usuario del chat del cliente está desconectada, el mensaje se almacena correctamente en el back-end de Amazon Connect: el CCP funciona como se esperaba y todos los mensajes se graban en la transcripción, pero el dispositivo del cliente no puede recibir mensajes. Cuando el cliente se vuelve a conectar al WebSocket, hay un espacio en los mensajes. Los mensajes entrantes futuros volverán a aparecer desde el WebSocket, pero los mensajes de vacío seguirán faltando a menos que el código haga una llamada explícita a la [GetTranscript](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_GetTranscript.html)API.

### Solución
<a name="solution-network-disconnected"></a>

Usa la [ChatSession. onConnectionEstablished](https://github.com/amazon-connect/amazon-connect-chatjs?tab=readme-ov-file#chatsessiononconnectionestablished)controlador de eventos para llamar a la [GetTranscript](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_GetTranscript.html)API. El controlador de `chatSession.onConnectionEstablished` eventos se activa cuando se vuelven a conectar. WebSocket ChatJS tiene una lógica integrada de latidos y reintentos para la conexión. WebSocket Sin embargo, dado que ChatJS no almacena la transcripción, debe añadir un código personalizado a la interfaz de usuario del chat para volver a buscar la transcripción manualmente.

En el siguiente ejemplo de código, se muestra cómo implementar `onConnectionEstablished` para llamar a `GetTranscript`.

```
import "amazon-connect-chatjs";

const chatSession = connect.ChatSession.create({
  chatDetails: {
    ContactId: "the ID of the contact",
    ParticipantId: "the ID of the chat participant",
    ParticipantToken: "the participant token",
  },
  type: "CUSTOMER",
  options: { region: "us-west-2" },
});

// Triggered when the websocket reconnects
chatSession.onConnectionEstablished(() => {
  chatSession.getTranscript({
    scanDirection: "BACKWARD",
    sortOrder: "ASCENDING",
    maxResults: 15,
    // nextToken?: nextToken - OPTIONAL, for pagination
  })
    .then((response) => {
      const { initialContactId, nextToken, transcript } = response.data;
      // ...
    })
    .catch(() => {})
});
```

```
function loadLatestTranscript(args) {
    // Documentation: https://github.com/amazon-connect/amazon-connect-chatjs?tab=readme-ov-file#chatsessiongettranscript
    return chatSession.getTranscript({
        scanDirection: "BACKWARD",
        sortOrder: "ASCENDING",
        maxResults: 15,
        // nextToken?: nextToken - OPTIONAL, for pagination
      })
      .then((response) => {
        const { initialContactId, nextToken, transcript } = response.data;
        
        const exampleMessageObj = transcript[0];
        const {
          DisplayName,
          ParticipantId,
          ParticipantRole, // CUSTOMER, AGENT, SUPERVISOR, SYSTEM
          Content,
          ContentType,
          Id,
          Type,
          AbsoluteTime, // sentTime = new Date(item.AbsoluteTime).getTime() / 1000
          MessageMetadata, // { Receipts: [{ RecipientParticipantId: "asdf" }] }
          Attachments,
          RelatedContactid,
        } = exampleMessageObj;

        return transcript // TODO - store the new transcript somewhere
      })
      .catch((err) => {
        console.log("CustomerUI", "ChatSession", "transcript fetch error: ", err);
      });
}
```

Para ver otro ejemplo, consulte esta [implementación de código abierto](https://github.com/amazon-connect/amazon-connect-chat-interface/blob/c88f854073fe6dd45546585c3bfa363d3659d73f/src/components/Chat/ChatSession.js#L408) en. GitHub 

## Omisión de CORS al abrir enlaces externos
<a name="bcwotpl"></a>

Para mejorar la seguridad, el widget de comunicaciones funciona en un entorno de pruebas. Como resultado, los enlaces externos compartidos en el widget no se pueden abrir.

**Solución**

Existen dos opciones para omitir el CORS y permitir la apertura de enlaces externos.
+ **(Recomendado)**

  Actualice el atributo de entorno de pruebas para permitir la apertura de enlaces en una nueva pestaña; esto se puede hacer añadiendo el siguiente atributo al fragmento de código:

  ```
  amazon_connect('updateSandboxAttributes', 'allow-scripts allow-same-origin allow-popups allow-downloads allow-top-navigation-by-user-activation allow-popups-to-escape-sandbox')
  ```
**nota**  
El valor del atributo se puede actualizar según sea necesario para permitir acciones específicas. Este es un ejemplo de cómo permitir la apertura de enlaces en una pestaña nueva.
+ Elimine el atributo de entorno de pruebas; esto se puede hacer añadiendo el siguiente atributo al fragmento de código:

  ```
  amazon_connect('removeSandboxAttribute', true)
  ```

# Cómo añadir un formulario previo al contacto o al chat
<a name="add-precontact-form"></a>

Puede recopilar la información del cliente antes de iniciar un contacto:
+ **Formulario previo al contacto**: añádalo para obtener más información del cliente antes de iniciar una tarea o enviar un correo electrónico a un contacto.
+ **Formulario previo al chat**: añádalo para obtener más información del cliente antes de iniciar un contacto por chat.

Tras obtener la información, puede mostrársela al agente a través del panel de control de contacto (CCP) o utilizarla en cualquier otra parte del flujo.

Para crear el formulario, debe crear una vista personalizada y utilizar el componente del botón de acción de conexión. Para obtener más información acerca de las visualizaciones, consulte [Utilice el generador de interfaz de usuario de Amazon Connect para obtener recursos en step-by-step las guías](no-code-ui-builder.md).

El botón de acción de conexión te permite recibir las entradas del usuario desde el formulario y seleccionar qué acción quieres realizar cuando se envíe el formulario: iniciar una sesión task/email o chatear.

# Habilita la encuesta posterior al chat
<a name="enable-post-chat-survey"></a>

La encuesta posterior al chat te permite recopilar los comentarios de los clientes finales inmediatamente después de que finalice una conversación de chat. Con el **`DisconnectOnCustomerExit`**parámetro de la [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)API, puede configurar la desconexión automática de los agentes cuando el cliente final se desconecte, lo que garantiza que el flujo de desconexiones se active de forma coherente, independientemente del participante que se desconecte primero.

## Opciones de implementación
<a name="post-chat-survey-implementation"></a>

Hay dos formas de activar la encuesta posterior al chat:

### Para un widget de chat personalizado
<a name="post-chat-survey-custom-builder"></a>

Si utilizas una implementación de chat personalizada:

1. Actualiza a la versión más reciente de [amazon-connect-chatjs](https://github.com/amazon-connect/amazon-connect-chatjs).

1. Añada el `DisconnectOnCustomerExit` parámetro a su solicitud [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)de API:

   ```
   {
       "DisconnectOnCustomerExit": ["AGENT"],
       // ... other StartChatContact parameters
   }
   ```

### Para el widget de comunicación de Amazon Connect
<a name="post-chat-survey-communication-widget"></a>

Si utilizas el widget de comunicación de Amazon Connect:

1. Abra la consola Amazon Connect y vaya a los **widgets de comunicación**.

1. Activa la configuración de la encuesta posterior al chat a través de la página de widgets de comunicación.  
![\[La página de configuración del widget de comunicación muestra la opción de encuesta posterior al chat.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/post-chat-survey-communication-widget.png)

## Actualiza el flujo de contactos para añadir la encuesta posterior al chat como un flujo de desconexión
<a name="post-chat-survey-disconnect-flow"></a>

Para habilitar la encuesta posterior al chat, tendrás que actualizar el flujo de desconexión conectado a tu solución de chat. Una vez configurada, la encuesta se activará automáticamente cuando los clientes finalicen sus sesiones de chat.

Para obtener información sobre cómo crear un flujo de desconexión, consulte[Escenario de chat de ejemplo](web-and-mobile-chat.md#example-chat-scenario).

Hay dos formas de implementar una encuesta en el flujo de desconexión:
+ **Opción \$11: Usar un ShowView bloque**: utilícelo [Bloque de flujo en Amazon Connect: Mostrar vista](show-view-block.md) para mostrar una interfaz de encuesta personalizada.
+ **Opción \$12: Uso de Lex**: integración con Amazon Lex para recopilar encuestas basadas en texto. Para obtener más información, consulte [Agregar un bot de Amazon Lex a Amazon Connect](amazon-lex.md).

**nota**  
**En los casos de irrupción de un supervisor, asegúrese de añadir un [Bloque de flujo en Amazon Connect: Establecer cola de trabajo](set-working-queue.md) bloque antes de transferirlo a la cola.** Omitirlo provocará que los contactos del chat finalicen en lugar de transferirse a esta función.  

![\[Un diagrama de flujo que muestra el bloque Establecer cola de trabajo antes de transferirlo a la cola para situaciones de irrupción del supervisor.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/post-chat-survey-set-working-queue-block.png)


**Póngase en contacto con Trace Records**  
Cuando un cliente finaliza una sesión de chat, Amazon Connect `disconnectReason` se establece `CUSTOMER_DISCONNECT` en[ContactTraceRecord](ctr-data-model.md#ctr-ContactTraceRecord). Cuando `DisconnectOnCustomerExit` está configurado, el sistema genera un nuevo identificador de contacto (`nextContactId`) e inicia el flujo de desconexión configurado.  
Ejemplo:  

```
{
    "contactId": "104c05e3-abscdfre",
    "nextContactId": "4cbae06d-ca5b-1234567",
    "channel": "CHAT",
    "initiationMethod": "DISCONNECT",
    "disconnectReason": "CUSTOMER_DISCONNECT"
}
```
[Funcionamiento de los atributos de contacto en Amazon Connect](what-is-a-contact-attribute.md)se actualizará en la búsqueda de contactos y en los detalles de los contactos.  

![\[Datos de contacto que muestran los atributos de contacto de una encuesta posterior al chat.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/post-chat-survey-contact-attributes.png)


## Recursos adicionales
<a name="post-chat-survey-additional-resources"></a>
+ [StartChatContact API](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)
+ [Ejemplo de flujo entrante en Amazon Connect para la experiencia del primer contacto](sample-inbound-flow.md)
+ [Escenario de chat de ejemplo](web-and-mobile-chat.md#example-chat-scenario)
+ [Bloque de flujo en Amazon Connect: Establecer cola de trabajo](set-working-queue.md)
+ [Bloque de flujo en Amazon Connect: Transferir a la cola](transfer-to-queue.md)
+ [Amazon Connect ShowView](https://docs.aws.amazon.com/connect/latest/adminguide/show-view-block.html)
+ [Amazon Connect con Lex](https://docs.aws.amazon.com/connect/latest/adminguide/amazon-lex.html)
+ [Funcionamiento de los atributos de contacto en Amazon Connect](what-is-a-contact-attribute.md)

# Integre el Amazon Connect chat en una aplicación móvil
<a name="integrate-chat-with-mobile"></a>

En este tema, se explica cómo integrar Amazon Connect Chat en su aplicación móvil. Puede utilizar una de las siguientes opciones: 
+ [WebView integration](#webview)
+ The [Amazon Connect Chat SDKs para iOS y Android](#integrate-chat-with-mobile-sdks-for-mobile)
+ [Integración de React Native](#react-native-integration)

Usa la Amazon Connect [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)API para iniciar el contacto. 

**Topics**
+ [Qué opción de integración emplear](#integrate-options)
+ [Amazon Connect flujo de trabajo de integración de chat](#integrate-chat-with-mobile-workflow)
+ [Comience con la integración del Amazon Connect chat](#integrate-chat-with-mobile-getting-started)

## Qué opción de integración emplear
<a name="integrate-options"></a>

En esta sección, se proporciona una descripción de cada opción de integración para ayudarle a decidir cuál usar para su solución. 

### WebView integración
<a name="webview"></a>

La WebView integración de Amazon Connect Chat le permite integrar la experiencia de chat completa en sus aplicaciones móviles con un mínimo esfuerzo de desarrollo. Este método utiliza `WebView` en Android y `WKWebView` en iOS para proporcionar una interfaz de chat completa y perfecta. Es ideal para los equipos que buscan una out-of-the-box solución rápida para integrar la funcionalidad del chat sin necesidad de realizar amplias personalizaciones.

Este enfoque garantiza una comunicación segura y aprovecha la interfaz de chat basada en web de Amazon Connect. Sin embargo, tendrás que configurar tu aplicación para que gestione las cookies de JavaScript forma adecuada.

Para obtener más información sobre la implementación de WebView la integración, consulte el GitHub repositorio de [ejemplos de la interfaz](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/mobileChatExamples) de usuario de chat de Amazon Connect.

**Recomendación: la** integración WebView basada en bases es ideal para un desarrollo rápido y un mantenimiento mínimo, a la vez que garantiza una funcionalidad de chat integral.

### Amazon Connect Chat SDKs para dispositivos móviles
<a name="integrate-chat-with-mobile-sdks-for-mobile"></a>

El Amazon Connect chat SDKs para iOS y Android simplifica la integración del Amazon Connect chat para aplicaciones móviles nativas. SDKs Ayudan a gestionar la lógica de chat del lado del cliente y las comunicaciones de back-end de forma similar a la biblioteca ChatJS de Amazon Connect.

El Amazon Connect chat SDKs envuelve el servicio de participación de Amazon Connect APIs y abstrae la gestión de la sesión de chat y WebSocket. Esto le permite centrarse en la interfaz y la experiencia de usuario y, al mismo tiempo, confiar en el SDK de Amazon Connect Chat para interactuar con todos los servicios de back-end. Este enfoque sigue requiriendo que utilices tu propio servidor de chat para llamar a la Amazon Connect `StartChatContact` API e iniciar el contacto.
+ Para obtener más información sobre el SDK para iOS basado en SWIFT, consulte la página [Amazon Connect Chat SDK for iOS](https://github.com/amazon-connect/amazon-connect-chat-ios) GitHub .
+ Para obtener más información sobre el SDK de Android basado en Kotlin, consulta la página [Amazon Connect Chat SDK for Android](https://github.com/amazon-connect/amazon-connect-chat-android) GitHub .

**Ventajas: Los** Native ofrecen SDKs una funcionalidad sólida y un alto rendimiento, lo que los hace ideales para aplicaciones que requieren una personalización profunda y una experiencia de usuario fluida.

### Integración de React Native
<a name="react-native-integration"></a>

La integración de Amazon Connect Chat React Native ofrece una solución multiplataforma. Permite a los equipos crear funciones de chat para Android e iOS con una base de código compartida. Este método equilibra la personalización y la eficiencia del desarrollo y, al mismo tiempo, aprovecha las capacidades de React Native para crear aplicaciones móviles sólidas.

Esta integración utiliza puentes nativos para acceder a características avanzadas, y garantiza un rendimiento y una experiencia de usuario uniformes en todas las plataformas. Es más fácil implementar funciones clave, como la WebSocket comunicación, mediante bibliotecas como `react-native-websocket` las llamadas a la API`axios`.

**Ideal para**: equipos que desean maximizar la reutilización del código y, al mismo tiempo, mantener la flexibilidad funcional.

## Amazon Connect flujo de trabajo de integración de chat
<a name="integrate-chat-with-mobile-workflow"></a>

El siguiente diagrama muestra el flujo de programación entre un cliente que usa una aplicación móvil y un agente. El texto con números en el diagrama se corresponde con el texto con números debajo de la imagen.

![\[Diagrama que muestra el flujo del programa de Amazon Connect chat.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/integrate-chat-mobile-diagram.png)


**En el diagrama**

1. Cuando un cliente inicia un chat en la aplicación móvil, la aplicación debe enviar una solicitud a Amazon Connect través de la [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)API. Esto requiere parámetros específicos, como el punto final de la API y IDs el flujo de [instancias](amazon-connect-instances.md) y [contactos](connect-contact-flows.md), para autenticar e iniciar el chat.

1. La API `StartChatContact` interactúa con el sistema de back-end para obtener un token de participante y un ID de contacto que actúan como identificadores únicos de la sesión de chat.

1. La interfaz de usuario de la aplicación transmite la respuesta `StartChatContact` al SDK para móviles para que el SDK se comunique correctamente con el [servicio para participantes de Amazon Connect](https://docs.aws.amazon.com/connect/latest/APIReference/API_Operations_Amazon_Connect_Participant_Service.html) y configure la sesión de chat del cliente.

1. El SDK mostrará un objeto [chatSession](https://github.com/amazon-connect/amazon-connect-chat-ios?tab=readme-ov-file#chatsession-apis) en la interfaz de usuario, que contendrá métodos fáciles de usar para interactuar con la sesión de chat.

1. Por dentro, el SDK interactúa con el [servicio para participantes de Amazon Connect](https://docs.aws.amazon.com/connect/latest/APIReference/API_Operations_Amazon_Connect_Participant_Service.html) mediante el [SDK de AWS](https://aws.amazon.com/developer/tools/). La comunicación con el Servicio para participantes de Amazon Connect es responsable de todas las interacciones de los clientes con la sesión de chat. Esto incluye acciones como `CreateParticipantConnection`, `SendMessage`, `GetTranscript` o `DisconnectParticipant`.

1. El SDK también administra la WebSocket conexión necesaria para recibir mensajes, eventos y archivos adjuntos del agente. El SDK gestionará y analizará todo esto y aparecerá en la interfaz de usuario en una estructura fácil de usar.

## Comience con la integración del Amazon Connect chat
<a name="integrate-chat-with-mobile-getting-started"></a>

Los siguientes pasos y recursos te ayudarán a empezar a integrar Amazon Connect Chat en tus aplicaciones móviles nativas:

1. Puedes configurar rápidamente una [CloudFormation](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/Welcome.html)pila que proporcione el back-end necesario para realizar llamadas StartChatContact consultando nuestro ejemplo de [startChatContactAPI](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/cloudformationTemplates/startChatContactAPI) en. GitHub

1. Para ver ejemplos que muestran cómo crear una interfaz de chat móvil con la tecnología de Amazon Connect Chat SDKs, consulta nuestro GitHub proyecto de [ejemplos de interfaz](https://github.com/amazon-connect/amazon-connect-chat-ui-examples) de usuario.

   Consulta nuestros ejemplos de chat para [iOS](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/mobileChatExamples/iOSChatExample) y [Android](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/mobileChatExamples/androidChatExample) que muestran cómo potenciar una aplicación de chat con el SDK de Amazon Connect chat para iOS/Android.

1. Consulta las GitHub páginas [Amazon Connect Chat SDK para iOS](https://github.com/amazon-connect/amazon-connect-chat-ios) y [Amazon Connect Chat SDK para Android](https://github.com/amazon-connect/amazon-connect-chat-android). La GitHub página contiene la documentación de la API y una guía de implementación en la que se explican los requisitos previos y los pasos de instalación.

1. Configure la integración de React Native: aproveche el ejemplo de [React Native](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/mobileChatExamples/connectReactNativeChat) para obtener orientación sobre cómo implementar una solución basada en React Native.

1. Si tiene alguna pregunta o problema con respecto a la configuración o el uso del SDK de chat de Amazon Connect en sus aplicaciones móviles, puede registrar una incidencia en la página de [incidencias del SDK de Chat para iOS de Amazon Connect](https://github.com/amazon-connect/amazon-connect-chat-ios/issues) o en la página de [incidencias del Chat SDK para Android de Amazon Connect](https://github.com/amazon-connect/amazon-connect-chat-android/issues). Si hay algún problema con los ejemplos de la interfaz de usuario del chat móvil, puede comunicarlo en la página de [ejemplos de incidencias con la interfaz de usuario del chat de Amazon Connect](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/issues).

# Habilitación del formato de texto en Amazon Connect para la experiencia de chat del cliente
<a name="enable-text-formatting-chat"></a>

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
<a name="supported-format-types"></a>

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
<a name="how-to-enable-message-formatting"></a>

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
<a name="add-email-phone-links"></a>

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
<a name="add-bot-messages"></a>

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.

# Habilitación de las notificaciones para los clientes de chat en Amazon Connect
<a name="message-receipts"></a>

Puede habilitar los mensajes *entregados* y *leídos* en la [interfaz de usuario del chat](add-chat-to-website.md) para que sus clientes conozcan el estado de los mensajes que envían. Esto proporciona transparencia a los clientes y mejora la experiencia general del chat. 

Independientemente de si la recepción de mensajes está habilitada, los datos y eventos de la recepción de mensajes siempre se envían y se pueden ver en el registro de la red. La activación y desactivación de las confirmaciones de mensajes en la interfaz de usuario del chat solo afecta a la posibilidad de que las confirmaciones aparezcan en la transcripción del widget de comunicación.

**sugerencia**  
De forma predeterminada, los recibos de mensajes ya están habilitados en la experiencia [Probar chat](chat-testing.md#test-chat), el Panel de control de contacto (CCP) y el [ejemplo descargable de código abierto](download-chat-example.md) del widget de chat.

**Para habilitar la recepción de mensajes en la interfaz de usuario de chat**

1. Inicie sesión en el sitio web de administración de Amazon Connect en https://*nombre de instancia*.my.connect.aws/. Seleccione **Personalizar el widget de comunicaciones**.  
![\[Página de la guía de configuración con la opción de personalizar el widget de comunicaciones.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/chatwidget-customize-chat-window-button.png)

1. Elija **Editar**.  
![\[Página de personalización del widget de comunicaciones guardada con el botón Editar.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/chatwidget-edit-messagereceipt.png)

1. De forma predeterminada, la opción **Recibos de mensajes** no está habilitada. Establézcala a **Habilitado**.  
![\[La opción de recibos de mensajes está habilitada.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/chatwidget-enable-messagereceipt.png)

Los recibos de mensajes están ahora habilitados. Los clientes que utilicen el widget de comunicaciones empezarán a ver inmediatamente los recibos *Entregado* y *Leído*. 

# Configuración de los tiempos de espera para los participantes en el chat
<a name="setup-chat-timeouts"></a>

Cuando una conversación de chat entre un agente y un cliente ha permanecido inactiva (no se ha enviado ningún mensaje) durante cierto tiempo, puede considerar que un participante del chat está inactivo e incluso puede querer desconectar automáticamente a un agente del chat.

Para ello, puede configurar los tiempos de espera de inactividad y los tiempos de espera de cierre automático mediante la acción. [UpdateParticipantRoleConfig](https://docs.aws.amazon.com/connect/latest/APIReference/API_UpdateParticipantRoleConfig.html)

**sugerencia**  
Este tema, hablamos sobre la configuración de los tiempos de espera de chats en las conversaciones entre clientes y agentes. Si busca información sobre cómo configurar los tiempos de espera de un chat para clientes que estén interactuando con Lex, consulte la sección [Tiempos de espera configurables para la entrada de chat durante una interacción de Lex](get-customer-input.md#get-customer-input-configurable-timeouts-chat) del bloque [Bloque de flujo Amazon Connect: Obtener la entrada del cliente](get-customer-input.md). 

**Puede establecer cuatro tipos diferentes de temporizadores.**
+ Especifique el tiempo que debe transcurrir antes de que se lleve a cabo una acción.
+ Se puede utilizar cualquier combinación de temporizadores.     
[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/setup-chat-timeouts.html)

**Especifique todos los temporizadores en minutos.**
+ Mínimo: 2 minutos
+ Máximo: 480 minutos (8 horas)

**Los temporizadores se aplican a los roles de los participantes y son válidos durante toda la vida del chat.**
+ Los temporizadores se configuran para los roles de los participantes, como agente y cliente, y no para los participantes individuales.
+  Una vez establecidos los temporizadores, se aplicarán durante toda la vida del chat. Si se transfiere un chat, los temporizadores se aplican a la nueva interacción. agent/customer 

## Cómo funcionan los temporizadores de chat
<a name="how-chat-timer-work"></a>

Los temporizadores se comportan de la siguiente manera:
+ Los temporizadores se activan cuando un agente y un cliente están conectados al chat, o cuando un cliente y un participante personalizado (como un bot personalizado) están conectados. 
+ Los temporizadores se inician primero cuando un agent/custom participante se une al chat y se detienen cuando el agent/custom participante abandona el chat.
+ Los temporizadores de inactividad se ejecutan antes que los de desconexión automática, si ambos están configurados para un rol. Por ejemplo, si se configuran ambos temporizadores, el de desconexión automática solo se iniciará cuando un participante se considere inactivo.
+ Si solo se configura un tipo de temporizador para un rol, ese temporizador se inicia inmediatamente.
+ Si en algún momento un participante envía un mensaje, los temporizadores de ese participante se reinician. Si se consideraban inactivos, ya no se considerarán así.
+ Cuando se añade un archivo adjunto a un mensaje, se restablece el temporizador del chat.
+  La configuración que se estableció cuando el agent/custom participante se unió se aplica mientras el agent/custom participante permanezca en el chat. Si actualizas la configuración del temporizador cuando un agent/custom participante y un cliente ya están conectados entre sí, la nueva configuración se guarda pero no se aplica hasta que un nuevo agent/custom participante se conecte al chat.
+ Cuando se produce un evento de desconexión automática, se desconectan todos los participantes que no sean el cliente (p. ej., el agente, cualquier supervisor que esté monitoreando la interacción o participantes personalizados). Si el agente es el que se desconecta y se ha configurado un bloque [Set disconnect flow (Establecimiento de flujo de desconexión)](set-disconnect-flow.md), el chat se enruta a este.

### Vencimiento del tiempo de inactividad
<a name="idle-timer-expiry"></a>

A continuación, se indica lo que ocurre cuando vence un temporizador de inactividad durante una interacción entre el cliente y un participante personalizado: 

1. Un evento inactivo se extiende a todos los puntos websockets/streaming finales.

1. Si se configura un temporizador de desconexión automática, este se inicia. 

1. Si el tiempo de inactividad vence mientras el contacto del chat está en un bloque de **espera**, el contacto NO se redirige a la ramificación **Tiempo caducado**. No se realiza ninguna acción si se produce este escenario. 

### Desconexión automática de los participantes personalizados
<a name="auto-disconnecting"></a>

Cuando vence un temporizador de desconexión automática, el participante personalizado se desconecta del chat. 

Amazon Connect lleva a cabo uno de los siguientes pasos cuando vencen los temporizadores de desconexión automática:

1. Actualmente, el chat reside en un bloque [Wait](wait.md) que está configurado para un participante personalizado. 
   + El participante personalizado se desconecta del chat y el chat reanuda el flujo pasando a la ramificación **Participante del bot desconectado**.

1. El chat reside actualmente en un bloque [Wait](wait.md) que está configurado para el cliente, o bien el chat no está en un bloque de **espera**.
   + El participante personalizado se desconecta del chat y no se realiza ninguna otra acción. 

## Mensajes que se muestran a los participantes
<a name="chat-timeouts-events"></a>

Los mensajes se muestran a todos los participantes cuando se produce alguno de los siguientes eventos:
+ Un participante queda inactivo.
+ Un participante inactivo envía un mensaje y deja de estar inactivo.
+ Se produce una desconexión automática. Como el agente está desconectado, no podrá ver el mensaje.

Estos eventos no se conservan en las transcripciones ni se facturan.

Los mensajes predeterminados (en todos los idiomas admitidos) se muestran a los agentes en el Panel de control de contacto (CCP) para cada uno de estos eventos. 

En la siguiente imagen se muestran ejemplos de mensajes de inactividad predeterminados que el agente vería en el CCP. Por ejemplo, *El agente ha quedado inactivo*.

![\[El ccp, los mensajes de inactividad predeterminados.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/chat-timeout-message.png)


## Uso recomendado
<a name="chat-timeouts-usage"></a>

Para utilizar la característica de tiempo de espera del chat, le recomendamos que haga lo siguiente:

1. Inserte una llamada a la [UpdateParticipantRoleConfig](https://docs.aws.amazon.com/connect/latest/APIReference/API_UpdateParticipantRoleConfig.html)acción en una Lambda en un flujo de contactos.

1. En función de su caso de uso, coloque la Lambda inmediatamente después de iniciar el chat (al principio del flujo) o justo antes de enrutar el contacto a una cola.

## Personalización de la interfaz de usuario del chat del cliente para un evento de desconexión
<a name="chat-timeouts-ui"></a>

Para personalizar la interfaz de usuario del chat de su cliente para un evento de desconexión, consulte los siguientes métodos en [ChatJS](https://github.com/amazon-connect/amazon-connect-chatjs):
+ `onParticipantIdle(callback)`
+ `onParticipantReturned(callback)`
+ `onAutoDisconnection(callback)`

Utilice estos métodos para registrar los identificadores de devolución de llamada que se desencadenan cuando llegan los nuevos eventos.

# Habilitación de notificaciones push para el chat móvil
<a name="enable-push-notifications-for-mobile-chat"></a>

Las notificaciones push para el chat móvil se configuran desde [AWS End User Messaging](https://docs.aws.amazon.com/sms-voice/latest/userguide/what-is-service.html). Puede activar las notificaciones push para el chat móvil en dispositivos iOS o Android, lo que le permite alertar a los clientes sobre nuevos mensajes aunque no estén utilizando la aplicación móvil en ese momento. Puede habilitar esta función en su aplicación existente integrada con el [Amazon Connect dispositivo móvil SDKs](https://docs.aws.amazon.com/connect/latest/adminguide/integrate-chat-with-mobile.html), en una [solución de visualización web](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/mobileChatExamples) o en una solución nativa personalizada. 

 Los siguientes pasos y recursos te ayudarán a empezar a integrar las notificaciones Amazon Connect push en tus aplicaciones móviles nativas: 

## Paso 1: Obtén las credenciales de la consola FCM de Apple APNs y Google
<a name="step-1-enable-push-notifications-for-mobile-chat"></a>

Para configurarla de Amazon Connect forma que pueda enviar notificaciones automáticas a tus aplicaciones, primero tienes que obtener las credenciales de la consola FCM de Apple APNs y Google, que permitirán a [AWS End User Messaging](https://docs.aws.amazon.com/sms-voice/latest/userguide/what-is-service.html) enviar notificaciones a tus aplicaciones móviles. Las credenciales que se proporcionan dependen del sistema de notificaciones push utilizado: 
+  Para obtener información sobre las credenciales del servicio de notificaciones push de Apple (APNs), consulta [Cómo obtener una clave de cifrado y un identificador de clave de Apple](https://developer.apple.com/documentation/usernotifications/establishing-a-token-based-connection-to-apns#Obtain-an-encryption-key-and-key-ID-from-Apple) y cómo [obtener un certificado de proveedor de Apple](https://developer.apple.com/documentation/usernotifications/establishing-a-certificate-based-connection-to-apns#Obtain-a-provider-certificate-from-Apple) en la documentación para desarrolladores de Apple. 
+  Para obtener las credenciales de Firebase Cloud Messaging (FCM) de Google, vaya a la consola de Firebase (consulte [Firebase Cloud Messaging](https://firebase.google.com/docs/cloud-messaging)). 

## Paso 2: Crea una aplicación de servicio de mensajería para el usuario AWS final mediante la AWS consola y activa el canal de notificaciones push para FCM o APNs
<a name="step-2-enable-push-notifications-for-mobile-chat"></a>

 Antes de poder habilitar Amazon Connect para enviar notificaciones push, primero tiene que [crear una aplicación de AWS End User Messaging y habilitar el canal de notificaciones push](https://docs.aws.amazon.com/push-notifications/latest/userguide/procedure-enable-push.html) en la [consola de AWS](https://console.aws.amazon.com/push-notifications/).

 Siga estas instrucciones para crear una aplicación y habilitar cualquiera de los canales push. Para completar este procedimiento, solo tiene que introducir el nombre de la aplicación. Puede habilitar o deshabilitar cualquiera de los canales push en otro momento: 

1.  Abre la consola push de mensajería para el usuario AWS final en [https://console.aws.amazon.com/push-notifications/](https://console.aws.amazon.com/push-notifications/) 

1.  Elija **Creación de aplicación**. 

1.  En **Nombre de la aplicación**, especifique un nombre para su aplicación. 

1.  (Opcional) Siga este paso opcional para activar el **servicio de notificaciones push de Apple (APNs)**. 

   1.  Para el **servicio de notificaciones push de Apple (APNs)**, selecciona **Activar**. 

   1.  Para **Tipo de autenticación predeterminado**, elija una de las siguientes opciones: 

      1.  Si eliges **Credenciales clave**, proporciona la siguiente información de tu cuenta de desarrollador de Apple. AWS End User Messaging Push requiere esta información para crear los tokens de autenticación. 

         1.  **ID de clave**: el ID asignado a la clave de firma. 

         1.  **Identificador de paquete**: el ID que está asignado a la aplicación de iOS. 

         1.  **Identificador de equipo**: el ID que está asignado al equipo de la cuenta de desarrollador de Apple. 

         1.  **Clave de autenticación**: el archivo .p8 que descarga desde la cuenta de desarrollador de Apple al crear una clave de autenticación. 

      1.  Si elige **Certificate credentials (Credenciales de certificado)**, facilite la siguiente información: 

         1.  **SSL certificate** (Certificado SSL): archivo .p12 del certificado TLS. 

         1.  **Contraseña de certificado**: si ha asignado una contraseña al certificado, ingrésela aquí. 

         1.  **Tipo de certificado**: seleccione el tipo de certificado que se va a utilizar. 

1.  (Opcional) Siga este paso opcional para habilitar **Firebase Cloud Messaging (FCM**). 

   1.  Para **Firebase Cloud Messaging (FCM)**, seleccione **Habilitar**. 

   1.  Seleccione **Credenciales de token** como **Tipo de autenticación predeterminado** y elija el archivo JSON de su servicio. 

1.  Elija **Creación de aplicación**. 

## Paso 3: Asocie la aplicación de mensajería para el usuario AWS final a una Amazon Connect instancia
<a name="step-3-enable-push-notifications-for-mobile-chat"></a>

 Para habilitar las notificaciones push en una [Amazon Connect instancia](https://docs.aws.amazon.com/connect/latest/adminguide/find-instance-arn.html), tendrás que asociar una aplicación de mensajería para el usuario AWS final a una [Amazon Connect instancia](https://docs.aws.amazon.com/connect/latest/adminguide/find-instance-arn.html) llamando a la [CreateIntegrationAssociation](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateIntegrationAssociation.html)API con la `PINPOINT_APP` [IntegrationType](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateIntegrationAssociation.html#API_CreateIntegrationAssociation_RequestSyntax). Puede llamar a esta API con [AWS CLI](https://docs.aws.amazon.com/cli/latest/reference/connect/create-integration-association.html) o con el [SDK de Amazon Connect](https://aws.amazon.com/developer/tools/) para cualquier idioma compatible. Este paso de incorporación se realiza una sola vez y es necesario para cada integración entre una aplicación de mensajería para el usuario AWS final y una Amazon Connect instancia. 

## Paso 4: Obtén el token del dispositivo con FCM o el APNs SDK y regístralo en Amazon Connect
<a name="step-4-enable-push-notifications-for-mobile-chat"></a>

Deberás buscar el token del dispositivo y usarlo para registrar el dispositivo móvil de un usuario final con un contacto de Amazon Connect chat para enviar notificaciones automáticas cuando haya nuevos mensajes en el chat. Lee la siguiente documentación para FCM/APNs desarrolladores para saber cómo se genera y obtiene el token del dispositivo desde la aplicación móvil.
+  Para el servicio de notificaciones push de Apple (APN), consulta Cómo [registrar tu aplicación con él APNs](https://developer.apple.com/documentation/usernotifications/registering-your-app-with-apns) en la documentación para desarrolladores de Apple.
+  Para Firebase Cloud Messaging (FCM), consulte [Prácticas recomendadas para la administración de tokens de registro de FCM](https://firebase.google.com/docs/cloud-messaging/manage-tokens).

 Para registrar el dispositivo con un contacto de chat, le sugerimos que haga lo siguiente: 

1.  Cuando la aplicación móvil llame a la [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)API, transfiere la `deviceToken` y `deviceType` como [atributos de contacto](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html#connect-StartChatContact-request-Attributes). Para los usuarios de visualización web y widgets de comunicación alojados, consulte [Cómo pasar los atributos de contacto al widget de comunicaciones](https://docs.aws.amazon.com/connect/latest/adminguide/pass-contact-attributes-chat.html#how-to-contact-attributes-chatwidget) para obtener más información.

1.  Inserte una llamada a la [CreatePushNotificationRegistration](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateIntegrationAssociation.html)acción en una función Lambda en un flujo de contactos. El bloque de flujo debe leer `deviceToken` y `deviceType` partir de los atributos de contacto definidos por el usuario y el `initialContactId` de los atributos del sistema; luego, debe pasar estos valores a la función de Lambda.

   1.  En función de su caso de uso, coloque la función de Lambda inmediatamente después de iniciar el chat (al principio del flujo) si desea que el usuario final reciba notificaciones push de inmediato, o justo antes de enrutar el contacto a una cola para que reciba el contacto solo cuando el agente esté a punto de unirse. Una vez realizada la llamada a la API, el dispositivo empezará a recibir notificaciones push cuando llegue un nuevo mensaje del agente o del sistema. De forma predeterminada, se enviarán notificaciones push para todos los mensajes del sistema y del agente.  
![\[Invoque el bloque de flujo de la función de lambda en el diseñador de flujos del sitio web de administración de Amazon Connect .\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/step-4-set-up-push-notifications-for-mobile-chat-1.png)

1.  (opcional) Inserte una llamada a la [DeletePushNotificationRegistration](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateIntegrationAssociation.html)acción en una función Lambda de un flujo. Una vez realizada la llamada a la API, el dispositivo dejará de recibir notificaciones push cuando llegue un nuevo mensaje del agente o del sistema.

## Paso 5: recepción de una notificación automática en aplicaciones móviles
<a name="step-5-enable-push-notifications-for-mobile-chat"></a>

 Consulta nuestro proyecto de [ejemplos de interfaz de usuario de Amazon Connect chat](https://github.com/amazon-connect/amazon-connect-chat-ui-examples) y consulta nuestros ejemplos de vistas web de chat para [iOS](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/mobileChatExamples/iOS-WKWebView-sample) y [Android](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/mobileChatExamples/android-webview-sample) que muestran cómo integrarse Amazon Connect APIs para incorporar y recibir notificaciones push.

## Supervisión del uso de las notificaciones push
<a name="monitor-your-usage-for-push-notification"></a>

 Con el fin de garantizar la fiabilidad, la disponibilidad y el rendimiento de las notificaciones push, es fundamental supervisar su uso. Puede hacer un seguimiento de esta información a través de varios canales: 

1.  AWS proporciona herramientas de monitoreo integrales para las notificaciones push. Para obtener más información, consulte [Supervisión de los mensajes push de los usuarios AWS finales](https://docs.aws.amazon.com/push-notifications/latest/userguide/monitoring-overview.html). 

1.  En función del servicio de notificaciones push que utilice, podrá acceder a datos de uso adicionales a través de sus respectivas consolas. 

   1.  Firebase Cloud Messaging (FCM): consulte la documentación de FCM ([Información sobre la entrega de mensajes](https://firebase.google.com/docs/cloud-messaging/understand-delivery?platform=android)) para obtener más información sobre su uso de FCM. 

   1.  Servicio de notificaciones push de Apple (APNs): consulta la sección de APNs documentación sobre cómo [ver el estado de las notificaciones push mediante las métricas y APNs](https://developer.apple.com/documentation/usernotifications/viewing-the-status-of-push-notifications-using-metrics-and-apns) cómo supervisar el estado de las notificaciones. 

# Permiso para que los clientes reanuden las conversaciones de chat en Amazon Connect
<a name="chat-persistence"></a>

A menudo, los clientes inician un chat, abandonan la conversación y vuelven más tarde para seguir charlando. Esto puede ocurrir muchas veces en el transcurso de varios días, meses o incluso años. Para soportar chats de larga duración como estos, se habilita el chat persistente. 

Con el chat persistente, los clientes pueden reanudar conversaciones anteriores manteniendo el contexto, los metadatos y las transcripciones. No es necesario que repitan lo que han dicho cuando vuelven a un chat y los agentes tienen acceso a todo el historial de la conversación. 

## Rehidratación del chat
<a name="rehydration"></a>

El chat persistente se logra mediante un proceso denominado rehidratación del chat. Este proceso permite recuperar y mostrar las transcripciones del chat de contactos anteriores. Permite a los clientes y agentes continuar fácilmente las conversaciones en el punto donde las dejaron.

**importante**  
Solo las sesiones de chat que hayan finalizado pueden rehidratarse en una nueva sesión de chat, ya que la generación de transcripciones se produce de forma asíncrona.   
Los usuarios deben esperar entre 30 y 60 segundos antes de intentar la rehidratación desde un chat finalizado anteriormente.

Amazon Connect admite dos tipos de rehidratación:
+ `ENTIRE_PAST_SESSION`: inicia una nueva sesión de chat y rehidrata todos los segmentos de chat de sesiones de chat anteriores.
+ `FROM_SEGMENT`: inicia una nueva sesión y se rehidrata a partir del segmento de chat anterior especificado.

Para ver ejemplos de casos de uso que muestran estos distintos modos de rehidratación, consulte [Ejemplos de casos de uso](#persistentchatscenario).

## RelatedContactId
<a name="relatedcontactid"></a>

Un nuevo contacto puede tener una asociación con un contacto existente a través de `RelatedContactId`. Este nuevo contacto contiene una copia de las [propiedades](connect-attrib-list.md) del contacto relacionado.

Para obtener más información sobre cómo se modela `RelatedContactId` en los registros de contacto, consulte [Modelo de datos para los registros de contactos de Amazon Connect](ctr-data-model.md).

En el caso de chat persistente, `RelatedContactId` muestra lo que `contactId` utiliza para generar la rehidratación del chat.

## Habilitación del chat persistente
<a name="enable-persistent-chat"></a>

Es posible activar el chat persistente de dos formas:
+ Especificar un ID de contacto anterior al crear un nuevo chat. Para obtener instrucciones, consulte [Habilitación del chat persistente al crear un nuevo contacto de chat](#enable-persistent-chat-creating-new-chat-contact).
+ Agregar el bloque [Crear una asociación de contactos persistente](create-persistent-contact-association-block.md) a un flujo. Para obtener instrucciones, consulte [Habilitación del chat persistente dentro de un flujo de contactos](#enable-persistent-chat-within-contact-flow).

**nota**  
Puede elegir uno de estos dos métodos para que los chats sean persistentes, pero no ambos. Es decir, solo puede habilitar la persistencia de un `SourceContactID` en un chat nuevo cada vez.

Para ofrecer experiencias de chat persistente, debe proporcionar un ID de contacto anterior al iniciar un chat nuevo o al usar el bloque de flujo [Crear una asociación de contactos persistente](create-persistent-contact-association-block.md). Esto no se hace de forma automática. Le recomendamos que cree un repositorio para almacenar los datos de registro de contacto. El repositorio le permite recuperar esos datos para cada uno de sus clientes. 

 Hay dos formas de crear entradas en un repositorio: 
+ Utilizar la [transmisión de mensajes de chat](https://docs.aws.amazon.com/connect/latest/adminguide/chat-message-streaming.html) para crear una entrada cuando el chat haya terminado.
+ Inspeccionar los [eventos de contacto](https://docs.aws.amazon.com/connect/latest/adminguide/contact-events.html#contact-events-data-model) y utilizar la [función de AWS Lambda](https://docs.aws.amazon.com/connect/latest/adminguide/connect-lambda-functions.html) para crear entradas en su repositorio. 

Una vez configurado el repositorio, puede recuperar el ID de contacto anterior del cliente y proporcionarlo al iniciar un nuevo chat o dentro del bloque de flujo [Crear una asociación de contactos persistente](create-persistent-contact-association-block.md).

Además, asegúrese de que las transcripciones de los chats anteriores se puedan recuperar del bucket de Amazon S3 de su instancia. Los dos factores siguientes impiden que Amazon Connect recupere las transcripciones y no permiten que los chats persistan:
+ Usar varios buckets de transcripciones de chat.
+ Cambiar el nombre del archivo de transcripción de chat que genera Amazon Connect.

### Habilitación del chat persistente al crear un nuevo contacto de chat
<a name="enable-persistent-chat-creating-new-chat-contact"></a>

Para configurar experiencias de chat persistentes al crear un nuevo contacto de chat, introduce lo anterior `contactId` en el `SourceContactId` parámetro de la [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)API. Esto permite rehidratar las transcripciones de chat de contactos anteriores. Tanto el cliente como el agente pueden ver las transcripciones en el chat. Para ver un ejemplo, consulta [Ejemplos de casos de uso](#persistentchatscenario).

### Habilitación del chat persistente dentro de un flujo de contactos
<a name="enable-persistent-chat-within-contact-flow"></a>

Para configurar experiencias de chat persistentes en un flujo:

1. Una vez creado un contacto de chat, añada el bloque [Crear una asociación de contactos persistente](create-persistent-contact-association-block.md) al flujo.

1. Utilice un atributo definido por el usuario para especificar un ID de contacto de origen.

Como alternativa, puedes usar la [CreatePersistentContactAssociation](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreatePersistentContactAssociation.html)API para proporcionar un identificador de contacto de origen y hacer que el chat actual sea persistente.

La rehidratación se inicia una vez iniciado el chat, cuando se utiliza el bloque de flujo o la API. Se emite un evento de rehidratación para avisarle cuando se ha completado la rehidratación.

## Ejemplos de casos de uso
<a name="persistentchatscenario"></a>

Por ejemplo, un cliente inicia una sesión de chat:

1. El agente a1 acepta el chat y comienza la conversación entre el cliente y el agente a1. Este es el primer contacto creado en la sesión de chat actual. Por ejemplo, `contactId` **C1** podría ser 11111111-aaaa-bbbb-1111-1111111111111. 

1. A continuación, el agente a1 transfiere el chat al agente a2. Esto crea otro contacto. Por ejemplo, `contactId` **C2** podría ser 2222222-aaaa-bbbb-2222-222222222222222. 

1. El agente a2 finaliza el chat.

1. El cliente se reenvía al flujo de desconexión para una encuesta posterior al chat que crea otro contacto. Por ejemplo, `contactId` **C3** podría ser 33333333-aaaa-bbbb-3333-3333333333333.

1. Aparece la encuesta posterior al chat y finaliza la sesión de chat. 

1. Más tarde, el cliente regresa y desea reanudar su sesión de chat anterior.

En este punto, existen dos posibles casos de uso diferentes para el cliente. A continuación, se exponen los casos de uso del chat persistente que puede tener el cliente y cómo configurar Amazon Connect para proporcionárselos.

### Caso de uso 1
<a name="persistentchatscenario-usecase1"></a>

El cliente desea continuar con su sesión de chat anterior, pero desea ocultar la encuesta posterior al chat. Utilice la siguiente configuración para proporcionar esta experiencia. 

**Solicitud:**

```
PUT /contact/chat HTTP/1.1
Content-type: application/json
{
   "Attributes": { 
      "string" : "string" 
   },
   "ContactFlowId": "string",
   "InitialMessage": { 
      "Content": "string",
      "ContentType": "string"
   },
   "InstanceId": "string",
   ... // other chat fields
     
   // NEW Attribute for persistent chat 
   "PersistentChat" : {
       "SourceContactId":"2222222-aaaa-bbbb-2222-222222222222222" 
       "RehydrationType":"FROM_SEGMENT"
   }
}
```

#### Configuración
<a name="usecase1-configuration"></a>
+ SourceContactId = 2222222-aaaa-bbbb-222222222222222 (el ContactiD de C2)
+ RehydrationType = "`FROM_SEGMENT`"

#### Comportamiento esperado
<a name="usecase1-behavior"></a>
+ Esta configuración inicia una sesión de chat persistente a partir del contacto C2 finalizado especificado (por ejemplo, 2222222-aaaa-bbbb-2222-222222222222222). 

  Las transcripciones de las sesiones de chat anteriores C2 (2222222-aaaa-bbbb-2222-222222222222222) y C1 (11111111-aaaa-bbbb-1111-1111111111111) son accesibles en la sesión de chat persistente actual. Tenga en cuenta que el segmento de chat C3 (33333333-aaaa-bbbb-3333-3333333333333) se elimina de la sesión de chat persistente.
+ En este caso, la respuesta devuelve C2 (2222222-aaaa-bbbb-2222-222222222222222) como "». [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)ContinuedFromContactId
+ El `RelatedContactId` de esta sesión de chat persistente es 2222222-aaaa-bbbb-2222-222222222222222 (C2).

### Caso de uso 2
<a name="persistentchatscenario-usecase2"></a>

El cliente desea continuar la sesión de chat anterior y ver la transcripción de toda la interacción pasada (y no desea ocultar la encuesta posterior al chat). Utilice la siguiente configuración para proporcionar esta experiencia. 

**nota**  
 Para el tipo de rehidratación `ENTIRE_PAST_SESSION`, especifique como atributo `SourceContactId` el primer contacto (`contactId` inicial) de la última sesión de chat.

**Solicitud:**

```
PUT /contact/chat HTTP/1.1
Content-type: application/json
{
   "Attributes": { 
      "string" : "string" 
   },
   "ContactFlowId": "string",
   "InitialMessage": { 
      "Content": "string",
      "ContentType": "string"
   },
   "InstanceId": "string",
   ... // other chat fields
     
   // NEW Attribute for persistent chat 
   "PersistentChat":{
        "SourceContactId":"11111111-aaaa-bbbb-1111-1111111111111" // (first contactId C1)
        "RehydrationType":"ENTIRE_PAST_SESSION"
   }
}
```

#### Configuración
<a name="usecase2-configuration"></a>
+ SourceContactId = (C1) `11111111-aaaa-bbbb-1111-1111111111111`
+ RehydrationType = «E`NTIRE_PAST_SESSION`»

#### Comportamiento esperado
<a name="usecase2-behavior"></a>
+ Esto inicia una sesión de chat persistente a partir del último contacto de chat finalizado (C3). Las transcripciones de las sesiones de chat anteriores C3, C2 y C1 son accesibles en la sesión de chat persistente actual.
+ En este caso, la [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)respuesta devuelve 33333333-aaaa-bbbb-3333-3333333333333 (C3) como "». ContinuedFromContactId
+ El `RelatedContactId` de esta sesión de chat persistente es 33333333-aaaa-bbbb-3333-3333333333333 (C3)

**nota**  
Los vínculos de chat son acumulativos. Una vez vinculadas, las sesiones de chat se transfieren.  
Por ejemplo, si un contacto (`contactId` C2) que pertenece a una sesión de chat pasada estaba vinculado a un contacto (`contactId` C1) de una sesión de chat pasada diferente, una nueva sesión de chat persistente creada mediante la vinculación de C2 da lugar también a la vinculación implícita de C1. La nueva sesión de chat persistente tendrá la siguiente vinculación: C3 → C2 → C1  
El ContactiD anterior, desde el que continúa la sesión de chat persistente, se expone en `ContinuedFromContactId` el campo de la respuesta de la API. [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html) También está en el campo RelatedContactId del [registro](ctr-data-model.md#ctr-ContactTraceRecord) del contacto

## Cómo acceder a la transcripción de los contactos anteriores de un chat persistente
<a name="access-past-chat-transcript"></a>

El acceso a la transcripción del chat anterior para el chat persistente utiliza el modelo de paginación `NextToken` existente. La llamada inicial a una [GetTranscript](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_GetTranscript.html)sesión de chat persistente recién iniciada contiene un `NextToken` en la respuesta, si existen mensajes de chat anteriores. `NextToken`debe usarse para acceder a la transcripción del chat anterior y configurarlo `BACKWARD` en la siguiente [GetTranscript](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_GetTranscript.html)llamada `ScanDirection` para buscar los mensajes de chat anteriores. 

Si hay varios mensajes de chat anteriores, [GetTranscript](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_GetTranscript.html)devuelve uno nuevo `NextToken` y se puede repetir el mismo proceso para recuperar más transcripciones de chat anteriores.

## No se admite: el uso de filtros `StartPosition` y `contactId` para el chat persistente
<a name="startposition"></a>

Amazon Connect no admite el uso de atributos de `StartPosition` los elementos de la transcripción que provienen del [GetTranscript](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_GetTranscript.html)chat anterior ni los `contactId` filtra en función de los atributos de los elementos de la transcripción. 

# Habilitación de la transmisión de mensajes de chat en tiempo real en Amazon Connect
<a name="chat-message-streaming"></a>

Amazon Connect Chat [APIs](https://docs.aws.amazon.com/connect/latest/APIReference/Welcome.html)le permite suscribirse a una transmisión de mensajes de chat en tiempo real. Con ellas APIs, puede: 
+ Transmitir mensajes de chat en tiempo real cuando se cree un nuevo contacto de chat.
+ Amplíe la funcionalidad actual del chat de Amazon Connect para admitir casos de uso como la creación de integraciones con soluciones de SMS y aplicaciones de mensajería de terceros, la habilitación de notificaciones push en móviles y la creación de paneles de análisis para monitorear y realizar un seguimiento de la actividad de los mensajes de chat. 

**nota**  
En esta página se describe cómo suscribirse a un punto final de SNS para la transmisión en tiempo real de los mensajes de chat en Amazon Connect. Si está intentando habilitar la transmisión de mensajes para las interacciones conversacionales de IA en Amazon Connect, consulte[Habilite la transmisión de mensajes para un chat con tecnología de IA](message-streaming-ai-chat.md).

## Cómo funciona la transmisión de APIs mensajes
<a name="how-chat-message-streaming-apis-work"></a>

La [transmisión de mensajes de Amazon Connect APIs](https://docs.aws.amazon.com/connect/latest/APIReference/Welcome.html) se activa cuando se producen determinados eventos en un contacto de Amazon Connect Chat. Por ejemplo, cuando un cliente envía un nuevo mensaje de chat, el evento envía una [carga](sns-payload.md) a un punto de conexión especificado que contiene datos sobre el mensaje que se acaba de enviar. Los mensajes se publican mediante [Amazon Simple Notification Service](https://docs.aws.amazon.com/sns/latest/dg/welcome.html) (Amazon SNS) en un punto de conexión específico. 

En este tema se describe cómo establecer un flujo de mensajes en tiempo real mediante Amazon Connect y Amazon SNS. Los pasos son: 

1. Utilice la consola de Amazon SNS para crear un nuevo tema SNS estándar y configurar los mensajes.

1. Llama a la [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)API para iniciar el contacto de chat.

1. Llama a la [StartContactStreaming](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartContactStreaming.html)API para iniciar la transmisión de mensajes. 

1. Llama a la [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html)API para crear la conexión del participante.

## Paso 1: crear tema de SNS estándar
<a name="step1-chat-streaming"></a>

1. Vaya a la consola de Amazon SNS. 

1. [Crea un tema de SNS](https://docs.aws.amazon.com/sns/latest/dg/sns-create-topic.html) en tu AWS cuenta. En la sección **Detalles**, para **Tipo**, elija **Estándar**, introduzca un nombre para el tema y, a continuación, elija **Crear tema**.
**nota**  
Actualmente, la transmisión de mensajes APIs solo admite el SNS estándar para la transmisión de mensajes en tiempo real. No son compatibles con los [temas FIFO (primero en entrar, primero en salir) de Amazon SNS](https://docs.aws.amazon.com/sns/latest/dg/sns-fifo-topics.html). 

1. Tras crear el tema, su nombre de recurso de Amazon (ARN) aparece en la sección **Detalles**. Copie el ARN del tema en el portapapeles. Utilizará el ARN de tema en el siguiente paso y en [Paso 3: habilitar el streaming de mensajes en el contacto](#step3-chat-streaming). 

   El ARN de tema tiene un aspecto similar al del ejemplo siguiente: 

   ```
   arn:aws:sns:us-east-1:123456789012:MyTopic                                
   ```

1. Elija la pestaña **Política de acceso**, elija **Editar** y, a continuación, agregue una política basada en recursos en el tema de SNS de modo que Amazon Connect tenga permiso para publicar en él. A continuación, encontrará un ejemplo de política de SNS que puede copiar y pegar en el editor JSON y, a continuación, personalizar con sus valores: 

------
#### [ JSON ]

****  

   ```
   {
      "Version":"2012-10-17",		 	 	 
      "Statement":[
         {
            "Effect":"Allow",
            "Principal":{
               "Service":"connect.amazonaws.com"
            },
            "Action":"sns:Publish",
            "Resource":"arn:aws:sns:us-east-1:111122223333:TopicName",
            "Condition":{
               "StringEquals":{
                   "aws:SourceAccount":"111122223333"
               },
               "ArnEquals":{
               "aws:SourceArn":"arn:aws:connect:us-east-1:111122223333:instance/InstanceId"
               }
            }
         }
      ]
   }
   ```

------
**nota**  
La **política de acceso** predeterminada incluye condiciones aplicadas a `sourceOwner`, como:   

   ```
   "Condition": {
           "StringEquals": {
             "AWS:SourceOwner": "921772911154"
           }
         }
   ```
Asegúrese de quitarla y reemplazarla por `SourceAccount`, por ejemplo:  

   ```
   "Condition":{
               "StringEquals":{
                  "aws:SourceAccount":"YOUR_AWS_ACCOUNT_ID"
               },
               "ArnEquals":{
                  "aws:SourceArn":"YOUR_CONNECT_INSTANCE_ARN"
               }
            }
   ```
Esto evita un problema de [suplente confuso entre servicios](cross-service-confused-deputy-prevention.md). 

1. Si utiliza el cifrado del servidor en SNS, verifique que tiene el permiso `connect.amazonaws.com` habilitado en la KMS key. A continuación, se muestra una política de ejemplo:

------
#### [ JSON ]

****  

   ```
   {
       "Version":"2012-10-17",		 	 	 
       "Id": "key-consolepolicy-3",
       "Statement": [
           {
               "Sid": "Enable IAM User Permissions",
               "Effect": "Allow",
               "Principal": {
                   "AWS": "arn:aws:iam::111122223333:root",
                   "Service": "connect.amazonaws.com"
               },
               "Action": "kms:*",
               "Resource": "*"
           },
           {
               "Sid": "Allow access for Key Administrators",
               "Effect": "Allow",
               "Principal": {
                   "AWS": "arn:aws:iam::111122223333:root",
                   "Service": "connect.amazonaws.com"
               },
               "Action": [
                   "kms:Create*",
                   "kms:Describe*",
                   "kms:Enable*",
                   "kms:List*",
                   "kms:Put*",
                   "kms:Update*",
                   "kms:Revoke*",
                   "kms:Disable*",
                   "kms:Get*",
                   "kms:Delete*",
                   "kms:TagResource",
                   "kms:UntagResource",
                   "kms:ScheduleKeyDeletion",
                   "kms:CancelKeyDeletion"
               ],
               "Resource": "*"
           }
       ]
   }
   ```

------

## Paso 2: iniciar el contacto de chat
<a name="step2-chat-streaming"></a>

1. Llama a la [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)API Amazon Connect para iniciar el contacto de chat. 

   Para obtener información sobre cómo crear el cliente SDK para llamar a Amazon Connect APIs, consulte los siguientes temas:
   + [Clase AmazonConnectClientBuilder](https://docs.aws.amazon.com/AWSJavaSDK/latest/javadoc/com/amazonaws/services/connect/AmazonConnectClientBuilder.html) 
   + [Creación de clientes de servicio](https://docs.aws.amazon.com/sdk-for-java/v1/developer-guide/creating-clients.html) 

1. Realice un seguimiento de la [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)respuesta `ContactId` y `ParticipantToken` desde ella, ya que estos atributos de respuesta se utilizan para llamar a otros chats APIs necesarios para habilitar la transmisión. Esto se describe en los siguientes pasos.

## Paso 3: habilitar el streaming de mensajes en el contacto
<a name="step3-chat-streaming"></a>
+ Llama [StartContactStreaming](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartContactStreaming.html)para permitir la transmisión de mensajes en tiempo real a tu tema de SNS.
  + **Límites**: puede suscribirse a un máximo de dos temas de SNS por contacto.
  + Cuando llames [StartContactStreaming](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartContactStreaming.html), tendrás que proporcionar el nombre del recurso de Amazon (ARN) del tema de SNS (consulte). [Paso 1: crear tema de SNS estándar](#step1-chat-streaming)

    Se puede usar un único ARN de tema de SNS en Cuentas de AWS varios, pero debe estar en la misma región que la instancia de Amazon Connect. Por ejemplo, si el ARN de su tema está en **us-east-1**, su instancia de Amazon Connect debe estar en **us-east-1**.
  + En el caso de los mensajes de chat iniciales que no se reciben en el punto final de streaming, puedes llamar a la [GetTranscript](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_GetTranscript.html)API para recibir los mensajes iniciales.

## Paso 4: crear la conexión de participante
<a name="step4-chat-streaming"></a>
+ Llama [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html)con el `ConnectParticipant` atributo asignado como true. 
  + Debe llamar [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html)en un plazo de cinco minutos a partir de la creación del chat.
  + Llamar [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html)con `ConnectParticipant` el valor «true» solo funciona si has activado la transmisión [Paso 2: iniciar el contacto de chat](#step2-chat-streaming) y la persona que llama es `Customer` el participante.
  + Este paso (crear la conexión del participante) es opcional si ya se ha conectado correctamente al contacto de chat mediante `WEBSOCKET`.

## Siguientes pasos
<a name="nextsteps-chat-streaming"></a>

Ya está todo listo para trabajar con la transmisión APIs de mensajes.

1. Para comprobar que funciona, compruebe que los mensajes se publican en el tema de SNS que ha creado. Puedes hacerlo con las CloudWatch métricas de Amazon. Para obtener instrucciones, consulte [Supervisar los temas de Amazon SNS mediante](https://docs.aws.amazon.com/sns/latest/dg/sns-monitoring-using-cloudwatch.html). CloudWatch 

1. Como SNS tiene una [retención limitada](https://aws.amazon.com/blogs//aws/sns-ttl-control/), le recomendamos que establezca [Amazon Simple Queue Service (Amazon SQS)](https://aws.amazon.com/sqs/), [Amazon Kinesis](https://aws.amazon.com/kinesis/) u otro servicio para retener los mensajes. 

1. [StopContactStreaming](https://docs.aws.amazon.com/connect/latest/APIReference/API_StopContactStreaming.html)El uso es opcional y no obligatorio si los chats se [desconectan](disconnect-hang-up.md) a través de un flujo de contactos o si el cliente desconecta el chat. No obstante, `StopContactStreaming` ofrece la opción de detener el streaming de mensajes en el tema de SNS, aunque el chat esté activo y en curso.

# Uso de la carga útil de Amazon SNS después de habilitar la transmisión de mensajes en Amazon Connect
<a name="sns-payload"></a>

Una vez habilitado correctamente el streaming de mensajes, puede que necesite filtrar el mensaje para enviarlo al participante previsto: agente, cliente o todos.

Para filtrar por participante, lea el atributo `MessageVisibility` específico de los encabezados de SNS para determinar si el mensaje está destinado solo a clientes, solo a agentes o a todos. 
+ Para enviar solo al cliente: para todo el código que se dirige al cliente, los clientes deben filtrar los mensajes destinados al cliente y crear la siguiente lógica para reenviarle el mensaje.

  ```
  if ( ( MessageVisibility == CUSTOMER || MessageVisibility == ALL)  && ParticipantRole != CUSTOMER )
  ```
+ Para enviar solo al agente:

  ```
  if ( ( MessageVisibility == AGENT || MessageVisibility == ALL)  && ParticipantRole != AGENT )
  ```

También puede aprovechar la capacidad de filtrado de Amazon SNS mediante la creación de [políticas de filtrado de suscripciones](https://docs.aws.amazon.com/sns/latest/dg/sns-subscription-filter-policies.html) personalizadas. Esto descarga la lógica de filtrado de mensajes del suscriptor de temas de SNS al propio servicio SNS.

## Atributos de mensaje en la carga
<a name="sns-message-attributes"></a>

A continuación, se describe cada atributo del mensaje en la carga de Amazon SNS:
+ `InitialContactId`: el ID de contacto inicial del chat.
+ `ContactId`: el ID de contacto actual del chat. El `InitialContactId` y `ContactId` puede variar si ha habido un nuevo agente en el chat o en el flujo de queue-to-queue contactos.
+ `ParticipantRole`: el participante que ha enviado el mensaje.
+ `InstanceId`: el ID de instancia de Amazon Connect.
+ `AccountId`: El ID AWS de la cuenta.
+ `Type`: valores posibles: `EVENT`, `MESSAGE`.
+ `ContentType`: Valores posibles:`application/vnd.amazonaws.connect.event.typing`, `application/vnd.amazonaws.connect.event.participant.joined``application/vnd.amazonaws.connect.event.participant.left`,`application/vnd.amazonaws.connect.event.transfer.succeeded`,`application/vnd.amazonaws.connect.event.transfer.failed`,`application/vnd.amazonaws.connect.message.interactive`,`application/vnd.amazonaws.connect.event.chat.ended`, etc. 
+ `MessageVisibility`: valores posibles: `AGENT`, `CUSTOMER`, `ALL`.

## Ejemplo de carga de SNS
<a name="sns-message-payload"></a>

```
{
  "Type" : "Notification",
  "MessageId" : "ccccccccc-cccc-cccc-cccc-ccccccccccccc",
  "TopicArn" : "arn:aws:sns:us-west-2:009969138378:connector-svc-test",
  "Message" :  "{\"AbsoluteTime\":\"2021-09-08T13:28:24.656Z\",\"Content\":\"help\",\"ContentType\":\"text/plain\",\"Id\":\"333333333-be0d-4a44-889d-d2a86fc06f0c\",\"Type\":\"MESSAGE\",\"ParticipantId\":\"bbbbbbbb-c562-4d95-b76c-dcbca8b4b5f7\",\"DisplayName\":\"Jane\",\"ParticipantRole\":\"CUSTOMER\",\"InitialContactId\":\"33333333-abc5-46db-9ad5-d772559ab556\",\"ContactId\":\"33333333-abc5-46db-9ad5-d772559ab556\"}",
  "Timestamp" : "2021-09-08T13:28:24.860Z",
  "SignatureVersion" : "1",
  "Signature" : "examplegggggg/1tEBYdiVDgJgBoJUniUFcArLFGfg5JCvpOr/v6LPCHiD7A0BWy8+ZOnGTmOjBMn80U9jSzYhKbHDbQHaNYTo9sRyQA31JtHHiIseQeMfTDpcaAXqfs8hdIXq4XZaJYqDFqosfbvh56VPh5QgmeHTltTc7eOZBUwnt/177eOTLTt2yB0ItMV3NAYuE1Tdxya1lLYZQUIMxETTVcRAZkDIu8TbRZC9a00q2RQVjXhDaU3k+tL+kk85syW/2ryjjkDYoUb+dyRGkqMy4aKA22UpfidOtdAZ/GGtXaXSKBqazZTEUuSEzt0duLtFntQiYJanU05gtDig==",
  "SigningCertURL" : "https://sns.us-west-2.amazonaws.com/SimpleNotificationService-11111111111111111111111111111111.pem",
  "UnsubscribeURL" : "https://sns.us-west-2.amazonaws.com/?Action=Unsubscribe&SubscriptionArn=arn:aws:sns:us-west-2:000000000000:connector-svc-test:22222222-aaaa-bbbb-cccc-333333333333",
  "MessageAttributes" : {
    "InitialContactId" : {"Type":"String","Value":"33333333-abc5-46db-9ad5-d772559ab556"},
    "MessageVisibility" : {"Type":"String","Value":"ALL"},
    "Type" : {"Type":"String","Value":"MESSAGE"},
    "AccountId" : {"Type":"String","Value":"999999999999"},
    "ContentType" : {"Type":"String","Value":"text/plain"},
    "InstanceId" : {"Type":"String","Value":"dddddddd-b64e-40c5-921b-109fd92499ae"},
    "ContactId" : {"Type":"String","Value":"33333333-abc5-46db-9ad5-d772559ab556"},
    "ParticipantRole" : {"Type":"String","Value":"CUSTOMER"}
  }
}
```

# Solución de problemas con la transmisión de mensajes en Amazon Connect
<a name="troubleshoot-message-streaming"></a>

## Los mensajes no se publican en SNS
<a name="message-not-published-to-sns"></a>

Cuando esto sucede, recomendamos comprobar la información en [Paso 1: crear tema de SNS estándar](chat-message-streaming.md#step1-chat-streaming):
+ Asegúrese de que utiliza SNS estándar y no [Amazon SNS FIFO (primero en entrar, primero en salir)](https://docs.aws.amazon.com/sns/latest/dg/sns-fifo-topics.html). Actualmente, la transmisión de mensajes solo APIs admite el SNS estándar para la transmisión de mensajes en tiempo real.
+ Asegúrese de que en su cuenta se ha aplicado correctamente un permiso basado en recursos de SNS.
  + Si se habilita el cifrado del servidor, deberá conceder a la misma entidad principal de servicio de Amazon Connect permiso para cifrar y descifrar.

## El flujo no se inicia
<a name="contact-flow-not-starting"></a>

Si utiliza la transmisión de mensajes APIs en lugar de websockets, envíe un evento de confirmación de conexión; consulte. [Paso 4: crear la conexión de participante](chat-message-streaming.md#step4-chat-streaming) Esto es sinónimo de conectarse a websocket. El flujo comienza solo después del evento de confirmación de conexión.

Llame [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html)después [StartContactStreaming](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartContactStreaming.html)para marcarlo `Customer` como conectado; consulte. [Paso 3: habilitar el streaming de mensajes en el contacto](chat-message-streaming.md#step3-chat-streaming) Esto garantiza que los mensajes se envíen después de que haya confirmado que el cliente está preparado para recibirlos.

## ¿No se ha resuelto el problema?
<a name="other-issues-message-streaming"></a>

Si después de probar las soluciones anteriores sigues teniendo problemas con la transmisión de mensajes, ponte en contacto con nosotros Soporte para obtener ayuda. 

Los administradores de Amazon Connect pueden elegir una de las siguientes opciones para contactar con el servicio de asistencia:
+ Si tiene una cuenta de AWS Support, vaya al [Support Center](https://console.aws.amazon.com/support/home) y envíe un ticket.
+ De lo contrario, abra la [Consola de administración de AWS](https://console.aws.amazon.com/) y elija **Amazon Connect**, **Asistencia** y **Crear caso**.

Es útil facilitar la siguiente información:
+ ID/ARN de la instancia del centro de contacto. Para encontrar el ARN de instancia, consulte [Búsqueda del ARN o del ID de instancia de Amazon Connect](find-instance-arn.md). 
+ Su región. 
+ Una descripción detallada del problema.

# Personalización de las experiencias de flujo de chat mediante la integración de participantes personalizados en Amazon Connect
<a name="chat-customize-flow"></a>

Puede integrar otras soluciones, como bots, con el chat de Amazon Connect para crear experiencias de flujo de chat personalizadas.

A continuación, encontrará información general sobre cómo puede personalizar su experiencia de flujo de chat. Implemente estos pasos para cada segmento de chat una vez iniciada la conversación de chat. Te recomendamos añadir un [Función de AWS Lambda ](invoke-lambda-function-block.md) bloque al que llamar APIs en tu flujo de chat. 

**importante**  
Agregue un bloque [Reproducir pregunta](play.md) antes de un bloque [Función de AWS Lambda ](invoke-lambda-function-block.md). Esto solo es necesario cuando un bloque de **Invoke AWS Lambda** es el primer bloque del flujo de chat entrante.

1.  [Habilite la transmisión en tiempo real de los mensajes de chat](chat-message-streaming.md). 

1. Llama a la [CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html)API Amazon Connect para añadir un participante personalizado (`ParticipantRole`=`CUSTOM_BOT`) al contacto del chat.

   1. Para obtener información sobre cómo crear el cliente SDK para llamar a Amazon Connect APIs, consulte los siguientes temas:
      + [Clase AmazonConnectClientBuilder](https://docs.aws.amazon.com/AWSJavaSDK/latest/javadoc/com/amazonaws/services/connect/AmazonConnectClientBuilder.html)
      + [Creación de clientes de servicio](https://docs.aws.amazon.com/sdk-for-java/v1/developer-guide/creating-clients.html)

   1. Conserva el `ParticipantToken` que obtengas [CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html)para llamar [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html). `CreateParticipantConnection`devuelve un`ConnectionToken`, que puede utilizar para llamar a otro participante de Amazon Connect APIs. 

      Cuando llames [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html)para crear una conexión para un participante personalizado:
      + Establezca `ConnectParticipant` a `True` para marcar al participante personalizado como conectado para el streaming de mensajes.
      + Haga clic `CONNECTION_CREDENTIALS` para llamar al `Type` siguiente servicio de asistencia al participante de Amazon Connect APIs.
      + Se debe llamar a `CreateParticipantConnection` en los 15 segundos posteriores de la llamada a `CreateParticipant`.

1. Una vez que el participante se haya añadido al contacto, podrá intercambiar mensajes con el cliente mediante el servicio de participantes de Amazon Connect APIs.

1. Para desconectar al participante, llama a la [ DisconnectParticipant](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_DisconnectParticipant.html)API. 

**nota**  
No se puede agregar un participante personalizado a un chat cuando ya hay un agente o un bot de Amazon Lex en el contacto. 
Un participante personalizado se desconectará cuando un agente o bot de Amazon Lex se una a un contacto.
Solo puede haber un participante personalizado en un contacto.
A un participante personalizado no se le permite acceder a los archivos adjuntos que un cliente pueda cargar.

Recomendamos configurar cuánto tiempo puede chatear un participante personalizado con un contacto:
+ Defina la propiedad **Tiempo de espera** en el bloque [Wait](wait.md) para `ParticipantRole` = `CUSTOM_BOT`.
+ Si el participante del bot personalizado no se desconecta antes del tiempo de espera, el contacto se enruta por la ramificación **Tiempo caducado**. Esto le permite decidir qué bloque se ejecutará a continuación para resolver la consulta del cliente.

**nota**  
Si un contacto se desvía por la ramificación **Tiempo caducado**, no se desconecta del contacto. Debe llamar a la [ DisconnectParticipant](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_DisconnectParticipant.html)API para desconectar al participante.

## Activación de temporizadores para los clientes que se unan a un participante personalizado
<a name="integrate-bot-extension-client"></a>

Puede activar temporizadores en los clientes que se unan a participantes personalizados, como los bots personalizados. Esto le permite detectar el momento en que un cliente deja de responder para poder dar por finalizada la conversación con el bot y avanzar al siguiente paso del proceso. Al eliminar a los participantes inactivos, puede reducir el número de chats abiertos en los que un cliente no responde e interactúa con un participante personalizado.

Realice los siguientes pasos para integrar una extensión de bot personalizada para participantes inactivos y, si lo desea, configure valores de temporización personalizados. En estos pasos, se da por hecho que ya utiliza la característica de participante personalizado para el chat. 

1. Antes de que el participante personalizado se una al chat, invoca la [UpdateParticipantRoleConfig](https://docs.aws.amazon.com/connect/latest/APIReference/API_UpdateParticipantRoleConfig.html)API del cliente.

   1. Los temporizadores se activan solo para el cliente. Los participantes personalizados no tienen temporizadores de participantes inactivos ni de desconexión automática. 

   1. Puede elegir el método para invocar la API. 

   1. Los valores establecidos en este paso se mantendrán durante toda la vida del chat. Si desea utilizar valores de temporizador diferentes para la **interacción entre el cliente y el agente**, consulte el paso 2. 

   1. Si su cliente ya está configurado de esta manera, no necesita realizar ninguna otra acción para integrar su participante personalizado. 

1. (Opcional) Configuración de temporizadores y sus valores que sean diferentes durante la interacción entre el **cliente y el agente** que durante la interacción entre el **cliente y el participante personalizado**:
   + Antes de que el agente se una al chat, vuelve a invocar la [UpdateParticipantRoleConfig](https://docs.aws.amazon.com/connect/latest/APIReference/API_UpdateParticipantRoleConfig.html)API con las configuraciones que desees.

Para obtener más información sobre los temporizadores de chats, consulte [Configuración de los tiempos de espera para los participantes en el chat](setup-chat-timeouts.md).

### Temporizadores de inicio
<a name="starting-timers"></a>

El cliente comienza a funcionar cuando el participante personalizado establece una conexión con él mediante la [CreateParticipantConnection](https://docs.aws.amazon.com/connect/latest/APIReference/API_connect-participant_CreateParticipantConnection.html)API.

### Qué ocurre cuando los participantes no compatibles se unen a un chat con un participante personalizado
<a name="non-compatible-participants"></a>

A continuación, se muestra lo que ocurre cuando un agente o un participante del bot Lex se une a un chat con un participante personalizado y estos participantes no son compatibles: 

1. El participante personalizado se desconecta automáticamente del chat. 

1. Se cancelan todos los temporizadores previamente activos y se crean nuevos temporizadores para los participantes conectados (si los temporizadores están configurados).

1. Cada nuevo temporizador también se actualiza con la configuración más reciente (si es necesario). Esto establece de forma efectiva una nueva sesión inactiva para el nuevo grupo de participantes activos en el chat.

### Interacción con el temporizador del bloque de espera
<a name="interaction-wait-block-timer"></a>

El temporizador de inactividad no afecta al funcionamiento del bloque [Wait](wait.md). 

El temporizador del bloque de **espera**, que se inicia cuando el contacto del chat entra en un bloque de **espera**, sigue funcionando. Si el temporizador del bloque de **espera** vence, el contacto reanuda el flujo y pasa a la ramificación **Tiempo caducado**, independientemente de si algún temporizador del participante inactivo está activo o no.

## Consejos para la solución de problemas
<a name="ts-chat-custom-bot"></a>
+ `ResourceNotFoundException`: 

  Si obtiene un `ResourceNotFoundException` para el participante personalizado al llamar a la API `CreateParticipantConnection`, compruebe si se ha llamado a la API `CreateParticipantConnection` en los 15 segundos siguientes de la API `CreateParticipant`.
+ `AccessDeniedException`: 

  Si recibe un error `AccessDeniedException` y el rol del participante es CUSTOM\$1BOT, significa que el bot está intentando acceder a los archivos adjuntos. El rol de participante de CUSTOM\$1BOT no permite acceder a los archivos adjuntos que suban los clientes.

# Configuración de la autenticación de clientes en Amazon Connect para los contactos de chat
<a name="customer-auth"></a>

Puede pedirles a sus clientes que inicien sesión y se autentiquen durante un chat. Por ejemplo, a los clientes no autenticados que interactúen con un bot de chat se les puede pedir que inicien sesión antes de ser redireccionados a un agente. 

Esta capacidad integrada aprovecha Perfiles de clientes de Amazon Connect y [Amazon Cognito](https://aws.amazon.com/cognito/). El uso de Perfiles de clientes, que ya está [activado](enable-customer-profiles.md) en su instancia de Amazon Connect, no conlleva costos adicionales si ha elegido el ajuste predeterminado durante la configuración. Para obtener más información sobre los precios de Amazon Cognito, consulte la página [Precios de Amazon Cognito](https://aws.amazon.com/cognito/pricing/).

Cómo configurar la autenticación del cliente para el chat:

1. [Habilite la autenticación de clientes](enable-connect-managed-auth.md#enable-customer-auth) para su instancia de Amazon Connect.

1. [Habilitación del mensaje de autenticación](enable-connect-managed-auth.md#enable-auth-message).

1. Agregue un bloque [Autenticar al cliente](authenticate-customer.md) a su flujo.

Si su centro de contacto utiliza una solución de autenticación existente externa a Amazon Connect, consulte [Autenticación previa al chat](pre-chat-auth.md).

# Habilitación de la autenticación del cliente para los widgets de comunicación alojados
<a name="enable-connect-managed-auth"></a>

En este tema se explica cómo configurar la autenticación si utiliza el widget de comunicación alojado en Amazon Connect para chatear. Usted activa la autenticación de clientes para su instancia de Amazon Connect y, a continuación, habilita un mensaje de autenticación con un enlace que abre una ventana emergente hacia la interfaz de usuario alojada en Amazon Cognito. 

## Políticas de IAM obligatorias
<a name="auth-page-iam-policies"></a>

Si utiliza políticas de IAM personalizadas para administrar el acceso a la consola de Amazon Connect, consulte [Permisos necesarios para las políticas de IAM personalizadas](security-iam-amazon-connect-permissions.md) para obtener una lista de permisos necesarios para acceder a la página **Autenticación de clientes**.

## Habilitación de la autenticación de clientes en su instancia de Amazon Connect
<a name="enable-customer-auth"></a>

1. Abra la consola Amazon Connect en [https://console.aws.amazon.com/connect/](https://console.aws.amazon.com/connect/).

1. En la página de instancias, elija el alias de instancia. El alias de instancia también es su **nombre de instancia**, que aparece en su URL de Amazon Connect. En la siguiente imagen se muestra la página de **instancias del centro de contacto virtual de Amazon Connect**, con un recuadro alrededor del alias de instancia.  
![\[Página de instancias del centro de contacto virtual de Amazon Connect, alias de instancia.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/instance.png)

1. En el menú de navegación de la izquierda, seleccione **Aplicaciones**, **Autenticación de clientes**. Si no ve esta opción, es posible que no esté disponible en su AWS región. Para obtener más información sobre dónde está disponible la autenticación de clientes, consulte [Disponibilidad de autenticación de clientes por región](regions.md#customerauthentication_region). 

1. En la página **Autenticación de clientes**, elija **Crear grupo de usuarios en Amazon Cognito**. Esto abre la consola de Amazon Cognito.

1. Cree un nuevo grupo de usuarios con su proveedor de identidad. Para obtener instrucciones, consulte [Introducción a los grupos de usuarios](https://docs.aws.amazon.com/cognito/latest/developerguide/getting-started-user-pools.html) en la *Guía para desarrolladores de Amazon Cognito*. 
**nota**  
Debe seleccionar **No generar un secreto de cliente** al configurar el cliente de aplicación de Amazon Cognito. Solo se admiten clientes de aplicaciones de Amazon Cognito sin secretos de cliente. Para obtener más información, consulte [Application-specific settings with app clients](https://docs.aws.amazon.com/cognito/latest/developerguide/user-pool-settings-client-apps.html) en la *Guía para desarrolladores de Amazon Cognito*.

1. Tras crear un grupo de usuarios de Amazon Cognito, vuelva a la página **Autenticación de clientes** y seleccione **Grupo de usuarios asociados**.

1. En la sección **Grupo de usuarios**, elija el grupo de usuarios que creó en el menú desplegable y, a continuación, seleccione **Confirmar**.

   Esto asocia el grupo de usuarios a su instancia de Amazon Connect. Permite que el bloque de flujo [Autenticar al cliente](authenticate-customer.md) acceda al grupo de usuarios.

1. Continúe con el siguiente paso:[Habilitación del mensaje de autenticación](#enable-auth-message).

## Habilitación del mensaje de autenticación
<a name="enable-auth-message"></a>

Para habilitar el mensaje de autenticación, añada la variable del fragmento de parámetros de autenticación al final del fragmento. Para obtener más información sobre cómo agregar variables de fragmentos, consulte [Campos de fragmentos de widgets compatibles en Amazon Connect que se pueden personalizar](supported-snippet-fields.md). El código siguiente es un ejemplo del fragmento de parámetros de autenticación que debe agregar.

```
amazon_connect('authenticationParameters', { 
    redirectUri: 'your_redirect_url', // https://example.com 
    identityProvider: 'your_identity_provider_name' //optional
 });
```

Donde:
+ `redirectUri` es el URI de redireccionamiento que configuró en su IdP (proveedor de identidad) y en Amazon Cognito. Es aquí donde se dirige automáticamente a su cliente después de iniciar sesión. En esta página puedes comprobar los parámetros de la URL y si hay un código y un estado, puedes llamar a la [UpdateParticipantAuthentication](https://docs.aws.amazon.com/connect/latest/APIReference/API_UpdateParticipantAuthentication.html)API con esos valores. Una vez finalizada la llamada a la API, cierra la ventana emergente y el cliente vuelve a la experiencia de chat.
+ `identityProvider` es el nombre del proveedor de identidad que ha configurado en Amazon Cognito. Este campo es opcional. Si se proporciona un valor, el enlace de inicio de sesión dirige automáticamente al cliente a la página de inicio de sesión del proveedor de identidad en lugar de a la página de inicio de sesión gestionada por Amazon Cognito, donde tendrá que seleccionar un proveedor de identidad para iniciar sesión.

 Cuando el flujo llegue al bloque [Autenticar al cliente](authenticate-customer.md), puede registrar una devolución de llamada y almacenar el estado localmente para validarlo en el URI de redireccionamiento, como se muestra en el siguiente fragmento de código de ejemplo:

```
amazon_connect('registerCallback', {
       'AUTHENTICATION_INITIATED' : (eventName, data) => {
            console.log(data.state)
        },
      });
```

Después de habilitar la autenticación del cliente, agregue un bloque [Autenticar al cliente](authenticate-customer.md) al flujo. Este bloque autentica los contactos del chat durante el flujo y los dirige a rutas específicas en función del resultado de la autenticación.

# Autenticación previa al chat mediante la API Amazon Connect StartChatContact
<a name="pre-chat-auth"></a>

Los clientes que se autentiquen en su sitio web o aplicación móvil antes de iniciar un chat pueden ser reconocidos como autenticados al iniciar un chat. Puede hacerlo mediante la [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)API.

Después de que un cliente autenticado inicie un chat, defina su estado mediante los parámetros de la [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)API, tal y como se muestra en el siguiente fragmento de código:

```
"SegmentAttributes": {
    "connect:CustomerAuthentication" : { 
        "ValueMap": {
            "Status": {
                "ValueString": "AUTHENTICATED"
            }
        }
    },
    "CustomerId": "12345"
```

`CustomerId` es un campo opcional para identificar al cliente. Puede ser un ID de Perfiles de clientes de Amazon Connect o un identificador personalizado de un sistema externo, como un CRM.

# Habilite la transmisión de mensajes para un chat con tecnología de IA
<a name="message-streaming-ai-chat"></a>

Amazon Connect admite la transmisión de mensajes para interacciones de chat impulsadas por IA. Las respuestas de los agentes de IA aparecen progresivamente a medida que se generan, lo que mejora la experiencia del cliente durante las conversaciones.

Las siguientes son las opciones de integración, junto con las características de cada una de ellas:
+ Agentes de Amazon Connect 
  + Elimina las limitaciones de tiempo de espera de Amazon Lex
  + Proporciona mensajes de gestión logística durante el procesamiento (como «Un momento para revisar tu cuenta»)
  + Muestra las respuestas parciales con texto progresivo (burbuja de texto creciente)
+ Bots de terceros a través de Amazon Lex o Lambda
  + Elimina las limitaciones de tiempo de espera de Amazon Lex
  + Comportamiento de respuesta estándar de los bots

Las instancias creadas a partir de diciembre de 2025 se incorporan automáticamente a esta función. En el caso de las instancias existentes, debes habilitar la transmisión de mensajes de forma manual mediante la API o a través de la consola.

## Habilite la transmisión de mensajes mediante la API
<a name="message-streaming-enable-api"></a>

Usa la [UpdateInstanceAttribute](https://docs.aws.amazon.com/connect/latest/APIReference/API_UpdateInstanceAttribute.html)API para habilitar la transmisión de mensajes. Establezca el atributo `MESSAGE_STREAMING` en `true`.

```
aws connect update-instance-attribute \
  --instance-id your-instance-id \
  --attribute-type MESSAGE_STREAMING \
  --value true
```

Para excluirse, defina el atributo en`false`.

## Habilite la transmisión de mensajes mediante la consola
<a name="message-streaming-enable-console"></a>

Para las instancias recién creadas, la transmisión de mensajes está habilitada de forma predeterminada.

Para las instancias existentes:

1. Abre la consola Amazon Connect y elige tu instancia.

1. En el panel de navegación, seleccione **Flows** > **Amazon Lex bots**.

1. En la **configuración de los bots de Lex**, selecciona **Habilitar la transmisión de mensajes en Amazon Connect**.

**nota**  
Al habilitar la transmisión de mensajes mediante la consola, el `lex:RecognizeMessageAsync` permiso necesario se añade automáticamente a la política basada en los recursos del alias del bot. Cuando utilices la API, debes añadir este permiso manualmente.

![\[Activa la opción de transmisión de mensajes en la consola Amazon Connect.\]](http://docs.aws.amazon.com/es_es/connect/latest/adminguide/images/message-streaming-ai-chat-enablement.png)


## Actualizar los permisos del bot Lex
<a name="message-streaming-lex-permissions"></a>

Una vez habilitada la transmisión de mensajes, Amazon Connect necesita permiso para llamar a la API Amazon Lex:

```
lex:RecognizeMessageAsync
```

Debe actualizar la política basada en recursos para cada alias de bot de Amazon Lex que utilice la instancia de Amazon Connect.

### ¿Cuándo actualizar la política basada en los recursos del bot
<a name="message-streaming-when-to-update"></a>
+ **Instancias nuevas**: cualquier alias de bot de Amazon Lex que se haya asociado recientemente tendrá `lex:RecognizeMessageAsync` en su política de alias de forma predeterminada.
+ **Instancias existentes con bots existentes**: si la instancia utilizaba anteriormente Amazon Lex y ahora habilitas la transmisión de mensajes, debes actualizar la política basada en recursos en todos los alias de bots de Amazon Lex asociados para incluir el nuevo permiso.

### Fragmento de ejemplo para la política basada en recursos del alias del bot Lex
<a name="message-streaming-rbp-example"></a>

```
{
  "Version": "2012-10-17",		 	 	 
  "Statement": [
    {
      "Sid": "connect-us-west-2-MYINSTANCEID",
      "Effect": "Allow",
      "Principal": {
        "Service": "connect.amazonaws.com"
      },
      "Action": [
        "lex:RecognizeMessageAsync",
        "lex:RecognizeText",
        "lex:StartConversation
      ],
      "Resource": "arn:aws:lex:us-west-2:123456789012:bot-alias/MYBOT/MYBOTALIAS",
      "Condition": {
        "StringEquals": {
          "AWS:SourceAccount": "123456789012"
        },
        "ArnEquals": {
          "AWS:SourceArn": "arn:aws:connect:us-west-2:123456789012:instance/MYINSTANCEID"
        }
      }
    }
  ]
}
```

Puede añadir este permiso llamando a la [UpdateResourcePolicy](https://docs.aws.amazon.com/lexv2/latest/APIReference/API_UpdateResourcePolicy.html)API de Amazon Lex para actualizar la política basada en recursos del alias del bot de Amazon Lex a fin de incluir la `lex:RecognizeMessageAsync` acción para el recurso ARN de la instancia de Amazon Connect.

**importante**  
Actualmente, esta función no permite volver al mismo bloque de [Bloque de flujo Amazon Connect: Obtener la entrada del cliente](get-customer-input.md) flujo ni reutilizar un bot de Amazon Lex con el mismo alias en otro bloque de **entrada de Get customer**. En su lugar, cree un nuevo bloque de **entrada Get customer** con un alias de bot de Amazon Lex diferente.

## Límites de tiempo de espera
<a name="message-streaming-timeout-limits"></a>

Los siguientes límites de tiempo de espera se aplican a las experiencias de chat:
+ **Experiencia de chat estándar**: tiempo de espera de 10 segundos
+ **Transmisión de chat**: tiempo de espera de 60 segundos

# Habilite la redacción de datos confidenciales y el procesamiento de mensajes durante el vuelo
<a name="redaction-message-processing"></a>

Amazon Connect admite el procesamiento de mensajes que intercepta y modifica los mensajes de chat antes de que lleguen a cualquier participante. Esta capacidad permite la redacción automática de datos confidenciales y el procesamiento personalizado de los mensajes, lo que ayuda a las empresas a mantener los estándares de cumplimiento y seguridad.

Las siguientes son las opciones de procesamiento, junto con las características de cada opción:
+ Redacción de datos confidenciales integrada
  + Detecta y elimina automáticamente los números de tarjetas de crédito, los números de seguro social y otra información de identificación personal
  + Admite varios idiomas, incluidas las variantes en inglés, francés, portugués, alemán, italiano y español. Para obtener una lista de los idiomas compatibles con la supresión de Contact Lens, consulte [Idiomas compatibles con Amazon Connect](supported-languages.md).
  + Elija redactar todas las entidades de datos confidenciales seleccionadas o todas
  + Sustitúyalos por marcadores de posición genéricos ([PII]) o marcadores de posición específicos de la entidad ([NAME], [CREDIT\$1CARD])
+ Procesadores de mensajes personalizados (mediante Lambda). Para obtener más información, consulte [¿Qué es Lambda?](https://docs.aws.amazon.com/lambda/latest/dg/welcome.html) en la Guía del *desarrollador de AWS Lambda*.
  + Integre servicios de terceros para la traducción de idiomas
  + Aplica filtros de blasfemias
  + Transforma los mensajes mediante servicios AI/LLM 
  + Implemente modificaciones en los mensajes específicas de la empresa

Para configurar el procesamiento de mensajes, defina las reglas de redacción en el bloque **Establecer el comportamiento de registro y análisis**. Para obtener más información, consulte [Habilitación de la supresión de datos confidenciales](enable-analytics.md#enable-redaction). También puede especificar una función Lambda para el procesamiento personalizado.

Su procesador Lambda personalizado recibirá un JSON de entrada con el siguiente formato:

```
{
  "version": "1.0",
  "instanceId": "string",
  "associatedResourceArn": "string",
  "chatContent": {
    "absoluteTime": "string",
    "content": "string",
    "contentType": "string",
    "id": "string",
    "participantId": "string",
    "displayName": "string",
    "participantRole": "string",
    "initialContactId": "string",
    "contactId": "string"
  }
}
```

Y generará un JSON en el siguiente formato:

```
{
  "status": "string", // "PROCESSED"|"APPROVED"|"FAILED"|"REJECTED"
  "result": {
    "processedChatContent": {
      "content": "string",
      "contentType": "string" // "text/plain"|"text/markdown"|"application/json"
    }
  }
}
```

El contenido del chat procesado sustituirá al mensaje original cuando se publique para los participantes del chat.