Myappsoftware Logo Myapp Software
Share

Realizar una pantalla externa emergente con Amazon Connect

por Jason Douglas

Una de las preguntas más frecuentes que recibimos cuando la gente empieza a usar la Amazonía Conectar decir, “¿Cómo puedo hacer estallar mi aplicación basada en web existente utilizando datos recogidos en un flujo de contactos?”

Este post es un ejemplo completo que agarra los datos entrantes y lo utiliza para hacer estallar una aplicación basada en la web externa una nueva ventana. Se puede utilizar como la base para los casos más complejos y específicos del cliente de uso.Para lograr esto, utilizamos:

¡Eso es! Después de seguir los pasos de esta publicación, tendrá un envoltorio emergente de pantalla en funcionamiento para Amazon Connect.

Para completar los pasos en esta publicación, necesita lo siguiente:

  1. Una cuenta activa de AWS.
  2. Una instancia de Amazon Connect que se ha configurado para llamadas entrantes. Después de crear su instancia, reclame un número de teléfono para ello. Para obtener más información, consulte Introducción a Amazon Connect.

Descargar y modificar la muestra de envoltorio.

Para simplificar este ejemplo, aquí hay un archivo ZIP que tiene todo lo necesario para abrir una página web externa al recibir la llamada. El archivo ZIP incluye:

  • Un contenedor HTML para el Panel de control de contactos.
  • Un archivo JavaScript de Amazon Connect Streams API.
  • Un flujo de contactos de muestra que proporciona los datos utilizados para la pantalla emergente.

Para descargar y modificar la muestra:

  1. Descargue el archivo ZIP de Amazon S3.
  2. Extraer el contenido del archivo ZIP. Contiene los tres archivos que se utilizan para esta publicación de blog.
  3. Encuentre el archivo recién extraído llamado simple_screen_template.html. Debe modificar el archivo HTML para hacer referencia a su instancia de conexión.
  4. Abra simple_screen_template.html con un editor de texto.
  5. En la línea 24, encuentre la sección marcada:
    / *************** Begin Mod Area *************** /
  6. Justo debajo de eso, en la línea 27, encuentre la declaración para la variable instanceName: var instanceName = “REPLACEME”;
  7. Reemplace REPLACEME con su nombre de instancia de Amazon Connect, por ejemplo: var instanceName = “myinstance”;
  8. Las líneas 26 a 29 ahora deben verse similares al siguiente ejemplo:
  9. Guarde y cierre el archivo.

Esa es la única modificación que necesitas hacer. A continuación, suba dos de estos archivos a Amazon S3.

 

Sube a Amazon S3 y haz público el archivo.

Después de modificar el archivo HTML, guárdelo y el archivo JavaScript en Amazon S3, que funciona como su servidor web.

Nota : asegúrese de iniciar sesión en AWS Management Console con una cuenta que tenga los permisos de IAM adecuados para crear depósitos de Amazon S3, como una cuenta de IAM, que pertenece al grupo AdministratorAccess.

Para subir a Amazon S3:

  1. Abra la consola de administración de Amazon S3 .
  2. Seleccione Crear cubo .
  3. Proporcione un nombre único para su nuevo cubo. Mantenga las otras configuraciones predeterminadas, luego en la parte inferior de la página, elija Crear .
    NOTA : Puede cambiar la región predeterminada para este grupo; sin embargo, debido a que el depósito es direccionable globalmente, no es necesario.
  4. El cubo se crea casi de inmediato. Después de volver a la lista de grupos, elija el nombre del nuevo grupo que creó.
  5. Elija Cargar , luego agregue su archivo modificado simple_screen_template.html y el archivo amazon-connect.min.js. Elija Cargar
  6. Una vez que se complete la carga, haga públicos los archivos para que todos puedan acceder a su sitio web. Para hacer públicos los archivos, modifique la configuración de acceso público de su grupo, como se muestra en el siguiente ejemplo (si aún no los ha configurado).

Para obtener más información sobre la configuración de acceso público de Amazon S3, consulte la documentación del Servicio de almacenamiento simple de Amazon .

 

Para hacer los archivos públicamente legibles:

  1. Seleccione la casilla de verificación junto a los dos archivos que cargó en Amazon S3.
  2. En el menú Acciones , elija Hacer público.
  3. Elija el botón Hacer público en la ventana emergente.
  4. Elija el nombre del archivo HTML.
  5. En la página de información general , copie la URL en el enlace Guárdelo para más adelante.

Integración de páginas web alojadas en S3 con su instancia de Amazon Connect

En esta publicación, utilizo Amazon S3 para alojar una página web que integra el Panel de control de contactos de Amazon Connect (CCP) mediante el uso de la biblioteca de API de Amazon Connect Streams . Debido a que el CCP incorporado debe cargarse dentro de la página web alojada en Amazon S3, debo permitir explícitamente que el dominio de Amazon S3 muestre el CCP. Esto evita que los datos del cliente se carguen en una página no autorizada, donde los datos podrían estar expuestos.

Para permitir CCP incrustado en páginas web alojadas en Amazon S3:

  1. Abra la consola de Amazon Connect .
  2. Elija el nombre de la instancia que está utilizando.
  3. En el lado izquierdo de la consola, elija la integración de aplicaciones.
  4. Seleccione Agregar origen .
  5. En el cuadro Ingresar URL de origen , ingrese: https://s3.amazonaws.com
  6. Seleccione Añadir .

