live-chat-commerce

直播聊天电商

概述

电商直播聊天不只是提供基础支持——客服人员可以协助客户查找商品、将商品加入购物车和应用折扣码，直接减少购买顾虑。Shopify Inbox（免费版）、Tidio 和 Gorgias Chat 开箱即用地提供购物车可见性、商品卡片分享和订单状态机器人回复等电商专属功能。只有当你的电商专属需求（自定义购物车操作、专有机器人逻辑、白标体验）超出这些工具的能力时，才需要构建自定义聊天系统。

何时使用此技能

• 在店面添加直播聊天，以减少购买前的咨询并提高转化率时
• 客服人员需要在聊天期间查看客户当前购物车内容时
• 实施自动订单状态回复，让客服人员只处理复杂问题时
• 衡量聊天转化率和直播聊天带来的营收时
• 第三方聊天小组件需要执行其原生支持范围之外的电商操作时

核心说明

步骤 1：确定平台并选择合适的聊天工具

平台	推荐工具	原因
Shopify	Shopify Inbox（免费版）	Shopify 原生工具；可显示客户的购物车、近期订单，并允许客服人员发送包含价格的商品链接
Shopify	Tidio	提供比 Inbox 更先进的 AI 机器人、集成和分析功能；支持分享商品卡片
Shopify	Gorgias Chat	最适合已使用 Gorgias 处理支持工单的团队；提供统一收件箱
WooCommerce	Tidio 或 LiveChat	两者都提供 WooCommerce 插件；客服人员可以查看订单历史和购物车内容
BigCommerce	Tidio 或 LiveChat	可从 BigCommerce App Marketplace 获取
自定义 / 无头架构	使用 WebSocket server 构建	当上述工具都无法提供足够的电商 API 访问能力时，必须自行构建

---

步骤 2：按平台进行设置

---

Shopify

选项 A：Shopify Inbox（免费，推荐作为起点）

1. 前往 管理后台 → Inbox → 开启 Shopify Inbox
2. Shopify Inbox 会自动在你的店面安装聊天小组件
3. 客服人员通过 inbox.shopify.com 或 Shopify 移动应用访问对话

客服人员在每段对话中都能看到：

• 已登录客户的姓名和电子邮件地址
• 当前购物车内容及商品图片和价格
• 近期订单历史和履行状态

电商功能：

• 客服人员可以直接在聊天界面中搜索并分享商品链接
• 客户可以看到包含图片、价格和“加入购物车”按钮的商品卡片
• 客服人员可以为客户的购物车应用折扣码

设置自动回复：

1. 前往 Inbox → 管理 → 即时解答
2. 为常见问题添加解答：配送、退货、尺码
3. 启用 AI 驱动的摘要和建议回复（较新版 Inbox 提供）

设置订单状态机器人：

1. 前往 Inbox → 管理 → 自动消息
2. 为包含“订单状态”“我的订单在哪里”“追踪”等关键词的对话创建自动回复
3. 为注册客户加入指向 /account/orders 的链接

设置可用时间：

1. 前往 Inbox → 管理 → 离开消息
2. 设置营业时间，并配置在营业时间之外显示的离开消息

---

WooCommerce

Tidio for WooCommerce（推荐）：

1. 从 WordPress 插件目录安装 Tidio Live Chat
2. 激活后，在 WooCommerce → Tidio 中进行配置
3. Tidio 会自动向客服人员显示：
   • 当前购物车中的商品
   • 订单历史记录
   • 客户生命周期价值

Tidio 中的电商功能：

• 客服人员可以在聊天界面中查看和分享商品
• 客服人员发送的商品推荐卡片包含图片、价格和添加到购物车的链接
• 可自动化的机器人流程，用于查询订单状态（Tidio 可与 WooCommerce 订单集成）

设置订单状态机器人：

1. 在 Tidio 中，前往 Automation → Create Automation
2. 触发条件：访客发送的消息中包含 "order" 或 "tracking"
3. 操作：显示表单，询问订单号 → 通过 Tidio 的 WooCommerce 集成查询 → 回复订单状态

适用于 WooCommerce 的 LiveChat：

1. 从 WordPress.org 安装 LiveChat
2. LiveChat 的 WooCommerce 集成会在客服人员工作台的“Customer Details”下显示订单数据
3. 客服人员可以实时查看购物车放弃情况，并主动联系客户

---

BigCommerce

来自应用市场的 Tidio：

1. 前往 Apps → Search "Tidio" 并安装
2. 配置方式与上文 WooCommerce 设置相同
3. Tidio 会自动连接 BigCommerce 订单

适用于 BigCommerce 的 LiveChat：

1. 从 BigCommerce 应用市场安装
2. 客服人员可以在每段对话中查看订单历史记录和购物车内容

---

自定义／无头架构

对于需要自定义电商聊天操作的无头商店：

// WebSocket server for real-time chat
import { WebSocketServer, WebSocket } from 'ws';

interface ChatClient {
  ws: WebSocket;
  type: 'customer' | 'agent';
  sessionId: string;
  customerId?: string;
  conversationId?: string;
}

const clients = new Map<string, ChatClient>();
const wss = new WebSocketServer({ noServer: true });

