Sipariş sorgulama örneği

Bu örnek, konuşma kenar çubuğunda müşterinin siparişlerini gösteren küçük bir ClickFix uygulamasıdır. Node.js 22+ ile çalışır, hiçbir bağımlılığı yoktur ve MIT lisanslıdır. Aşağıdaki dosyaları aynı klasör yapısıyla kopyalayıp kendi uygulamanızın başlangıç noktası olarak kullanın. Protokolün ayrıntıları: Kendi uygulamanızı yapın.

Ne gösterirCopy Anchor Link

• clickfix.ready → clickfix.context el sıkışması ve bağlam belirtecinin yenilenmesi (public/app.js)
• Belirtecin sunucuda JWKS ile doğrulanması: EdDSA imzası, iss, aud, exp/nbf (lib/context-token.mjs)
• Konuşmanın müşteri e-postasının herkese açık API ile okunması (server.mjs)
• clickfix.action ile konuşmaya iç not ekleme ve müşteriye yanıt gönderme
• Açık/koyu tema, dar kenar çubuğuna uygun düzen ve yalnızca ClickFix panelinin çerçeveleyebilmesi (frame-ancestors)

ÇalıştırmaCopy Anchor Link

Dosyaları bir klasöre koyun, data/orders.json dosyasını oluşturun ve sunucuyu başlatın:

CLICKFIX_APP_ID=<app-id> \
CLICKFIX_API_KEY=cf_sk_... \
PANEL_ORIGINS=https://getclickfix.com \
npm start

Uygulama HTTPS üzerinden ve ClickFix panelinden farklı bir adreste yayında olmalıdır (ör. https://siparis.ornek.com). Yerelde denemek için bir HTTPS tüneli (Cloudflare Tunnel, ngrok vb.) kullanabilirsiniz.

ClickFix'e eklemeCopy Anchor Link

1. Organizasyon → Uygulama yönetimi sayfasında galeriden Sipariş sorgulama kartının Kur düğmesine basın.
2. Adres alanına uygulamanızın HTTPS adresini yazın ve kaydedin.
3. Kartta görünen Uygulama kimliği'ni kopyalayıp CLICKFIX_APP_ID olarak verin.
4. Bir konuşma açın; sağ paneldeki Uygulamalar bölümünde siparişler görünür.

Kaynak kodCopy Anchor Link

Her sekme bir dosyadır; sağ üstteki düğmeyle kopyalayın.

{
  "name": "clickfix-example-order-lookup",
  "version": "1.0.0",
  "private": true,
  "description": "ClickFix example app: order lookup in the conversation sidebar",
  "license": "MIT",
  "type": "module",
  "engines": { "node": ">=22" },
  "scripts": {
    "start": "node server.mjs",
    "test": "node --test test/*.test.mjs"
  }
}

Örnek veriCopy Anchor Link

data/orders.json örnek veridir; gerçek kullanımda server.mjs içindeki aramayı kendi sipariş sisteminize yapılan bir çağrıyla değiştirin. Dosya şu biçimde bir dizidir:

[
  {
    "id": "SP-1042",
    "email": "demo@example.com",
    "status": "shipped",
    "total": 1249.9,
    "currency": "TRY",
    "placed_at": "2026-10-24T09:12:00Z",
    "carrier": "Kargo A",
    "tracking": "KA123456789TR",
    "items": ["Kablosuz kulaklık", "Şarj kablosu"]
  },
  {
    "id": "SP-1017",
    "email": "demo@example.com",
    "status": "delivered",
    "total": 349,
    "currency": "TRY",
    "placed_at": "2026-10-02T14:40:00Z",
    "carrier": "Kargo B",
    "tracking": "KB987654321TR",
    "items": ["Telefon kılıfı"]
  }
]

Lisans: MIT. Bu sayfadaki kodu kendi uygulamanızda serbestçe kullanabilir ve değiştirebilirsiniz.

Sonraki adımlarCopy Anchor Link

• Kendi uygulamanızı yapın
• Uygulama galerisi
• API