Webhook Widget

Example

Revenue, with a chart

A chart image alongside native text.

imagehybridzstack
Revenue, with a chart
json 
{
  "v": 1,
  "refresh": 1800,
  "accessibility": "Revenue today 8,240 pounds, up 12 percent on yesterday",
  "url": "https://dashboard.example.com/revenue",
  "view": {
    "type": "vstack",
    "align": "leading",
    "spacing": 0,
    "padding": 14,
    "bg": "#12141C",
    "children": [
      {
        "type": "text",
        "text": "REVENUE TODAY",
        "style": "caption2",
        "weight": "bold",
        "color": "#6E7BA8"
      },
      {
        "type": "hstack",
        "spacing": 8,
        "align": "bottom",
        "children": [
          {
            "type": "text",
            "text": "£8,240",
            "style": "largeTitle",
            "weight": "bold",
            "design": "rounded",
            "color": "white"
          },
          {
            "type": "text",
            "text": "+12%",
            "style": "subheadline",
            "weight": "semibold",
            "color": "mint"
          }
        ]
      },
      {"type": "spacer"},
      {
        "type": "image",
        "url": "https://webhookwidget.com/img/sparkline.png",
        "fit": "fill",
        "h": 46,
        "tint": "mint"
      }
    ]
  }
}
Built for the medium. The roomier sizes show the same payload with space to spare; a tighter slot gets its own tree from the server, not this one shrunk.

How it works

An image node is useful for a chart or other graphic that would be awkward to build from nodes. Keep the surrounding labels as text so they support Dynamic Type and VoiceOver.

This is the pattern to reach for instead of bitmap mode. Returning the whole widget as a PNG costs you live timers, Dynamic Type, automatic light and dark, and legible tinted rendering. Wrapping one chart in a JSON view costs you none of those.

fit decides how the image fills its box: fit keeps the whole image visible, fill covers the box and crops. Give the node a w and h so layout does not depend on how large the file happens to be.

Put it on your Home Screen

This example is served live, with timestamps generated at the moment of the request. Add the URL as a hook in the app and it will work on a real phone.

URL 
https://webhookwidget.com/demo/revenue

Open the raw response →

Next

Support queue — A support queue with the oldest ticket highlighted.
All examples