live-chat-commerce

What this skill does

# 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)**

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:

```typescript
// 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 p