Live Chat Commerce

Live Chat Commerce

Overview

Live chat for e-commerce goes beyond basic support — agents can assist customers in finding products, adding items to their cart, and applying discount codes, directly reducing purchase hesitation. Shopify Inbox (free), Tidio, and Gorgias Chat provide this out of the box with commerce-specific features like cart visibility, product card sharing, and order status bot responses. Only build a custom chat system if your commerce-specific requirements (custom cart manipulation, proprietary bot logic, white-labeled experience) exceed what these tools offer.

When to Use This Skill

• When adding live chat to a storefront to reduce pre-purchase questions and increase conversion
• When agents need to see a customer's current cart contents during a chat session
• When implementing automated order-status responses so agents handle only complex issues
• When measuring chat-to-conversion rate and revenue attributed to live chat
• When a third-party chat widget needs deeper commerce actions than it supports natively

Core Instructions

Step 1: Determine platform and choose the right chat tool

---

Step 2: Platform-specific setup

---

Shopify

Option A: Shopify Inbox (free, recommended starting point)

1. Go to Admin → Inbox → Turn on Shopify Inbox 2. Shopify Inbox installs a chat widget on your storefront automatically 3. Agents access conversations at inbox.shopify.com or via the Shopify mobile app

What agents see in every conversation:

• Customer's name and email if logged in
• Active cart contents with product images and prices
• Recent order history and fulfillment status

Commerce features:

• Agents can search and share product links directly from the chat interface
• The customer sees a product card with image, price, and "Add to Cart" button
• Agents can apply discount codes to the customer's cart

Setting up automated responses: 1. Go to Inbox → Manage → Instant answers 2. Add answers to common questions: shipping, returns, sizing 3. Enable the AI-powered summary and suggested replies (available in newer Inbox versions)

For order status bot: 1. Go to Inbox → Manage → Automated messages 2. Create an automated response for conversations containing keywords like "order status", "where is my order", "tracking" 3. Include a link to /account/orders for registered customers

Setting availability hours: 1. Go to Inbox → Manage → Away messages 2. Set business hours and configure an away message shown outside those hours

---

WooCommerce

Tidio for WooCommerce (recommended):

1. Install Tidio Live Chat from the WordPress plugin directory 2. After activation, configure in WooCommerce → Tidio 3. Tidio automatically shows agents:

• Current cart contents
• Order history
• Customer lifetime value

Commerce features in Tidio:

• Agents can view and share products from the chat interface
• Product recommendation cards sent by agents include image, price, and add-to-cart link
• Automated bot flows for order status lookup (Tidio integrates with WooCommerce orders)

Setting up order status bot: 1. In Tidio, go to Automation → Create Automation 2. Trigger: visitor sends a message containing "order" or "tracking" 3. Action: show a form asking for order number → look up via Tidio's WooCommerce integration → reply with status

LiveChat for WooCommerce: 1. Install LiveChat from WordPress.org 2. LiveChat's WooCommerce integration shows order data in the agent dashboard under "Customer Details" 3. Agents can see cart abandonment in real time and proactively engage

---

BigCommerce

Tidio from the App Marketplace:

1. Go to Apps → Search "Tidio" and install 2. Configuration is the same as the WooCommerce setup above 3. Tidio connects to BigCommerce orders automatically

LiveChat for BigCommerce: 1. Install from the BigCommerce App Marketplace 2. Agents see order history and cart contents per conversation

---

Custom / Headless

For headless storefronts needing custom commerce chat actions:

// 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;
}

---

Step 3: Configure proactive chat triggers

Proactive chat triggers engage visitors at key moments before they leave — increasing conversion on high-intent pages.

Shopify Inbox: Go to Inbox → Manage → Proactive chat and set triggers based on time on page or cart value.

Tidio: Go to Automation → Triggers and create rules like:

• "Visitor has been on the checkout page for 3 minutes" → send "Need help completing your order?"
• "Cart value exceeds $150" → send "You qualify for free shipping — let us know if you have any questions"
• "Exit intent detected" → send a chat message before they leave

Rule of thumb for proactive triggers:

• Target high-intent pages: checkout, product pages with high-value items
• Don't trigger on every page — it's intrusive
• Trigger after 45+ seconds on page (shows intent) not immediately

---

Step 4: Measure chat impact

Track these metrics monthly to evaluate chat ROI:

Best Practices

