Adición de una interfaz de usuario de chat al sitio web alojado en Amazon Connect

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.

   

2. 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.

   

3. 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.

4. 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. La siguiente imagen muestra las opciones que permiten a los clientes recibir mensajes y chats.

   

5. 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.

   

Estilos de botón

1. Para elegir los colores del fondo del botón, introduzca valores hexadecimales (códigos de color HTML).

2. 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.

2. 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 en la Guía del usuario de Amazon Simple Storage Service.

   2. 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 información sobre cómo hacer que un objeto S3 sea de acceso público, consulte Paso 2: agregar una política de bucket 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.

2. • Nombre para mostrar del mensaje del sistema: escriba un nuevo nombre para mostrar que sustituya al predeterminado. El valor predeterminado es SYSTEM_MESSAGE.

   • 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.

3. 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).

4. 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).

5. Elija Guardar y continuar.

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.

   

   importante

   • Compruebe que las URL de su sitio web son válidas y no contienen errores. Incluya la URL completa que comience por https://.

   • Le recomendamos utilizar https:// para sus sitios web y aplicaciones de producción.

2. En Agregar seguridad a su widget de comunicación, le recomendamos que elija Sí y que trabaje con el administrador de su sitio web para configurar los servidores web de modo que emitan tokens web JSON (JWT) 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.

   

   Si elige Sí, obtendrá lo siguiente:

   • Amazon Connect proporciona una clave de seguridad de 44 caracteres en la siguiente página que puede utilizar para crear tokens web JSON (JWT).

   • 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. Pida al administrador de su sitio web que configure los servidores web para emitir JWT mediante esta clave de seguridad.

3. Seleccione Guardar.