Añade el widget Amazon Connect a tu sitio web para aceptar contactos de chat, tareas, correo electrónico y llamadas web

En los temas de esta sección se explica cómo crear y personalizar un widget de comunicaciones para su sitio web. Crearás un formulario de contacto que determine el comportamiento de los contactos creados a través de tu widget y, a continuación, personalizarás el aspecto y la funcionalidad del widget.

Paso 1: Crea un formulario de contacto para tu widget

En este paso, crea y personaliza una vista que determina el comportamiento de los contactos creados a través de su widget.

1. Inicia sesión en el sitio web de Amazon Connect administración enhttps://instance name.my.connect.aws/. En la pestaña Enrutamiento, selecciona Flujos.

2. En la parte superior izquierda, haz clic en Vistas.

3. Selecciona Crear vista.

4. Aquí puede configurar un formulario de contacto para sus clientes mediante el generador sin código. Algunos consejos importantes:

   • El uso del componente de formulario le permitirá vincular las entradas del formulario a su contacto al crearlo. La vinculación de formularios te permitirá recibir información directamente de cualquier persona que interactúe con tu widget y utilizar la información que incluya en el formulario durante la creación del contacto.

   • El componente Connect Action es el elemento más importante del formulario para crear un contacto. Este componente debe usarse sin ningún otro componente de tipo botón en el formulario.

   • Debe haber exactamente un componente de Connect Action para usar el widget Ver con un formulario de contacto.

   • El componente Connect Action admite tres opciones: ConnectActionType

     • StartEmailContact

     • StartTaskContact

     • StartChatContact

     Tanto el correo electrónico como la tarea se pueden usar en un formulario de contacto. Para crear un formulario previo al chat para los contactos del chat, consulteAdición de una interfaz de usuario de chat al sitio web alojado en Amazon Connect.

   • Hay muchas opciones de estilo para los componentes de View, que le permiten personalizar el formulario para adaptarlo a su entorno.

5. Una vez que haya agregado un botón de acción de conexión al formulario, puede establecer valores para los contactos creados por el formulario vinculándolos a las opciones del botón de acción de conexión. Los componentes que desee vincular deben tener el mismo formulario en la vista que en el botón de acción Conectar.

   

   Para la vinculación de formularios se admiten los siguientes componentes:

   • Entrada de formulario

   • Menú desplegable (desactiva la selección múltiple)

   • Selector de fecha

   • Área de texto

   • Selector de tiempo

6. Una vez que la vista esté lista, selecciona Publicar.

Paso 2: Personaliza tu widget de comunicaciones

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

1. Inicie sesión en el sitio web de administración de Amazon Connect enhttps://instance name.my.connect.aws/. Seleccione Personalizar el widget de comunicaciones.

2. En la página de 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, elige una de las opciones de la columna Acciones.

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 de opciones de comunicación, selecciona Añadir formulario de contacto.

5. Seleccione la vista que configuró en el paso anterior. Si el componente Connect Action de la vista no tiene un flujo de contactos establecido, tendrá que configurar uno aquí.

6. Haga clic en Save and Continue (Guardar y continuar).

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.

nota

La vista previa no mostrará el formulario de contacto de View que has creado. Solo se mostrará el estilo del encabezado.

Tipo de pantalla

Puede elegir entre dos tipos de visualización para los widgets del formulario de contacto:

• El botón de acción flotante te permite fijar tu widget como un botón interactivo en la esquina inferior derecha de la página web

• El elemento integrado te permite incrustar tu widget directamente en la página web sin necesidad de pulsar un botón para cargarlo

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.

importante

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.

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

• 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 de S3 sea de acceso público, consulta el paso 2: Añadir una política de compartimentos en el tema Configurar permisos para el acceso a sitios web.

Paso 3: Especifique 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 widget se carga solo en los sitios web que selecciones en este paso.

   Seleccione Agregar dominio para agregar hasta 50 dominios.

   

   Comportamiento de las listas de dominios permitidos:

   • Los subdominios se incluyen automáticamente. Por ejemplo, si permites example.com, también se permiten todos sus subdominios (como sub.example.com).

   • El protocolo http://o https://debe coincidir exactamente con tu configuración. Especifique el protocolo exacto al configurar los dominios permitidos.

   • Todas las rutas URL se permiten 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

   • Comprueba que tu 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.

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 tokens web JSON (JWTs) para las nuevas solicitudes de contacto. Esto le proporciona un mayor control a la hora de iniciar nuevos contactos, incluida la posibilidad de comprobar que las solicitudes 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 tokens web JSON ()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 web JSON (JWT) cuando se inicia un contacto.

     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 eliges esta opción, en el siguiente paso obtendrás una clave de seguridad para todas las solicitudes de contacto iniciadas en tus sitios web. Pide al administrador de tu sitio web que configure tus servidores web para que puedan JWTs utilizar esta clave de seguridad.

3. Seleccione Save.

Paso 4: Confirma y copia 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 optaste por utilizarlos JWTs en el paso 3, también puedes copiar las claves secretas para crearlas.

Clave de seguridad

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.

Cuando sus clientes interactúan con el widget de comunicaciones de su sitio web, el widget solicita un JWT a su servidor web. Cuando se proporcione este JWT, el widget lo incluirá como parte de la solicitud de contacto 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 el JWT lo emitió su servidor web y Amazon Connect redirige la solicitud de contacto a los agentes de su centro de contacto.

Aspectos específicos del token web JSON

• Algoritmo: HS256

• Notificaciones:

  • sub: widgetId

    Reemplace widgetId por su propio widgetId. Para encontrar su widgetId, consulte el ejemplo en Script del widget de comunicaciones.

  • iat: *hora de emisión.

  • exp: *vencimiento (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 StartChatContactAPI.

  • atributos (opcional): objeto con pares string-to-string clave-valor. Los atributos de contacto deben seguir las limitaciones establecidas por la StartChatContactAPI.

  • relatedContactId (opcional): cadena con un identificador de contacto válido. relatedContactId Deben seguir las limitaciones establecidas por la StartChatContactAPI.

  • CustomeriD (opcional): puede ser un ID de perfil de cliente de Amazon Connect o un identificador personalizado de un sistema externo, como un CRM.

  * 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), 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": "[e-mail]", "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

La siguiente imagen muestra un ejemplo del JavaScript que incluyes en los sitios web en los que quieres que los clientes interactúen con tu centro de contacto. Este script muestra el widget en la esquina inferior derecha de su página web.

nota

Incluye el script del widget en el elemento HTML que necesita renderizar el widget cuando utilices el estilo integrado integrado.

Cuando se carga tu sitio web, los clientes ven primero el icono del widget. Al elegir este icono, se abre el widget de comunicaciones y los clientes pueden iniciar el contacto con 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.