如何将NextJS聊天机器人导出为可嵌入的悬浮按钮？

可用库推荐 #

• Lit: 轻量级Web Component库，语法贴近React，打包后体积小巧，能轻松实现跨网站无框架依赖的嵌入。
• Stencil: 专注于Web Component构建的工具，生成的组件兼容所有现代浏览器，适合生产环境嵌入场景。
• 若偏好原生实现，无需额外库，直接用原生Web API编写自定义元素即可。

实现步骤（替代iframe的嵌入方案） #

1. 封装聊天按钮为Web Component #

把悬浮按钮和聊天弹窗的UI、交互逻辑封装成自定义元素，确保能在任意网站中嵌入：

class ChatbotFloatingButton extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    
    // 样式与UI结构
    shadow.innerHTML = `
      <style>
        .floating-btn {
          position: fixed;
          bottom: 24px;
          right: 24px;
          width: 64px;
          height: 64px;
          border-radius: 50%;
          border: none;
          background: #2563eb;
          color: white;
          font-size: 28px;
          cursor: pointer;
          box-shadow: 0 4px 16px rgba(0,0,0,0.15);
          z-index: 9999;
          transition: transform 0.2s;
        }
        .floating-btn:hover {
          transform: scale(1.1);
        }
        .chat-modal {
          position: fixed;
          bottom: 96px;
          right: 24px;
          width: 380px;
          height: 520px;
          background: #fff;
          border-radius: 12px;
          box-shadow: 0 6px 24px rgba(0,0,0,0.15);
          display: none;
          z-index: 9998;
          overflow: hidden;
        }
        .chat-header {
          padding: 16px;
          background: #2563eb;
          color: white;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .close-btn {
          background: transparent;
          border: none;
          color: white;
          font-size: 20px;
          cursor: pointer;
        }
        .chat-content {
          padding: 16px;
          height: calc(100% - 60px);
          overflow-y: auto;
        }
      </style>
      
      <button class="floating-btn">💬</button>
      <div class="chat-modal">
        <div class="chat-header">
          <h3>在线客服</h3>
          <button class="close-btn">×</button>
        </div>
        <div class="chat-content">
          <div id="chatbot-messages"></div>
        </div>
      </div>
    `;

    // 交互逻辑
    const btn = shadow.querySelector('.floating-btn');
    const modal = shadow.querySelector('.chat-modal');
    const closeBtn = shadow.querySelector('.close-btn');

    const toggleModal = () => {
      modal.style.display = modal.style.display === 'none' ? 'block' : 'none';
      if (modal.style.display === 'block') {
        this.loadChatContent();
      }
    };

    btn.addEventListener('click', toggleModal);
    closeBtn.addEventListener('click', toggleModal);
  }

  // 接收外部配置参数
  static get observedAttributes() {
    return ['chatbot-id'];
  }

  attributeChangedCallback(name, oldVal, newVal) {
    if (name === 'chatbot-id' && newVal) {
      this.chatbotId = newVal;
    }
  }

  // 加载聊天内容（对接你的NextJS API）
  loadChatContent() {
    const messagesContainer = this.shadowRoot.querySelector('#chatbot-messages');
    fetch(`https://your-nextjs-domain.com/api/chat/${this.chatbotId}`)
      .then(res => res.json())
      .then(data => {
        messagesContainer.innerHTML = `<p>${data.greeting}</p>`;
      })
      .catch(err => console.error('加载聊天内容失败:', err));
  }
}

// 注册自定义元素
customElements.define('chatbot-floating-btn', ChatbotFloatingButton);

// 自动初始化，无需手动添加元素
document.addEventListener('DOMContentLoaded', () => {
  const config = window.chatbotEmbedConfig || {};
  if (!config.chatbotId) return;
  
  const button = document.createElement('chatbot-floating-btn');
  button.setAttribute('chatbot-id', config.chatbotId);
  document.body.appendChild(button);
});

2. 打包为可嵌入脚本 #

用Vite或Rollup将上述代码打包成UMD格式的独立脚本：

• 创建Vite配置文件vite.config.js：

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    lib: {
      entry: './chatbot-button.js',
      name: 'ChatbotEmbed',
      formats: ['umd'],
      fileName: () => 'chatbot-embed.js',
    },
  },
});

• 执行vite build，得到打包后的dist/chatbot-embed.js文件。

3. 提供嵌入代码给其他网站 #

将打包后的脚本部署到静态资源服务器/CDN后，其他网站只需添加以下代码即可嵌入悬浮按钮：

<script>
window.chatbotEmbedConfig = {
  chatbotId: "你的聊天机器人ID"
};
</script>
<script src="https://你的CDN地址/chatbot-embed.js" defer></script>

4. 跨网站兼容性测试 #

在纯HTML、React、Vue等不同环境的网站中测试嵌入效果，确保按钮定位、交互和聊天内容加载正常。

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