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

Platform	Recommended Tool	Why
Shopify	Shopify Inbox (free)	Native Shopify tool; shows customer's cart, recent orders, and lets agents send product links with prices
Shopify	Tidio	More advanced AI bot, integrations, and analytics than Inbox; supports product card sharing
Shopify	Gorgias Chat	Best for teams already using Gorgias for support ticketing; unified inbox
WooCommerce	Tidio or LiveChat	Both have WooCommerce plugins; show order history and cart contents to agents
BigCommerce	Tidio or LiveChat	Available from BigCommerce App Marketplace
Custom / Headless	Build with WebSocket server	Required when none of the above provide sufficient commerce API access

Step 2: Platform-specific setup

Shopify

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

Go to Admin → Inbox → Turn on Shopify Inbox
Shopify Inbox installs a chat widget on your storefront automatically
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:

Go to Inbox → Manage → Instant answers
Add answers to common questions: shipping, returns, sizing
Enable the AI-powered summary and suggested replies (available in newer Inbox versions)

For order status bot:

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

Setting availability hours:

Go to Inbox → Manage → Away messages
Set business hours and configure an away message shown outside those hours

WooCommerce

Tidio for WooCommerce (recommended):

Install Tidio Live Chat from the WordPress plugin directory
After activation, configure in WooCommerce → Tidio
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:

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

LiveChat for WooCommerce:

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

BigCommerce

Tidio from the App Marketplace:

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

LiveChat for BigCommerce:

Install from the BigCommerce App Marketplace
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:

Metric	How to Measure
Chat-to-conversion rate	Orders where a chat occurred in the previous 24 hours / total conversations
Average response time	Reported in Tidio, Gorgias, or Inbox dashboards
Revenue attributed to chat	Tag orders with `source: live_chat` using UTM parameters or your platform's order tagging
CSAT score	Enable post-chat satisfaction surveys in your chat tool settings

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

Problem	Solution
Chat widget breaks on page navigation	Use a floating persistent widget; single-page app routing should not re-initialize the chat; Tidio and Gorgias handle this correctly
Agent sees stale cart data	Refetch cart context on each message from the customer, not once at conversation start — carts change during the conversation
Proactive chat triggers fire on every page	Limit triggers to 2–3 high-intent pages with a per-session cap (fire at most once per session)
Chat transcript emailed with sensitive order data	Review what's included in transcript emails; remove payment details, partial card numbers, and internal notes before the email sends

Related Skills

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

live-chat-commerce