Agregar una interfaz de usuario de chat al sitio web

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. Cuando termines, tendrás un fragmento de código corto que podrás añadir a tu 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.

Temas

• Campos de fragmentos de widgets compatibles
• Navegadores compatibles
• Paso 1: personalizar el widget de comunicaciones
• Paso 2: especificar los dominios del sitio web en los que espera mostrar el widget de comunicaciones
• Paso 3: confirmar y copiar el código del widget de comunicaciones y las claves de seguridad
• ¿Recibe mensajes de error?
• Más personalizaciones para el widget de comunicaciones
• Personalización del comportamiento de lanzamiento del widget y del icono del botón
• Transferencia del nombre para mostrar del cliente cuando se inicializa un chat
• Transferencia de atributos de contacto cuando se inicializa un chat
• Método alternativo: pasa los atributos de contacto directamente desde un fragmento de código
• Personalizaciones adicionales del chat
• Descargar la transcripción del chat
• Descarga y personalización de nuestro ejemplo de código abierto
• Inicio de chats con sus propias aplicaciones
• Notificaciones del navegador
• Transfiera propiedades personalizadas para anular los valores predeterminados del widget de comunicaciones
• Investigación de problemas comunes al agregar una interfaz de usuario de chat al sitio web

Navegadores compatibles

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 Notificaciones del navegador.

Paso 1: personalizar el widget de comunicaciones

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

1. Inicia sesión en el sitio web Amazon Connect de administración en https://instance name.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. Elija los colores del fondo del botón introduciendo 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. Logotipo URL: inserte un URL banner en su logotipo desde un bucket de Amazon S3 u otra fuente 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 del chat del agente: elija los colores de las burbujas de mensajes del agente introduciendo valores hexadecimales (códigos de HTML color).

4. Color de las burbujas de chat del cliente: introduzca valores hexadecimales (códigos de HTML color) para elegir los colores de las burbujas de mensajes del cliente.

5. Elija Guardar y continuar.

Paso 2: especificar los dominios del sitio web en los que espera mostrar el widget de comunicaciones

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

   • Comprueba que tu sitio web URLs sea válido y no contenga errores. Incluye el texto completo URL que empiece por https://.

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

2. 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 los servidores web a fin de emitir JSON Web Tokens (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.

   

   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 JSON Web Tokens ()JWTs.

   • Amazon Connect añade una función de devolución de llamada en el script de inserción del widget de comunicaciones que comprueba si hay un token JSON web (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 JWTs utilizar esta clave de seguridad.

3. Seleccione Guardar.

Paso 3: confirmar y copiar el código del widget de comunicaciones y las claves de seguridad

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, también puede copiar las claves secretas para crearlas.

Clave de seguridad

Utilice esta clave de seguridad de 44 caracteres para generar fichas JSON web 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.

Cuando sus clientes interactúan con el icono de iniciar un chat en su sitio web, el widget de comunicaciones solicita a su servidor web una. JWT Cuando JWT se proporcione, 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 tiene éxito, esto confirma que la JWT ha emitido su servidor web y Amazon Connect redirige la solicitud de chat a los agentes de su centro de contacto.

JSONDetalles del Web Token

• Algoritmo: HS256

• Notificaciones:

  • sub: widgetId

    widgetIdReemplácelo por el suyo propiowidgetId. Para encontrar el tuyowidgetId, consulta el ejemplo que aparece enScript del widget de comunicaciones.

  • iat: *hora de emisión.

  • exp: *vencimiento (10 minutos máximo).

  * Para obtener información sobre el formato de fecha, consulte el siguiente documento del Grupo de Trabajo de Ingeniería de Internet (IETF): JSONWeb Token (JWT), página 5.

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

payload = {
'sub': widgetId, // don't add single quotes, such as 'widgetId'
'iat': datetime.utcnow(),
'exp': datetime.utcnow() + timedelta(seconds=JWT_EXP_DELTA_SECONDS)
}

header = {
'typ': "JWT",
'alg': 'HS256'
}

encoded_token = jwt.encode((payload), CONNECT_SECRET, algorithm=JWT_ALGORITHM, headers=header) // CONNECT_SECRET is the security key provided by Amazon Connect

Script del widget de comunicaciones

En la siguiente imagen se muestra un ejemplo del 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.

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.

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?

Si encuentra mensajes de error, consulte Investigación de problemas comunes al agregar una interfaz de usuario de chat al sitio web.

Más personalizaciones para el widget de comunicaciones

Consulte los siguientes temas para saber qué más puede hacer para personalizar la experiencia de chat:

• Personalización del comportamiento de lanzamiento del widget y del icono del botón

• Transferencia del nombre para mostrar del cliente cuando se inicializa un chat

• Transferencia de atributos de contacto cuando se inicializa un chat

• Habilitación de los recibos de mensajes entregados y leídos en la interfaz de usuario de chat