如何通过编程阻止Amazon Connect CCP座席结束ACW状态？

针对你使用托管在自有网站的Stream API CCP的需求，以下是两种可行的实现方案：

方案一：动态禁用「结束联系」按钮直到任务完成 #

1. 定位CCP内的按钮元素
   CCP以iframe形式嵌入，先获取iframe的内容文档，再通过元素选择器定位「结束联系」按钮（注意CCP的DOM结构可能随版本更新变化，建议用测试ID或稳定的class定位）：

   // 获取CCP iframe
   const ccpIframe = document.getElementById('ccp-iframe');
   // 等待iframe加载完成后访问内容
   ccpIframe.onload = function() {
     const ccpDoc = ccpIframe.contentDocument || ccpIframe.contentWindow.document;
     // 定位结束ACW按钮（示例选择器，需根据实际DOM调整）
     const endAcwBtn = ccpDoc.querySelector('[data-test-id="end-acw-button"]');
   };
   

2. 根据任务状态控制按钮禁用
   当座席进入ACW状态时（通过contact.onACW事件监听），禁用按钮；待自定义任务完成后，移除禁用状态：

   // 监听ACW状态开始
   contact.onACW(function() {
     // 禁用按钮
     endAcwBtn.disabled = true;
     endAcwBtn.style.opacity = '0.6';
   });
   
   // 任务完成后启用按钮
   function markTasksCompleted() {
     endAcwBtn.disabled = false;
     endAcwBtn.style.opacity = '1';
   }
   

3. 处理动态DOM加载
   若按钮是动态生成的，用MutationObserver监听iframe内的DOM变化，确保按钮出现后再执行操作：

   const observer = new MutationObserver((mutations) => {
     mutations.forEach((mutation) => {
       const endAcwBtn = ccpDoc.querySelector('[data-test-id="end-acw-button"]');
       if (endAcwBtn) {
         endAcwBtn.disabled = true;
         observer.disconnect(); // 找到元素后停止监听
       }
     });
   });
   observer.observe(ccpDoc.body, { childList: true, subtree: true });
   

方案二：拦截按钮点击事件，检查任务状态 #

1. 绑定点击事件拦截器
   给「结束联系」按钮添加点击事件监听器，阻止默认行为并检查任务完成情况：

   endAcwBtn.addEventListener('click', function(e) {
     // 检查自定义任务是否完成
     const tasksCompleted = checkIfTasksAreDone();
     if (!tasksCompleted) {
       e.preventDefault();
       e.stopPropagation();
       alert('请先完成所有任务再结束ACW'); // 自定义提示
       return;
     }
     // 任务完成，允许触发原生结束ACW逻辑
     // 也可手动调用Stream API方法：contact.endACW();
   });
   

2. 跨域场景处理
   如果CCP iframe与父页面存在跨域限制，无法直接操作DOM，可隐藏原生CCP的ACW按钮，在自有网站页面实现自定义结束按钮：
   • 隐藏原生按钮：通过CSS或DOM操作隐藏CCP内的结束按钮
   • 自定义按钮逻辑：点击时先检查任务，完成后调用Stream API的contact.endACW()方法结束ACW状态

关键注意事项 #

• 依赖contact.onACW事件判断ACW状态的起始时机，确保操作触发的准确性
• CCP的DOM结构可能随版本更新变化，需定期验证元素选择器的有效性
• 跨域场景下优先使用自定义UI结合Stream API原生方法，避免DOM操作的限制

内容的提问来源于stack exchange，提问作者richard wadsworth