wss.on('connection', async (ws, req, context: { type: 'customer' | 'agent'; sessionId: string }) => {
  const socketId = crypto.randomUUID();
  clients.set(socketId, { ws, ...context });

  ws.on('message', data => handleMessage(socketId, JSON.parse(data.toString())));
  ws.on('close', () => clients.delete(socketId));

  // Send recent history on connect
  if (context.conversationId) {
    const history = await db.chatMessages.findMany({ where: { conversationId: context.conversationId }, take: 50, orderBy: { createdAt: 'asc' } });
    ws.send(JSON.stringify({ type: 'history', messages: history }));
  }
});

// Expose cart state to agents — fetch on each message to stay current
export async function getConversationContext(conversationId: string) {
  const conversation = await db.chatConversations.findUnique({ where: { id: conversationId }, include: { customer: true } });
  const [cart, recentOrders] = await Promise.all([
    db.carts.findFirst({ where: { customerId: conversation.customerId, status: 'active' }, include: { items: { include: { product: true } } } }),
    db.orders.findMany({ where: { customerId: conversation.customerId }, orderBy: { createdAt: 'desc' }, take: 3 }),
  ]);

  return {
    customer: { name: conversation.customer?.firstName, segment: conversation.customer?.segment, lifetimeValue: conversation.customer?.totalSpentCents / 100 },
    cart: { items: cart?.items ?? [], totalValue: cart?.items.reduce((sum, i) => sum + i.priceInCents * i.quantity, 0) / 100 ?? 0 },
    recentOrders,
  };
}

// Auto-respond to order status queries
async function handleOrderStatusQuery(conversationId: string, message: string, customerId?: string): Promise<boolean> {
  const orderNumberMatch = message.match(/#?(\d{5,})/);
  if (!orderNumberMatch && !/order|track/i.test(message)) return false;

  const order = orderNumberMatch
    ? await db.orders.findFirst({ where: { orderNumber: orderNumberMatch[1], customerId } })
    : customerId ? await db.orders.findFirst({ where: { customerId }, orderBy: { createdAt: 'desc' } }) : null;

  if (!order) return false;

  const statusMsg = `Your order #${order.orderNumber} is **${order.status}**.${order.shipments[0]?.trackingUrl ? ` [Track package](${order.shipments[0].trackingUrl})` : ''}`;
  await db.chatMessages.create({ data: { conversationId, senderType: 'bot', type: 'text', payload: { body: statusMsg } } });
  broadcastToConversation(conversationId, { type: 'bot_message', body: statusMsg });
  return true;
}

---

第 3 步：配置主动聊天触发条件

主动聊天触发条件会在访客离开前的关键时刻与其互动，从而提升高购买意向页面的转化率。

Shopify Inbox： 前往 Inbox → Manage → Proactive chat，根据页面停留时间或购物车金额设置触发条件。

Tidio： 前往 Automation → Triggers 并创建规则，例如：

• “访客在结账页面停留了 3 分钟” → 发送“需要帮助完成订单吗？”
• “购物车金额超过 $150” → 发送“您符合免运费条件——如有任何问题，请告知我们”
• “检测到退出意图” → 在访客离开前发送聊天消息

设置主动触发条件的经验法则：

• 针对高购买意向页面：结账页面、包含高价商品的商品页面
• 不要在每个页面都触发——这样会打扰访客
• 在页面停留 45 秒以上后再触发（表明访客有意向），而不是立即触发

---

第 4 步：衡量聊天的影响

每月跟踪以下指标，以评估聊天的投资回报率：

指标	衡量方式
聊天转化率	过去 24 小时内发生过聊天的订单数 / 对话总数
平均响应时间	在 Tidio、Gorgias 或 Inbox 工作台中查看报告
聊天带来的收入	使用 UTM 参数或平台的订单标记功能，为订单添加 source: live_chat 标签
CSAT 评分	在聊天工具设置中启用聊天后的满意度调查

最佳实践

• 先使用 Shopify Inbox 或 Tidio，再考虑自定义开发——这些工具无需工程开发即可满足 95% 的实时聊天需求
• 显示正在输入指示器——大多数平台会自动显示；这能显著缩短用户感知到的等待时间
• 限制每位客服人员同时处理的对话数——为保证回复质量，同时处理 3–4 个聊天是上限；Gorgias 和 Tidio 都允许设置此上限
• 告知客户聊天内容会被录制——对于欧盟客户，请确保已取得同意，并根据 GDPR 提供导出／删除聊天记录的功能
• 将所有消息持久化到数据库——WebSocket 断开不应导致对话历史记录丢失；重连时应从数据库恢复状态（自定义构建时）

常见问题

问题	解决方案
页面导航时聊天小组件无法正常工作	使用悬浮式常驻小组件；单页应用路由不应重新初始化聊天；Tidio 和 Gorgias 都能正确处理这种情况
Agent 看到的购物车数据已过时	每次客户发送消息时都重新获取购物车上下文，而不是只在对话开始时获取一次——购物车会在对话期间发生变化
主动聊天触发器在每个页面都会触发	将触发器限制在 2–3 个高意向页面，并设置每个会话的触发上限（每个会话最多触发一次）
聊天记录通过邮件发送时包含敏感订单数据	检查聊天记录邮件中包含的内容；发送邮件前移除付款详情、部分银行卡号和内部备注

相关技能

• @customer-support-integration
• @personalization-engine
• @customer-segmentation