如何在Admin Panel中识别访客消息的来源网站？

核心逻辑 #

让访客发送消息时，携带来源网站的标识信息到Admin Panel，以下是具体落地方法：

1. 给每个网站分配唯一Site ID #

• 为每个接入Chat Popup的网站生成唯一标识（比如UUID或自定义字符串），嵌入弹窗代码时将这个ID写入配置
• 访客发消息时，弹窗自动把Site ID和消息内容一起提交到后端
• Admin Panel后台提前维护Site ID与网站域名/名称的映射表，接收消息时通过ID匹配对应网站

2. 自动抓取当前网站域名 #

• 在弹窗前端代码中，用window.location.hostname获取当前网站的完整域名（如example.com）
• 发送消息时把域名作为参数附加到请求里
• 后端直接存储域名，Admin Panel展示消息时直接显示该域名即可
• 若有子域名需求，可选择保留完整子域名（如blog.example.com）或统一映射到主域名

3. 结合请求头做辅助验证 #

• 后端接口可读取请求的Referer头，获取消息发送的来源页面URL
• 注意：Referer可能被浏览器隐私设置屏蔽，仅能作为辅助手段，需和前两种方法配合使用，交叉验证来源准确性

前端代码示例 #

// 消息发送函数
function sendChatMessage(content) {
  // 预定义的Site ID（方法1）
  const siteId = "shop_001";
  // 获取当前域名（方法2）
  const siteDomain = window.location.hostname;

  // 构造请求数据
  const payload = {
    content: content,
    siteId: siteId,
    siteDomain: siteDomain
  };

  // 提交到后端接口
  fetch('/admin/api/receive-message', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(payload)
  });
}

Admin Panel展示优化 #

• 在消息列表新增「来源网站」列，显示对应域名或Site ID映射的网站名称
• 增加按来源网站筛选消息的功能，方便客服快速定位对应网站的对话

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