Cómo configurar la experiencia de chat de autoservicio de tu agente de principio a fin - Amazon Connect
¿Qué es la transmisión de mensajes mediante IA?Estado de habilitaciónCrear un widget de comunicacionesPon a prueba la experiencia de streaming

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.

Cómo configurar la experiencia de chat de autoservicio de tu agente de principio a fin

nota

Los agentes de IA de Orchestration requieren que la transmisión de chat esté habilitada para los contactos de chat. Si no está habilitada la transmisión de chat, algunos mensajes no se procesarán. Consulte Habilite la transmisión de mensajes para un chat con tecnología de IA.

¿Qué es la transmisión de mensajes mediante IA?

La transmisión de mensajes con IA es una función de Amazon Connect que permite mostrar progresivamente las respuestas de los agentes de IA durante las interacciones de chat. En lugar de esperar a que la IA genere una respuesta completa antes de mostrar algo al cliente, la transmisión muestra el texto a medida que se genera, lo que crea una experiencia de conversación más natural.

Cómo funciona

Con las respuestas de chat estándar, los clientes esperan a que la IA genere su respuesta completa y, a continuación, el mensaje completo aparece de una sola vez. Con la transmisión de mensajes mediante IA, los clientes ven una burbuja de texto cada vez mayor, en la que las palabras aparecen progresivamente a medida que la IA las genera, de forma similar a como cuando alguien escribe en tiempo real.

nota

Documentación oficial: Para obtener la referencia técnica completa, consulteHabilite la transmisión de mensajes para un chat con tecnología de IA.

Ventajas de la visualización de texto progresiva

La transmisión de mensajes mediante IA ofrece varios beneficios clave para la experiencia del cliente:

  • Reducción del tiempo de espera percibido: los clientes ven la actividad de forma inmediata en lugar de mirar fijamente una rueda giratoria

  • Flujo de conversación más natural: el texto progresivo imita la escritura humana, lo que crea una interacción más atractiva

  • Mayor interacción: los clientes pueden empezar a leer la respuesta mientras se está generando

  • Mensajes de cumplimiento: los agentes de IA pueden enviar mensajes provisionales como «Un momento mientras reviso tu cuenta» durante el procesamiento

Chat estándar versus chat en streaming

En la siguiente tabla se compara la experiencia del cliente entre el chat estándar y el chat en streaming:

Aspecto Chat estándar Chat en streaming
Pantalla de respuesta El mensaje completo aparece de una sola vez El texto aparece progresivamente (burbuja creciente)
Experiencia del cliente Espere una respuesta completa con el indicador de carga Vea cómo aparecen las palabras en tiempo real
Tiempo de espera percibido Más tiempo (esperando una respuesta completa) Más corto (respuesta visual inmediata)
Sensación de conversación Transactional Natural, como charlar con una persona
Mensajes de cumplimiento No disponible La IA puede enviar actualizaciones de estado provisionales
Gestión del tiempo de espera de Lex Sujeto a los límites de tiempo de espera de Lex Elimina las limitaciones de tiempo de espera de Lex

Estado de habilitación

La disponibilidad de AI Message Streaming depende de cuándo se creó la instancia de Amazon Connect y de cómo esté configurada.

Habilitación automática para nuevas instancias

Las instancias de Amazon Connect creadas después de diciembre de 2025 tienen habilitada la transmisión de mensajes mediante IA de forma predeterminada. El atributo de MESSAGE_STREAMING instancia se establece automáticamente como true para estas instancias, por lo que no es necesaria ninguna configuración adicional.

importante

Si utilizas una AWS cuenta con una instancia de Amazon Connect creada antes de diciembre de 2025, es posible que tengas que habilitar manualmente la transmisión de mensajes mediante IA. Sigue las instrucciones de la documentación sobre cómo habilitar la transmisión de mensajes para chats con tecnología de IA para comprobar el MESSAGE_STREAMING atributo de tu instancia y habilitarlo si es necesario.

Permisos de Amazon Lex Bot