• Start with Shopify Inbox or Tidio before building anything custom — these tools handle 95% of live chat needs with no engineering work
• Show a typing indicator — most platforms do this automatically; it significantly reduces perceived wait time
• Cap concurrent conversations per agent — 3–4 simultaneous chats is the maximum for quality responses; Gorgias and Tidio let you set this limit
• Inform customers that chat conversations are recorded — for EU customers, ensure consent is in place and provide the ability to export/delete chat transcripts per GDPR
• Persist all messages to the database — a WebSocket disconnect should not lose conversation history; rebuild state from the DB on reconnect (custom builds)

Common Pitfalls

Related Skills

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

Agent Workspace and Product Sharing for BrightCart Chat

Problem/Feature Description

BrightCart is integrating a live chat feature where customer support agents handle shopping queries in real time. The agents need a rich workspace that shows them the customer's current situation — what's in their cart, recent orders, and what products they've been looking at — so they can give personalized help without asking repetitive questions. Agents also need to be able to push product recommendations directly into the customer's chat window as interactive cards that the customer can act on immediately.

A critical operational concern has come up: agents at BrightCart frequently have too many simultaneous conversations open, leading to slower response times and frustrated customers. The system should enforce sensible limits. Additionally, the customer-facing chat must work correctly across multiple pages of the store, since customers navigate around while chatting. The team has also flagged a bug report: cart data shown to agents goes stale mid-conversation because it's loaded once at the start; it needs to stay current.

Output Specification

Implement the server-side agent API and the customer-side React component in TypeScript. Produce the following files:

• src/agent-context-api.ts — the REST endpoint that returns conversation context for an agent, including customer info, cart state, order history, and browsing activity
• src/agent-product-search.ts — the REST endpoint that lets agents search the product catalog by keyword
• src/components/ProductCard.tsx — the React component that renders a product card inside the customer's chat window when an agent shares one
• design-notes.md — a short document explaining your decisions around data freshness, conversation load limits, and chat widget persistence across page navigation

You may use stub/mock calls (e.g. db.carts.findActiveByCustomer(...)) where database access would occur. No real database connection is needed.

Chat Automation and Revenue Attribution for NovaMart

Problem/Feature Description

NovaMart's support team is overwhelmed with repetitive order status queries that currently consume a significant portion of agent time. The operations team wants an automated bot layer that intercepts these common questions and responds instantly, routing only complex issues to human agents. The bot needs to handle both explicit order number lookups and natural language questions about order whereabouts.

At the same time, NovaMart's leadership wants to understand the ROI of their live chat investment. There's currently no way to tell which sales were influenced by a chat session, so the marketing and ops teams can't demonstrate the value of the chat team or reward agents who contribute to conversions. The system needs to track which completed orders followed a recent chat conversation, credit the responsible agent, and capture the data needed for performance reporting.

Output Specification

Implement the automation and attribution logic in TypeScript. Produce the following files:

• src/bot-handler.ts — the bot auto-response function that detects and handles order status queries
• src/attribution.ts — the function that runs when an order is placed and records conversion attribution
• src/analytics.ts — a module that includes logic to track and surface agent first-response time, including any alerting mechanism when thresholds are exceeded
• design-notes.md — a brief document explaining your detection logic for order queries, how the bot integrates with human agent routing, and your attribution window choice

You may use stub/mock calls (e.g. db.orders.findByNumber(...)) where database access would occur. No real database connection is needed.

Build the Core Chat Server for ShopStream Live

Problem/Feature Description

ShopStream is launching a live commerce platform that lets support agents chat with customers in real time while they're shopping. The engineering team has been tasked with building the core WebSocket server component that will power this system. The server needs to handle both customer and agent connections simultaneously, maintain conversation state across multiple participants, and reliably deliver messages even when connections are unstable or clients briefly disconnect.

The server must support multiple message types — plain text, product card shares, cart actions, discount codes, and order status — and ensure that messages are broadcast correctly to all participants in a conversation. The system will eventually be deployed on a load-balanced cloud platform where idle connections may be dropped, so the implementation needs built-in resilience against those scenarios.

Output Specification

Implement the WebSocket server in TypeScript. Write a complete implementation file at src/chat-server.ts that includes:

• All necessary type definitions for clients, conversations, and message types
• WebSocket server initialization and connection handling
• Message persistence and broadcast logic
• Resilience features (rate limiting, connection health checks)
• Order-sequence handling to cope with out-of-order delivery

Also produce a short design-notes.md file documenting the key design decisions you made, including how you handle connection drops, message ordering, and abuse prevention.

You may use Node.js, TypeScript, and any npm packages you consider appropriate. You do not need to connect to a real database — use stub/mock function calls (e.g. db.chatMessages.create(...)) as placeholders where database access would occur.