如何通过HTML及按钮类实现点击按钮在新窗口打开PVA聊天机器人

核心思路是通过JavaScript创建空白新窗口，然后在窗口内动态插入PVA聊天机器人的嵌入代码，无需跳转外部URL就能直接在新窗口启动对话。

具体实现步骤： #

1. 添加触发按钮
   在门户页面中添加按钮并指定类名，用于后续绑定事件：

   <button class="open-pva-chat">打开聊天机器人</button>
   

2. 编写JavaScript逻辑
   监听按钮点击事件，创建新窗口并加载PVA嵌入代码：

   // 获取按钮元素
   const chatBtn = document.querySelector('.open-pva-chat');
   
   chatBtn.addEventListener('click', () => {
       // 创建新窗口，自定义尺寸和位置
       const chatWin = window.open('', 'pva-chat', 'width=420,height=650,top=80,left=80');
       
       // 窗口加载完成后插入PVA代码
       chatWin.onload = function() {
           // 替换为你实际的PVA嵌入代码（这里以Web Chat为例）
           const pvaCode = `
               <div style="width:100%;height:100%;margin:0;padding:0;">
                   <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
                   <script>
                       window.WebChat.renderWebChat({
                           directLine: window.WebChat.createDirectLine({ token: '你的直连令牌' }),
                           userID: '用户标识',
                           username: '访客'
                       }, document.getElementById('chat-box'));
                   </script>
                   <div id="chat-box" style="width:100%;height:100%;"></div>
               </div>
           `;
           
           // 将代码写入新窗口的body
           chatWin.document.body.innerHTML = pvaCode;
           // 确保窗口样式适配
           chatWin.document.body.style.margin = '0';
           chatWin.document.body.style.padding = '0';
       };
   });
   

3. 关键注意事项

   • 替换代码中的你的直连令牌为PVA生成的有效Direct Line令牌
   • 调整window.open()的参数（width、height等）来适配你的窗口尺寸需求
   • 如果你的PVA嵌入代码是iframe形式，直接把pvaCode替换为对应的iframe代码即可
   • 提醒用户允许浏览器弹出窗口，否则新窗口会被拦截

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