如何将Next.js 14 App Router开发的聊天bot转为HTML脚本标签？

步骤1：改造Next.js项目，创建嵌入入口 #

首先在你的Next.js项目里，为聊天机器人做一个独立的嵌入页面，确保它能脱离主应用正常运行：

1. 在app/embed目录下创建page.tsx，只渲染你的聊天机器人组件，同时去掉页面默认的边距和背景：

// app/embed/page.tsx
import ChatWidget from '@/components/ChatWidget';
import './embed.css';

export default function EmbedPage() {
  // 可给ChatWidget加isEmbedded属性，调整嵌入模式下的样式逻辑
  return <ChatWidget isEmbedded />;
}

2. 创建embed.css重置页面样式：

/* app/embed/embed.css */
body {
  margin: 0;
  padding: 0;
  background: transparent;
  overflow: hidden;
}

3. 确保ChatWidget组件样式不会和外部页面冲突，优先用CSS Modules、Tailwind隔离模式，或者用Shadow DOM包裹组件内容。

步骤2：编写嵌入脚本 #

在项目的public目录下创建chat-widget.js，这是用户要嵌入的核心脚本，它会自动在页面右下角生成聊天气泡，并加载你的聊天机器人：

// public/chat-widget.js
(function() {
  // 读取用户自定义配置（可选）
  const userConfig = window.chatWidgetConfig || {};
  // 默认配置
  const config = {
    widgetUrl: 'https://你的Vercel域名/embed', // 替换成实际部署域名
    bubbleText: '💬',
    bubbleStyle: {
      position: 'fixed',
      bottom: '20px',
      right: '20px',
      width: '60px',
      height: '60px',
      borderRadius: '50%',
      backgroundColor: '#0070f3',
      color: '#fff',
      border: 'none',
      fontSize: '24px',
      cursor: 'pointer',
      boxShadow: '0 2px 10px rgba(0,0,0,0.2)',
      zIndex: '999999',
      ...userConfig.bubbleStyle
    },
    iframeStyle: {
      position: 'fixed',
      bottom: '90px',
      right: '20px',
      width: '400px',
      height: '600px',
      border: 'none',
      borderRadius: '12px',
      boxShadow: '0 4px 20px rgba(0,0,0,0.15)',
      zIndex: '999998',
      display: 'none',
      ...userConfig.iframeStyle
    },
    ...userConfig
  };

  // 创建聊天气泡按钮
  const bubbleBtn = document.createElement('button');
  bubbleBtn.textContent = config.bubbleText;
  Object.assign(bubbleBtn.style, config.bubbleStyle);

  // 创建加载聊天机器人的iframe
  const chatIframe = document.createElement('iframe');
  chatIframe.src = config.widgetUrl;
  chatIframe.title = '聊天机器人';
  Object.assign(chatIframe.style, config.iframeStyle);

  // 点击气泡切换聊天界面显示/隐藏
  bubbleBtn.addEventListener('click', () => {
    chatIframe.style.display = chatIframe.style.display === 'none' ? 'block' : 'none';
  });

  // 把元素添加到页面
  document.body.appendChild(bubbleBtn);
  document.body.appendChild(chatIframe);
})();

步骤3：部署并提供给用户使用 #

1. 把项目重新部署到Vercel，确保public/chat-widget.js和/embed路径能正常访问。
2. 用户只需要在自己的HTML文件里添加下面的脚本标签，就能在网站上显示聊天气泡：

<!-- 基础用法 -->
<script src="https://你的Vercel域名/chat-widget.js" async></script>

<!-- 可选：自定义配置 -->
<script>
  window.chatWidgetConfig = {
    bubbleText: '在线客服',
    bubbleStyle: { backgroundColor: '#2563eb' },
    iframeStyle: { width: '380px', height: '580px' }
  };
</script>
<script src="https://你的Vercel域名/chat-widget.js" async></script>

额外优化建议 #

• 样式隔离：如果担心宿主页面样式影响聊天气泡，可以把气泡元素也放进Shadow DOM里。
• Edge Network加速：Vercel的Edge Network会自动全球分发你的脚本和嵌入页面，确保用户加载速度快，无需额外配置。
• 跨页通信：如果需要聊天机器人和宿主页面交互（比如获取用户信息），可以用postMessage API在iframe和宿主页面之间传递数据。

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