Cómo añadir el widget de Amazon Connect en un sitio web a fin de aceptar contactos de chat, tareas, correo electrónico y llamadas web - Amazon Connect
Paso 1: creación de un formulario de contacto para el widgetPaso 2: personalizar el widget de comunicacionesPaso 3: especificar los dominios del sitio web en los que espera mostrar el widget de comunicacionesPaso 4: confirmar y copiar el código del widget de comunicaciones y las claves de seguridad

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 añadir el widget de Amazon Connect en un sitio web a fin de 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 un sitio web. Creará un formulario de contacto que determine el comportamiento de los contactos creados a través de su widget y, a continuación, personalizará el aspecto y la funcionalidad del widget.

Paso 1: creación de un formulario de contacto para el widget

En este paso, creará y personalizará una vista que determine el comportamiento de los contactos creados a través de su widget.

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

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

  3. Seleccione Crear vista.

  4. Aquí puede configurar un formulario de contacto para sus clientes mediante el creador sin código. 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 le permitirá recibir información directamente de cualquier persona que interactúe con su 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 Connect Action para usar el widget Ver con un formulario de contacto.

    • ConnectActionType admite tres opciones para el componente Connect Action:

      • StartEmailContact

      • StartTaskContact

      • StartChatContact

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

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

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

    La activación de la seguridad para las nuevas solicitudes de widgets de comunicación.

    Los siguientes componentes son compatibles con la vinculación del formulario:

    • Entrada de formulario

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

    • Selector de fecha

    • Área de texto

    • Selector de tiempo

  6. Cuando la vista esté lista, seleccione Publicar.

Paso 2: personalizar el widget de comunicaciones

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

  1. Inicio de sesión en el sitio web de administración de Amazon Connect 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.

  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, seleccione Agregar formulario de contacto.

  5. Seleccione la vista que ha configurado 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 muestra el formulario de contacto de Ver que ha creado. Solo se muestra el estilo del encabezado.

Tipo de visualización

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

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

  • El elemento incrustado en línea le permite incrustar el 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 más información sobre cómo hacer que un objeto S3 sea de acceso público, consulte Paso 2: cómo añadir una política de bucket en el tema Configuración de permisos para el acceso al sitio web.

Paso 3: 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 widget se cargará únicamente en los sitios web que seleccione en este paso.

    Seleccione Agregar dominio para agregar hasta 50 dominios.

    La opción de agregar dominio.

    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 example.com está permitida, se podrá acceder a todas sus páginas (como example.com/cart o example.com/checkout). No puede permitir ni bloquear subdirectorios específicos.

    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 al widget de comunicaciones, 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 contacto. Esto le proporciona un mayor control a la hora de iniciar nuevos contactos, lo que incluye la posibilidad de verificar que las solicitudes enviadas a Amazon Connect proceden de usuarios autenticados.

    La activación de la seguridad para las nuevas solicitudes de widgets de comunicación.

    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 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 elige esta opción, en el siguiente paso obtendrá una clave de seguridad para todas las solicitudes de contacto 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 Save.

Paso 4: 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ó utilizar JWT en el paso 3, también puede 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.

La clave de seguridad proporcionada por Amazon Connect.

Cuando sus clientes interactúan con el widget de comunicaciones en su página web, el widget solicita a su servidor web un JWT. 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 se realiza correctamente, esto confirma que el JWT lo ha emitido su servidor web y Amazon Connect enruta 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 en la API StartChatContact.

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

    • relatedContactId (opcional): cadena con un identificador de contacto válido. El relatedContactId debe seguir las limitaciones impuestas por la API StartChatContact.

    • customerId (optional): puede ser un ID de Perfiles de clientes 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": "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

En la siguiente imagen, se muestra un ejemplo del JavaScript que se inserta en las páginas web en las que se desea que los clientes puedan interactuar con su 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 utilice el estilo incrustado en línea.

Script del widget de comunicaciones.

Cuando se carga la página web, los clientes ven primero el icono del widget. Si eligen este icono, se abre el widget de comunicaciones y los clientes pueden iniciar el contacto con los 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.

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.