Amazon Connect コミュニケーションウィジェットのチャットセッションをプログラムで切断する - Amazon Connect
実装とユースケース

翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

Amazon Connect コミュニケーションウィジェットのチャットセッションをプログラムで切断する

JavaScript を使用してコミュニケーションウィジェットのチャットセッションをプログラムで切断するには、ウィジェットの iframe に保存されている disconnect メソッドを呼び出します。ウィジェットのホストドキュメントから、次のコードスニペットを使用して 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://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>

実装とユースケース

プログラムによる disconnect の呼び出しは、さまざまな状況で便利です。End Chat ボタンを手動でクリックする以外の方法で、会話を終了するタイミングをより細かく制御できます。disconnect を呼び出す一般的なユースケースを以下に示します。

閉じたとき、または移動したとき

一般的なユースケースとして、ブラウザまたはタブのコンテキストが破棄されるときに発生するイベントに切断機能を関連付ける場合が挙げられます。ブラウザからの離脱時に発生する一般的なイベントには、pagehide と beforeunload があります。これらのイベントは、ユーザーがタブやブラウザを更新したり、閉じたり、別の URL に移動したりするとトリガーされます。どちらのイベントもブラウザのコンテキストが破棄されるときに発生しますが、ブラウザのリソースがクリーンアップされる前に disconnect 関数を完全に実行できる保証はありません。

pagehide は、より最新のページライフサイクルイベントであり、すべての主要なブラウザとオペレーティングシステムでサポートされています。beforeunload は、pagehide イベントが disconnect を一貫して呼び出せない場合に試みる代替イベントです。ブラウザが閉じる前に disconnect 関数を完了できない場合は、pagehide より先にトリガーされる beforeunload によって、信頼性が向上する可能性があります。ただし、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();
});

コンテキストを切り替えたとき

もう 1 つのユースケースとして、タブ/アプリの切り替えや最小化、画面のロックなど、ユーザーがコンテキストを切り替えたときに切断をトリガーする場合が挙げられます。このようにコンテキストが表示されなくなった状況は、visibilitychange イベントで確実に処理できます。

次にコードスニペットの例を示します。

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