La transmisión de mensajes mediante IA requiere el lex:RecognizeMessageAsync permiso para funcionar correctamente. Este permiso permite a Amazon Connect invocar la API de reconocimiento de mensajes asíncrono que permite la transmisión de respuestas.

Para nuevas asociaciones de bots de Lex: al asociar un nuevo bot de Amazon Lex a su instancia de Amazon Connect, el lex:RecognizeMessageAsync permiso necesario se incluye automáticamente en la política basada en recursos del bot. No se necesita ninguna configuración adicional.

importante

Si tienes un bot de Amazon Lex que estaba asociado a tu instancia de Amazon Connect antes de que se habilitara la transmisión de mensajes mediante IA, es posible que tengas que actualizar la política basada en recursos del bot para incluir el lex:RecognizeMessageAsync permiso.

Para actualizar tu política actual de bots de Lex:

  1. Navegue hasta la consola Amazon Lex

  2. Seleccione su bot y vaya a la Política basada en recursos

  3. Añada la lex:RecognizeMessageAsync acción a la declaración de política que concede el acceso a Amazon Connect

  4. Guarda la política actualizada

Para obtener instrucciones detalladas, consulte la sección de permisos de los bots Lex en la AWS documentación.

Crear un widget de comunicaciones

El widget de comunicaciones de Amazon Connect es una interfaz de chat integrable que se puede añadir a cualquier sitio web. En esta sección, creará y configurará un widget para probar la transmisión de mensajes mediante IA. Puedes saltarte esta sección si piensas usar tu propio widget de chat para clientes.

  1. En la consola de Amazon Connect, navegue hasta su instancia

  2. Haz clic en Canales en el menú de navegación de la izquierda

  3. Haga clic en el widget de comunicaciones

  4. Verás la página de administración del widget de comunicaciones

nota

¿Qué es el widget de comunicaciones? El widget de comunicaciones es la solución de out-of-the-box chat de Amazon Connect. Proporciona una interfaz de chat totalmente funcional que puedes incrustar en sitios web con un simple JavaScript fragmento. El widget gestiona toda la complejidad que supone establecer conexiones, gestionar sesiones y mostrar mensajes.

Paso 2: Crea un nuevo widget

  1. Haga clic en Añadir widget para crear un nuevo widget de comunicaciones

  2. Escriba la información siguiente:

    • Name: AI-Streaming-Demo-Widget

    • Description: Widget for testing AI Message Streaming

  3. En Opciones de comunicación, asegúrese de seleccionar Añadir chat

  4. Selecciona Self Service Test Flow como flujo de contactos de chat

  5. Haga clic en Guardar y continúe para ir a la página de configuración

Selección del flujo de contactos

Asegúrese de seleccionar un flujo de contactos que:

  • Tiene configurados los ajustes básicos (crea una sesión de IA, un registro, etc.)

  • Rutas a tu bot Lex con la integración de AI Agent

  • Tiene un sistema adecuado de gestión de errores en caso de desconexiones

Si aún no ha creado un flujo de contactos, complete primero la sección Creación del flujo.

Paso 3: Personaliza la apariencia del widget

Personaliza la apariencia de tu widget de chat para que coincida con tu marca y selecciona Guardar y continuar.

Paso 4: Configurar los dominios permitidos

