You can choose how an event is displayed with the type field.

Text (default)

const e = {
  name: "user upgraded",
  avatar: "💳",
  content: "Moved from Starter to Pro",
};

JSON

const e = {
  name: "new lead metadata",
  avatar: "🧩",
  type: "json",
  content: {
    source: "landing-page",
    utmCampaign: "launch-2026",
    score: 81,
  },
};

Image

const e = {
  name: "receipt captured",
  avatar: "🧾",
  type: "image",
  content: "https://images.unsplash.com/photo-1554224155-8d04cb21cd6c?w=1000",
};

Rows

const e = {
  name: "payment failed",
  avatar: "⚠️",
  type: "rows",
  content: [
    { label: "User ID", content: "usr_123" },
    { label: "Plan", content: "Pro" },
    { label: "Amount", content: "$49.00" },
    {
      label: "Gateway response",
      type: "json",
      content: { code: "card_declined", retryable: true },
    },
  ],
};

Notes:

1. If you do not pass type, Operational uses text.
2. Do not put rows inside rows.

Mixed rows example

Rows are useful when one event needs multiple content blocks.

const e = {
  name: "new user onboarding",
  avatar: "🧭",
  type: "rows",
  content: [
    { label: "User", content: "anna@example.com" },
    { label: "Plan", content: "Pro annual" },
    {
      label: "Metadata",
      type: "json",
      content: {
        source: "pricing-page",
        utmCampaign: "spring-launch",
      },
    },
    {
      label: "Welcome image",
      type: "image",
      content: "https://images.unsplash.com/photo-1521737604893-d14cc237f11d?w=1200",
    },
  ],
};

For each row item, the common fields are:

1. type (text, json, image)
2. label (optional display label)
3. content (string/object based on type)