Order Status Cards

Display order tracking information in rich card format.

Overview

Order status cards show comprehensive order information:

┌─────────────────────────────────┐
│ Order #12345                    │
│ Placed: Jan 28, 2026            │
├─────────────────────────────────┤
│ Status: 🚚 Shipped              │
│ Carrier: FedEx                  │
│ Tracking: 1234567890            │
│ Expected: Feb 2, 2026           │
├─────────────────────────────────┤
│ [Track Package] [View Details]  │
└─────────────────────────────────┘

Card Components

Header

Field	Description
Order Number	Order ID
Order Date	When placed
Status Badge	Current status

Status Section

Field	Description
Status	Processing, Shipped, Delivered
Carrier	Shipping carrier name
Tracking Number	Clickable tracking link
Expected Date	Estimated delivery

Items Summary

Optional items display:

Items:
• Blue Widget (x2)
• Red Gadget (x1)
Total: $89.97

Actions

Available action buttons:

Action	Description
Track Package	Opens carrier tracking
View Details	Full order page
Contact Support	Start support flow
Cancel Order	If cancellable

Status Types

Order Statuses

Status	Icon	Color
Pending	⏳	Gray
Processing	⚙️	Blue
Shipped	🚚	Purple
Out for Delivery	📦	Orange
Delivered	✅	Green
Cancelled	❌	Red
Returned	↩️	Yellow

Visual Timeline

Show fulfillment progress:

[✓] Order Placed
[✓] Processing
[✓] Shipped
[ ] Out for Delivery
[ ] Delivered

Data Sources

Shopify Orders

Automatically synced when connected:

• Order status
• Fulfillment details
• Tracking info
• Items and totals

Other Platforms

For WooCommerce, custom stores:

• Configure webhook integration
• Map order status fields
• Sync tracking numbers

Configuration

Display Settings

In Settings → Widget → Rich Messages:

Setting	Options
Show Order Cards	Yes/No
Show Items	Yes/No
Show Totals	Yes/No
Show Timeline	Yes/No

Information Shown

Choose what to display:

✓ Order number
✓ Status
✓ Tracking number
✓ Expected date
☐ Item details
☐ Price breakdown

Trigger Scenarios

Cards display when:

1. Customer asks "Where is my order?"
2. AI looks up order by number
3. Order status changes (proactive)
4. Customer clicks "Track Order"

Tracking Integration

Carrier Links

Automatic tracking links for:

Carrier	Tracking URL
FedEx	fedex.com/tracking
UPS	ups.com/track
USPS	tools.usps.com/tracking
DHL	dhl.com/tracking

Embedded Tracking

Show tracking details in widget:

📦 Package in transit
   Jan 30 - Departed facility (Chicago, IL)
   Jan 29 - In transit (Memphis, TN)
   Jan 28 - Shipped

Proactive Updates

Send order updates automatically:

Trigger: Order status changes to "Shipped"
Action: Send card with tracking info

Customer receives notification in widget.

Styling

Cards inherit widget theme:

• Background matches chat
• Status colors are semantic
• Actions use primary color

Compact Mode

For smaller displays:

Order #12345 - 🚚 Shipped
Tracking: 1234567890
[Track]

Best Practices

Clear Status

• Use simple language
• Show progress visually
• Provide expected dates

Actionable

• Include tracking links
• Offer support access
• Enable self-service

Timely

• Update in real-time
• Send proactive notifications
• Acknowledge delays