Skip to content
ClickFix
Documentation

Order lookup sample

Full source of a dependency-free Node.js sample app that shows the customer's orders in the conversation sidebar.

This sample is a small ClickFix app that shows the customer's orders in the conversation sidebar. It runs on Node.js 22+, has no dependencies and is MIT licensed. Copy the files below with the same folder layout and use them as the starting point of your own app. Protocol details: Build your own app.

What it shows

  • The clickfix.ready → clickfix.context handshake and context token renewal (public/app.js)
  • Verifying the token on the server with the JWKS: EdDSA signature, iss, aud, exp/nbf (lib/context-token.mjs)
  • Reading the conversation's customer email with the public API (server.mjs)
  • Adding an internal note and replying to the customer with clickfix.action
  • Light/dark theme, a layout that fits the narrow sidebar, and framing allowed only for the ClickFix panel (frame-ancestors)

Run it

Put the files in a folder, create data/orders.json and start the server:

CLICKFIX_APP_ID=<app-id> \
CLICKFIX_API_KEY=cf_sk_... \
PANEL_ORIGINS=https://getclickfix.com \
npm start
VariableDescription
CLICKFIX_APP_IDThe App ID shown on the app's card after you register it in ClickFix. It is the token's aud.
CLICKFIX_API_KEYAn API key with the conversations:read scope. Without it the app runs in demo mode and shows the orders of demo@example.com.
CLICKFIX_API_URLDefault https://api.getclickfix.com
PANEL_ORIGINSPanel origin(s) allowed to frame the app, comma separated.
PORTDefault 8787

The app must be served over HTTPS from a different origin than the ClickFix panel (e.g. https://orders.example.com). To try it locally, use an HTTPS tunnel (Cloudflare Tunnel, ngrok, etc.).

Add it to ClickFix

  1. On Organization → Manage apps, click Install on the Order lookup card in the gallery.
  2. Enter your app's HTTPS URL and save.
  3. Copy the App ID shown on the card and pass it as CLICKFIX_APP_ID.
  4. Open a conversation; the orders appear under Apps in the right panel.

Source code

Each tab is one file; copy it with the button in the top-right corner. The UI text of the sample is in Turkish.

{
  "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"
  }
}

Sample data

data/orders.json is sample data; in real use, replace the lookup in server.mjs with a call to your own order system. The file is an array like this:

data/orders.json
[
  {
    "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ı"]
  }
]

License: MIT. You may use and change the code on this page freely in your own app.

Next steps

On this page

What it showsRun itAdd it to ClickFixSource codeSample dataNext steps