El widget de comunicaciones solo se carga en los sitios web que están explícitamente permitidos. Esta función de seguridad impide el uso no autorizado del widget.

  1. Desplázate hacia abajo hasta Dominios permitidos

  2. Haz clic en Agregar dominio y agrega el siguiente dominio para las pruebas de localhost:

    • http://localhost

  3. Seleccione No en la sección de seguridad

  4. Si planea realizar la implementación en un sitio web de producción más adelante, añada también esos dominios y asegúrese de configurar la seguridad (por ejemplo,https://www.example.com)

Paso 5: Guarda y obtén el código del widget

  1. Haz clic en Guardar y continuar para guardar la configuración de tu widget

  2. Tras crearlo, verás la página de detalles del widget con tu código de inserción

  3. Importante: copia y guarda los siguientes valores del fragmento de código de inserción:

    • URI del cliente: la URL del archivo del widget JavaScript

    • ID del widget: un identificador único para tu widget

    • ID de fragmento: cadena de configuración codificada en Base64

Paso 6: Configurar un entorno de pruebas local

Para probar el widget de forma local, creará un archivo HTML sencillo que cargue el widget de comunicaciones.

  1. Crea una nueva carpeta en tu ordenador para realizar pruebas (por ejemplo,ai-streaming-test)

  2. Descarga la imagen de fondo para la página de demostración y guárdala como background.jpg en tu carpeta de prueba

  3. Crea un nuevo archivo llamado index.html en tu carpeta de prueba con el siguiente contenido:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        body {
            background-image: url("background.jpg");
            background-repeat: no-repeat;
            background-size: cover;
        }
    </style>
    <title>AI Message Streaming Demo</title>
</head>
<body>
    <div id="root"></div>
    <script type="text/javascript">
      (function(w, d, x, id){
        s=d.createElement('script');
        s.src='REPLACE_WITH_CLIENT_URI';
        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', 'REPLACE_WITH_WIDGET_ID');
      amazon_connect('styles', {
        iconType: 'CHAT',
        openChat: { color: '#ffffff', backgroundColor: '#ff9200' },
        closeChat: { color: '#ffffff', backgroundColor: '#ff9200'}
      });
      amazon_connect('snippetId', 'REPLACE_WITH_SNIPPET_ID');
      amazon_connect('supportedMessagingContentTypes', [
        'text/plain',
        'text/markdown',
        'application/vnd.amazonaws.connect.message.interactive',
        'application/vnd.amazonaws.connect.message.interactive.response'
      ]);
      amazon_connect('customStyles', {
        global: { frameWidth: '500px', frameHeight: '900px'}
      });
    </script>
</body>
</html>

Paso 7: Reemplace los valores de los marcadores de posición

Sustituye los valores de los marcadores de posición del archivo HTML por los valores reales de tu widget:

Placeholder Sustituir por Ejemplo
REPLACE_WITH_CLIENT_URI El URI de su cliente del paso 5 https://d2s9x5slqf05.cloudfront.net/amazon-connect-chat-interface-client.js
REPLACE_WITH_WIDGET_ID Su ID de widget del paso 5 amazon_connect_widget_abc123
REPLACE_WITH_SNIPPET_ID Tu ID de fragmento del paso 5 QVFJREFIaWJYbG...(cadena Base64 larga)

Paso 8: Iniciar un servidor web local

Para probar el widget, debe servir el archivo HTML desde un servidor web local. Estas son varias opciones:

Opción A: Python (si está instalado)

python -m http.server 8001
Opción B: Node.js (si está instalado)

npx http-server -p 8001
Opción C: extensión de servidor VS Code Live

  • Instale la extensión «Live Server» en VS Code

  • Haga clic con el botón derecho index.html y seleccione «Abrir con Live Server»

Tras iniciar el servidor, abre tu navegador y navega hasta: http://localhost:8001

Deberías ver la página de demostración con un botón de chat naranja en la esquina inferior derecha.

Pon a prueba la experiencia de streaming

Ahora que tu widget está cargado, es hora de probar la transmisión de mensajes mediante IA y observar cómo se muestra el texto progresivo en acción.

Qué buscar: streaming o no streaming

Comprender la diferencia entre las respuestas en streaming y las que no se transmiten te ayuda a comprobar si la transmisión de mensajes mediante IA funciona:

Comportamiento Sin transmisión (estándar) Transmisión (transmisión de mensajes AI)
Pantalla inicial Indicador de carga o puntos de escritura El texto comienza a aparecer inmediatamente
Apariencia del texto El mensaje completo aparece de una sola vez Las palabras aparecen progresivamente (burbuja creciente)
Tiempo de respuesta Espere hasta que la IA termine de generar Vea la respuesta a medida que se genera
Efecto visual «Pop» de texto completo Texto fluido y fluido, como ver a alguien escribir