Amazon Connect 통신 위젯의 채팅 세션 프로그래밍 방식으로 연결 해제

PDFRSS

위젯의에 저장된 disconnect 메서드를 호출하여 'JavaScript'를 사용하여 프로그래밍 방식으로 통신 위젯의 채팅 세션 연결을 해제할 수 있습니다iframe. 위젯의 호스트 문서에서 다음 코드 조각을 사용하여 disconnect 함수를 참조할 수 있습니다.

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

기존 위젯 스크립트에 쉽게 추가할 수 있습니다. 다음은 예제 코드 조각입니다.

<script type="text/javascript">
  (function(w, d, x, id){
    s=d.createElement('script');
    s.src='https://....cloudfront.net/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>

구현 및 사용 사례

프로그래밍 방식으로 연결 해제를 호출하는 것은 여러 경우에 유용할 수 있습니다. 버튼을 수동으로 클릭하지 않고 대화를 종료할 시기를 더 잘 제어할 수 있습니다End Chat. 다음은를 호출할 때의 몇 가지 일반적인 사용 사례입니다disconnect.

닫기 또는 탐색 시

일반적인 사용 사례는 브라우저 또는 탭 컨텍스트가 파괴될 때 발생하는 이벤트에 연결 해제 기능을 연결하는 것입니다. pagehide 및 beforeunload는 브라우저를 해제할 때 발생하는 일반적인 이벤트입니다. 사용자가 새로 고치거나, 다른 URL로 이동하거나, 탭 또는 브라우저를 닫을 때 트리거됩니다. 브라우저 컨텍스트가 삭제될 때 두 이벤트가 모두 실행되지만 브라우저의 리소스를 정리하기 전에 disconnect 함수가 완전히 실행될 수 있다는 보장은 없습니다.

pagehide는 최신 페이지 수명 주기 이벤트이며 모든 주요 브라우저 및 운영 체제에서 지원됩니다. beforeunload는 이벤트가 통화 연결 해제를 일관되게 호출하지 못하는 경우 시도할 수 pagehide 있는 대체 pagehide 이벤트입니다. beforeunload는 이전에 트리거되며, 브라우저가 닫히기 전에 disconnect 함수가 완료되지 않는 경우 추가 신뢰성을 제공할 수 있습니다. beforeunload 특히 iOS 디바이스에서 안정성 문제가 발생했습니다.

다음은 예제 코드 조각입니다.

// 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();
});

컨텍스트 전환 시

또 다른 사용 사례는 사용자가 탭/앱을 전환하거나 최소화하거나 화면을 잠그는 경우와 같이 사용자가 컨텍스트를 전환할 때 연결 해제를 트리거하는 것입니다. visibilitychange 이벤트는 컨텍스트가 더 이상 표시되지 않는 이러한 시나리오를 안정적으로 처리할 수 있습니다.

다음은 예제 코드 조각입니다.

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