如何使用JavaScript实现点击按钮/图标弹出聊天机器人窗口

整个实现不需要引入额外第三方依赖，只用原生HTML/CSS/JS就能完成，适配桌面端和移动端。

前置准备 #

先拿到你本地托管PVA的独立聊天页面访问地址，提前在PVA服务端配置两项规则：

• 允许你的自有网站域名跨域访问该聊天页
• 配置X-Frame-Options为允许你的网站域名嵌入，避免iframe加载被拦截

步骤1：插入页面结构 #

把以下代码加到你网站所有页面都会加载的公共模板底部位置，不需要每个页面单独加：

<!-- 悬浮聊天触发按钮 -->
<button id="pvaChatToggle" class="pva-chat-btn">💬</button>

<!-- 聊天弹窗容器 -->
<div id="pvaChatWindow" class="pva-chat-window">
  <div class="pva-chat-header">
    <span>在线咨询</span>
    <button id="pvaChatClose" class="pva-close-btn">×</button>
  </div>
  <iframe 
    id="pvaChatFrame" 
    src="" 
    frameborder="0"
    class="pva-chat-iframe"
    allow="microphone; clipboard-read; clipboard-write"
  ></iframe>
</div>

步骤2：添加悬浮样式 #

把以下CSS加到网站全局样式文件里，z-index设为9999保证控件始终在页面最上层，不会被其他内容遮挡：

/* 触发按钮固定在右下角 */
.pva-chat-btn {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #165DFF;
  color: #fff;
  border: none;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 9999;
  transition: transform 0.2s ease;
}
.pva-chat-btn:hover {
  transform: scale(1.05);
}

/* 聊天窗口默认隐藏，固定在按钮上方 */
.pva-chat-window {
  position: fixed;
  right: 24px;
  bottom: 96px;
  width: 380px;
  height: 560px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 24px rgba(0,0,0,0.18);
  z-index: 9999;
  overflow: hidden;
  display: none;
  flex-direction: column;
}

/* 窗口头部栏 */
.pva-chat-header {
  height: 48px;
  padding: 0 16px;
  background: #165DFF;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 500;
}
.pva-close-btn {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
}

/* iframe占满窗口剩余空间 */
.pva-chat-iframe {
  flex: 1;
  width: 100%;
}

/* 移动端适配：小屏幕下聊天窗占满整个视口 */
@media (max-width: 480px) {
  .pva-chat-window {
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    border-radius: 0;
  }
}

步骤3：添加交互逻辑 #

把以下JS代码加到全局脚本里，实现点击切换显示/隐藏，同时做了懒加载优化：第一次点开窗口时才加载PVA聊天内容，不影响页面初始打开速度。

// 替换成你自己本地PVA的聊天页地址
const PVA_PAGE_PATH = "/your-local-pva-chat-address";
const toggleBtn = document.getElementById('pvaChatToggle');
const chatWindow = document.getElementById('pvaChatWindow');
const closeBtn = document.getElementById('pvaChatClose');
const chatFrame = document.getElementById('pvaChatFrame');
let loaded = false;

toggleBtn.addEventListener('click', () => {
  const isHidden = chatWindow.style.display === 'none';
  chatWindow.style.display = isHidden ? 'flex' : 'none';
  // 首次打开加载聊天内容
  if (isHidden && !loaded) {
    chatFrame.src = PVA_PAGE_PATH;
    loaded = true;
  }
});

closeBtn.addEventListener('click', () => {
  chatWindow.style.display = 'none';
});

可选优化 #

• 按钮图标可以替换成你自己设计的客服图标，配色、窗口尺寸都可以根据网站风格调整CSS对应值
• 如果需要未读消息红点提醒，可以通过postMessage做父子页面通信：PVA侧收到新消息时给父页面发消息，父页面收到后给按钮加红点样式即可
• 如果需要记住用户的窗口打开/关闭状态，可以加localStorage存储状态，页面刷新后保持用户之前的选择

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