customer-support-integration について
ECサイトのヘルプデスク連携を計画し、チケット内で注文情報を参照しながら振り分けや更新を自動化するためのスキルです。Shopify、WooCommerce、BigCommerce、カスタムストア向けの選択肢と実装方法を扱います。
主な機能
- 01ヘルプデスクとプラットフォームの選定
- 02チケットへの注文情報表示
- 03VIPチケットの振り分けルール
- 04注文イベントによるチケット作成
- 05CSAT同期のガイダンス
活用シーン
- 01サポート担当者に注文詳細を表示
- 02高額顧客をVIPチームへ振り分け
- 03配送や不正検知イベントでチケット作成
- 04サポート評価をCRMと同期
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ finsilabs/ awesome-ecommerce-skills --skill customer-support-integrationインストール後、Claude Code で/customer-support-integrationを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
tile.jsonevals/intercom-canvas-kit-order-context-sideba/criteria.jsontask.mdevals/zendesk-ticket-auto-creation-from-order-/criteria.jsontask.mdevals/zendesk-webhook-csat-sync-and-vip-ticket/criteria.jsontask.md詳細
カスタマーサポート連携
概要
ヘルプデスクをストアに接続すると、注文履歴、追跡情報、顧客の購入金額がすべてのサポートチケットに自動表示されます。エージェントがシステム間を行き来する必要がなくなるため、平均対応時間を40〜60%短縮できます。Shopifyでは、Gorgiasがプラットフォームにネイティブ対応した専用ヘルプデスクです。その他のプラットフォームを利用している場合や、Zendesk/Intercomのユーザーの場合は、専用の連携アプリでシステムを接続できます。標準アプリでは提供されない高度な双方向自動化(注文イベントに応じたチケットの自動作成、VIP振り分け、CSATのCRMへの同期)が必要な場合に限り、カスタム連携を構築してください。
このスキルを使用する場面
- チケットに注文番号が自動入力されないため、サポートエージェントが顧客に何度も注文番号を尋ねている場合
- Zendesk Sunshine AppsまたはIntercom Canvas Kitを実装して、エージェントのインターフェース内に注文詳細を表示する場合
- 注文イベント(配送失敗、不正利用の保留、入荷待ち)をきっかけにチケット作成を自動化する場合
- 注文金額に基づいてチケットを振り分け、VIP顧客を優先する場合
- 顧客の健全性スコアリングのために、サポートのCSATスコアをCRMに同期する場合
基本手順
ステップ1:プラットフォームを特定し、適切なヘルプデスクを選ぶ
| プラットフォーム | 最適なヘルプデスク | 理由 |
|---|---|---|
| Shopify | Gorgias | Shopify専用に構築されており、注文データへの深いアクセス、注文情報を取得するマクロ変数、チケット内から実行できるワンクリック操作(返金、キャンセル、再注文)に対応 |
| Shopify | Zendesk | すでにZendeskを利用しているチームに適しています。App StoreからZendesk用のShopifyアプリをインストールします |
| WooCommerce | GorgiasまたはFreshdesk | GorgiasはWooCommerceに対応しています。Freshdeskを利用しているチームには、FreshdeskとWooCommerceのプラグインが適しています |
| BigCommerce | GorgiasまたはZendesk | どちらにもアプリマーケットプレイスにBigCommerce連携機能があります |
| カスタム/ヘッドレス | カスタム連携を使用したZendeskまたはIntercom | サイドバーアプリを構築して、チケットに注文情報を表示します |
ステップ2:プラットフォーム固有のセットアップ
Shopify
オプションA:Gorgias(Shopifyにおすすめ)
Gorgiasは、Shopifyのサポートに最も広く使われているヘルプデスクで、プラットフォームとの連携が最も充実しています。
- Shopify App StoreからGorgiasをインストールします
- GorgiasがShopifyストアのデータにアクセスすることを許可します
- 顧客がShopifyアカウントに登録されているメールアドレスからメールを送信すると、Gorgiasは注文履歴、顧客情報、配送状況を各チケットに自動で取り込みます
Gorgiasがエージェントに自動表示する情報:
- 顧客名、メールアドレス、購入総額、注文数
- 過去のすべての注文と、そのステータス、商品、追跡情報
- すべてのチャネルを横断したライブチャット履歴
自動化ルールの設定:
- Gorgias → Automation → Rulesに移動します
- 次のようなルールを作成します:
- 顧客生涯価値が500ドルを超えた場合、チケットに「VIP」タグを自動で付ける
- VIPチケットをシニアサポートチームに自動で割り当てる
- チケットに「注文はどこですか」が含まれる場合、注文状況を自動返信する
Gorgias内で実行できるワンクリック操作:
- チケットのサイドバーから直接、注文の返金、キャンセル、複製を行う
- Gorgiasを離れずに注文に割引コードを適用する
- 交換品用の下書き注文を作成する
Gorgiasのマクロ(動的変数を使ったテンプレート返信):
- 注文データを自動で取り込むマクロを作成します:
Your order {{order.name}} is currently {{order.fulfillment_status}} - Settings → Macrosに移動して、マクロを作成、管理します
WooCommerce
WooCommerce 向け Gorgias:
- WordPress.org から Gorgias WooCommerce プラグインをインストールするか、Gorgias のインテグレーションを通じて接続します
- WooCommerce ストアを接続します。Gorgias が注文履歴を自動的に取得します
WooCommerce 向け Freshdesk:
- WordPress プラグインディレクトリから Freshdesk Help Desk for WooCommerce をインストールします
- プラグインが WooCommerce の注文イベントから Freshdesk チケットを作成します
- Freshdesk エージェントは、インテグレーションを通じてチケットのサイドバーで顧客の注文詳細を確認できます
Zendesk との手動インテグレーション:
- Zendesk App Marketplace から Zendesk for WooCommerce をインストールします
- エージェントはメールアドレスで顧客を検索し、チケットのサイドバーで注文履歴を確認できます
BigCommerce
BigCommerce 向け Gorgias:
- BigCommerce App Marketplace から Gorgias をインストールします
- ストアを接続します。Shopify と同様の高度なインテグレーションを利用できます
BigCommerce 向け Zendesk:
- Zendesk App Marketplace から BigCommerce アプリをインストールします
- エージェントはチケットのサイドバーで顧客の詳細と注文履歴を確認できます
カスタム/ヘッドレス
Zendesk Sunshine App(サイドバーパネル)または Intercom Canvas Kit アプリを構築し、すべてのチケットに注文コンテキストを挿入します。
Zendesk サイドバーアプリ — データエンドポイント:
// GET /api/support/[email protected]
export async function getZendeskContext(req: Request, res: Response) {
const customerEmail = (req.query.email as string)?.toLowerCase();
if (!customerEmail) return res.json({ customer: null, orders: [] });
const [customer, recentOrders] = await Promise.all([
db.customers.findByEmail(customerEmail, { include: ['segmentScore'] }),
db.orders.findMany({
where: { customerEmail },
orderBy: { createdAt: 'desc' },
take: 5,
include: { lineItems: { include: { product: true } }, shipments: true },
}),
]);
res.json({
customer: customer ? {
lifetimeValue: customer.totalSpentCents / 100,
orderCount: customer.orderCount,
segment: customer.segmentScore?.segment,
tags: customer.tags,
} : null,
orders: recentOrders.map(o => ({
number: o.orderNumber,
status: o.status,
total: o.totalCents / 100,
createdAt: o.createdAt,
trackingUrl: o.shipments[0]?.trackingUrl,
items: o.lineItems.map(i => ({ name: i.product.name, quantity: i.quantity })),
})),
});
}
高額顧客のチケットを VIP キューに振り分ける:
// Called when a new Zendesk ticket is created (via Zendesk webhook)
export async function applyTicketRouting(ticketId: string) {
const ticket = await fetchZendeskTicket(ticketId);
const customerEmail = ticket.requester?.email?.toLowerCase();
if (!customerEmail) return;
const customer = await db.customers.findByEmail(customerEmail, { include: ['segmentScore'] });
if (!customer) return;
const isVIP = ['champions', 'cannot_lose_them'].includes(customer.segmentScore?.segment ?? '');
const isHighValue = customer.totalSpentCents >= 100000; // $1,000+
if (isVIP || isHighValue) {
await fetch(`https://${process.env.ZENDESK_SUBDOMAIN}.zendesk.com/api/v2/tickets/${ticketId}.json`, {
method: 'PUT',
headers: { Authorization: getZendeskAuthHeader(), 'Content-Type': 'application/json' },
body: JSON.stringify({
ticket: {
priority: 'urgent',
group_id: process.env.ZENDESK_VIP_GROUP_ID,
tags: [...(ticket.tags ?? []), 'vip-customer'],
},
}),
});
}
}
// Auto-create ticket on delivery failure
export async function onDeliveryFailed(shipmentId: string) {
const shipment = await db.shipments.findById(shipmentId, { include: ['order.customer'] });
await fetch(`https://${process.env.ZENDESK_SUBDOMAIN}.zendesk.com/api/v2/tickets.json`, {
method: 'POST',
headers: { Authorization: getZendeskAuthHeader(), 'Content-Type': 'application/json' },
body: JSON.stringify({
ticket: {
subject: `Delivery failed — Order #${shipment.order.orderNumber}`,
comment: { body: `Delivery attempt failed on ${new Date().toDateString()}. Carrier: ${shipment.carrier}. Tracking: ${shipment.trackingNumber}.` },
requester: { email: shipment.order.customer.email },
priority: 'high',
tags: ['delivery-failure', 'auto-created'],
},
}),
});
}
ステップ 3:VIP 顧客向けのチケット振り分けルールを設定する
最も価値の高い顧客のチケットを優秀なエージェントに振り分け、より迅速に対応できるようにします。
Gorgias の振り分けルール:
- Automation → Rules → Create Rule に移動します
- 条件:
Customer → Total spent → is greater than → $500 - アクション:
Add tag → vip、Assign to → VIP Support Team、Set priority → Urgent
Zendesk のトリガー:
- Admin → Business Rules → Triggers → Add trigger に移動します
- 条件:チケットのタグに「vip-customer」が含まれる
- アクション:グループ(VIP Support)に割り当て、優先度を Urgent に設定します
SLA の目標を定義する:
- VIP 顧客:1 時間以内に初回返信
- 標準顧客:24 時間以内に初回返信
- Gorgias → Settings → Business hours and SLAs または Zendesk → Admin → SLAs で設定します
ベストプラクティス
- Shopify ストアには Gorgias を使用する — 専用に開発されたソリューションです。セットアップ時間を短縮でき、インテグレーションも高度なため、サブスクリプション費用に見合う価値があります
- ヘルプデスクの API トークンをクライアント側のコードに保存しない — Zendesk と Intercom の API トークンには、すべてのチケットへの書き込み権限があります。必ずサーバー経由でリクエストをプロキシしてください
- すべてのチケットに注文 ID を添付する — これはサポートシステムとコマースデータベースを結び付けるキーであり、双方向同期と自動化を可能にします
- サイドバーの注文コンテキストを最新の状態に保つ — データのキャッシュは最大 60 秒にしてください。エージェントが古い注文状況を見ることは、読み込み中のスピナーよりも悪影響があります
- 注文に対するエージェントのすべての操作を記録する — ヘルプデスク内から実行された返金、注文変更、ステータス更新の監査証跡を保持します
よくある問題
| 問題 | 解決策 |
|---|---|
| メールアドレス検索で大文字と小文字が区別され、エージェントに別の顧客が表示される | 検索前にすべてのメールアドレスを小文字に正規化します。[email protected] と [email protected] は同じ顧客に紐付く必要があります |
| Webhook ペイロードが検証されない | ペイロードを処理する前に、Zendesk/Gorgias の Webhook 署名シークレットを使って HMAC 署名を検証します |
| CSAT 同期によって顧客レコードが重複して作成される | 必ず最初にメールアドレスで検索します。サポート Webhook から新しい顧客レコードを作成せず、既存の顧客に紐付けるか、処理をスキップします |
| 自動作成されたチケットに注文コンテキストがない | 作成時に注文 ID をカスタムチケットフィールドに設定します。これにより、双方向同期と正確な振り分けが可能になります |
関連スキル
- @live-chat-commerce
- @customer-segmentation
- @customer-lifetime-value