Importar el flujo de contacto y asignarlo a un número de teléfono

La envoltura ya está configurada y el grupo Amazon S3 está en la lista blanca. El último paso es configurar Amazon Connect para enviar los parámetros necesarios para que ocurra el despliegue de la pantalla. Esto se logra estableciendo parámetros en un flujo de contactos y asignando ese flujo de contactos a un número de teléfono entrante.

Para importar un flujo de contacto

  1. Inicie sesión en su instancia de Amazon Connect. A la cuenta se le debe asignar un perfil de seguridad que incluya permisos de edición para flujos de contactos.
  2. Elija  enrutamiento ,  flujos de contacto .
  3. Elija el botón Crear flujo de contactos en la parte superior derecha
  4. Elija la flecha desplegable junto a Guardar ,  Importar flujo (beta) .
  5. Seleccione el flujo de contactos que se extrajo del archivo zip, SimpleScreenPopExample, y elija  Importar .
  6. Elija la misma flecha de lista desplegable , Guardar y publicar para que el flujo de contactos esté disponible para su uso. Nota: Puede haber un indicador de advertencia en el bloque Establecer cola de trabajo en el flujo de contactos. Esto es porque usé un flujo de contacto importado. El bloque hace referencia a una cola por ARN, pero los ARN son únicos. Cuando importo el flujo de contactos, no se encuentra en su instancia ninguna cola con el ARN especificado en el flujo exportado. Amazon Connect se resuelve automáticamente en la cola de su instancia con el mismo nombre. Si cambió el nombre de la BasicQueue predeterminada en Amazon Connect, debe seleccionar la cola apropiada.

El flujo de contactos asignado a un número de teléfono es el flujo de contactos que se ejecuta cuando una llamada ingresa a ese número. Así que usaré el flujo de contactos que acabo de guardar como el flujo para este número de teléfono. Puede reclamar un nuevo número y asignarle el flujo de contacto, o puede asociar un número existente al flujo de contacto. Si asocia un número existente, lo desconecta del flujo de contactos asignado actualmente, así que no haga esto en un entorno de producción donde los clientes realicen llamadas a ese número.

Nota: si reclama un número de teléfono adicional, es posible que se incurra en cargos adicionales para Amazon Connect. Como parte de la capa gratuita, puede reclamar un número DID sin cargo. Para más información, ver  .

Para reclamar un número para su centro de contacto:

  1. Elija  enrutamiento ,  números de teléfono .
  2. Seleccione  Reclamar un número  en la esquina superior derecha de la pantalla. Puede elegir un número  gratuito o un número  DID (marcación interna directa)  .
  3. Ingrese una descripción para el número y en el  flujo de contactos / IVR desplegable, elija SimpleScreenPopExample .
  4. Seleccione  Guardar .

Para asociar un número de teléfono con un flujo de contactos:

  1. Elija  enrutamiento ,  números de teléfono .
  2. Seleccione el número para editar, expanda el  flujo de contactos / IVR y elija SimpleScreenPopExample .
  3. Seleccione  Guardar .

Después de guardar el número de teléfono, espere un par de minutos antes de que se haya propagado el cambio. Tome nota del número de teléfono, porque lo necesita para enviar llamadas a su agente.

Inicia sesión y toma una llamada

Ahora que ya tiene todo configurado, el último paso es iniciar sesión y realizar una llamada utilizando el Panel de control de contactos modificado. Use la URL que guardó anteriormente del archivo HTML modificado que colocó en Amazon S3.

Para iniciar sesión y tomar una llamada:

  1. Abre Chrome o Firefox.
  2. Vaya a la URL que guardó anteriormente. Debe ser similar a:
    https://s3.amazonaws.com/mybucketname/simple_screen_template.html
  3. Cuando la página se está cargando, muestra una segunda pestaña para autenticar a su agente. Si la ventana de autenticación no se muestra, es posible que el bloqueador de elementos emergentes de su navegador lo esté impidiendo. Para obtener información sobre cómo habilitar ventanas emergentes, consulte su navegador.
  4. Una vez que se completa la autenticación, se le solicita que permita las notificaciones y el acceso al micrófono. Conceder ambos.
  5. Cierra la nueva pestaña.
  6. Asegúrese de que usted (el agente) se encuentre en el estado Disponible. Si no está configurado en Disponible, elija Establecer en disponible o elija Cambiar estado y luego elija Disponible .
  7. Llame al número que asoció con su nuevo flujo de contactos.
  8. A medida que se entrega la llamada, debe abrirse una nueva pestaña o ventana del navegador (según la configuración de su navegador) y mostrar un resultado de búsqueda.

Ha introducido con éxito una URL externa basada en datos dentro de Amazon Connect.

Cómo funciona esta pantalla emergente

Esta pantalla emergente funciona al pasar dos atributos de contacto del flujo de contactos al PCC: screenPopURL y screenPopValue. Cuando la llamada llega al CCP, la API de Amazon Connect Streams incorporada ve el evento onConnecting, lee los atributos de contacto de la llamada entrante y luego usa estos dos atributos para formar la URL del sitio web para resaltar. JavaScript se usa para abrir una nueva ventana o pestaña usando la URL generada.

Puede modificar fácilmente estos valores en el flujo de contactos editándolos en el bloque Establecer atributos de contacto . Incluso podría utilizar valores dinámicos de una llamada de función de AWS Lambda.

 

Por

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *