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.

Desconexión mediante programación de la sesión de chat de un widget de comunicación de Amazon Connect

Puedes desconectar la sesión de chat de un widget de comunicación mediante programación usando 'JavaScript llamando al disconnect método almacenado en el widget. iframe Desde el documento host del widget, puede hacer referencia a la función disconnect con el siguiente fragmento de código:

document.getElementById("amazon-connect-chat-widget-iframe").contentWindow.connect.ChatSession.disconnect()

Puede añadirlo fácilmente al script del widget existente. A continuación, se muestra un fragmento de código de ejemplo:

<script type="text/javascript">
  (function(w, d, x, id){
    s=d.createElement('script');
    s.src='https://your-instance-alias.my.connect.aws/connectwidget/static/amazon-connect-chat-interface-client.js';
    s.async=1;
    s.id=id;
    d.getElementsByTagName('head')[0].appendChild(s);
    w[x] =  w[x] || function() { (w[x].ac = w[x].ac || []).push(arguments) };
  })(window, document, 'amazon_connect', '...');
  amazon_connect('styles', { iconType: 'CHAT', openChat: { color: '#ffffff', backgroundColor: '#123456' }, closeChat: { color: '#ffffff', backgroundColor: '#123456'} });
  amazon_connect('snippetId', '...');
  amazon_connect('supportedMessagingContentTypes', [ 'text/plain', 'text/markdown', 'application/vnd.amazonaws.connect.message.interactive', 'application/vnd.amazonaws.connect.message.interactive.response' ]);
 
  // Add disconnect event listener
  window.addEventListener("pagehide", () => {
      document.getElementById("amazon-connect-chat-widget-iframe").contentWindow.connect.ChatSession.disconnect();
  });
</script>

Casos de uso e implementación

Llamar a disconnect mediante programación puede resultar útil en varios casos. Proporciona más control sobre cuándo terminar la conversación (aparte de haciendo clic manualmente en el botón End Chat). A continuación, se indican algunos casos de uso frecuentes de la llamada a disconnect.

Al cerrar o durante la navegación

Un caso de uso común sería adjuntar la funcionalidad disconnect a los eventos que se activan cuando se destruye el contexto del navegador o la pestaña. pagehide y beforeunload son los eventos más comunes que se activan en esos casos. Se activan cuando un usuario actualiza la página, navega a una URL diferente o cierra la pestaña o el navegador. Aunque ambos eventos se activan cuando se destruye el contexto del navegador, no hay garantía de que la función disconnect pueda ejecutarse por completo antes de que se limpien los recursos del navegador.

pagehide es un evento de ciclo de vida de página más moderno y es compatible con los principales navegadores y sistemas operativos. beforeunload es un evento alternativo que se puede probar si el evento pagehide no logra llamar a disconnect de forma fiable. beforeunload se activa antes de pagehide, lo que puede proporcionar una fiabilidad adicional si la función disconnect no se completa antes del cierre del navegador. Ha habido problemas de fiabilidad con beforeunload, especialmente, en los dispositivos iOS.

A continuación, se muestra un fragmento de código de ejemplo:

// Call disconnect when `beforeunload` triggers
window.addEventListener("beforeunload", (event) => {
    document.getElementById("amazon-connect-chat-widget-iframe").contentWindow.connect.ChatSession.disconnect();
});

// Call disconnect when `pagehide` triggers
window.addEventListener("pagehide", (event) => {
    document.getElementById("amazon-connect-chat-widget-iframe").contentWindow.connect.ChatSession.disconnect();
});

En el momento de cambiar de contexto

Otro caso de uso sería activar una desconexión cuando el usuario cambia de contexto, por ejemplo, cuando un usuario cambia, minimiza tab/app o bloquea su pantalla. El evento visibilitychange puede gestionar de forma fiable estos escenarios en los que el contexto ya no está visible.

A continuación, se muestra un fragmento de código de ejemplo:

window.addEventListener("visibilitychange", () => {
    if (document.visibilityState === "hidden") {
        document.getElementById("amazon-connect-chat-widget-iframe").contentWindow.connect.ChatSession.disconnect();
    } else if (document.visibilityState === "visible") {
        ...
    }
});