Widget Templates Reference

Complete reference for all seven built-in widget templates, their slots, supported sizes, and style options.

Stat

A single metric with optional label and change indicator. Best for KPIs and at-a-glance numbers.

Slots

Slot	Type	Required	Description
label	string	Yes	What the metric represents
value	string	Yes	The main value to display
change	string	No	Change indicator (e.g., "+12.4%")

Supported Sizes

• Compact
• Standard
• Expanded

Example Data Mapping

label: "Monthly Revenue"          (static)
value: {{ data.revenue.total }}    (dynamic, from data source)
change: {{ data.revenue.change }}  (dynamic)

---

Card

A content card with title, body, and optional tag. Best for alerts, updates, and status messages.

Slots

Slot	Type	Required	Description
tag	string	No	Category or status label
title	string	Yes	Card heading
body	string	Yes	Card body text

Supported Sizes

• Standard
• Expanded

Example Data Mapping

tag: {{ data.priority }}
title: "Order #{{ data.order_id }} shipped"
body: "{{ data.item_count }} items on the way to {{ data.city }}"

---

List

An ordered list of items with optional status indicators. Best for tasks, feeds, and queues.

Slots

Slot	Type	Required	Description
title	string	Yes	List heading
items	array	Yes	Array of list items
items[].text	string	Yes	Item text content
items[].status	string	No	Status indicator (e.g., "done", "pending")

Supported Sizes

• Standard
• Expanded

Example Data Mapping

title: "Today's Tasks"
items: {{ data.tasks }}         (array from data source)
items[].text: {{ item.name }}
items[].status: {{ item.completed }}

---

Table

Rows and columns for structured data. Best for dashboards, leaderboards, and monitoring.

Slots

Slot	Type	Required	Description
title	string	Yes	Table heading
columns	array	Yes	Column header labels
rows	array	Yes	Array of row data

Supported Sizes

• Standard
• Expanded

Example Data Mapping

title: "Service Health"
columns: ["Service", "Region", "Status"]    (static)
rows: {{ data.services }}                   (array from data source)

---

Chart

A bar chart for visualizing trends and comparisons. Best for time-series data and relative values.

Slots

Slot	Type	Required	Description
title	string	Yes	Chart heading
value	string	No	Summary value displayed alongside the title
bars	array	Yes	Array of data points
bars[].label	string	Yes	X-axis label for each bar
bars[].value	number	Yes	Numeric value determining bar height

Supported Sizes

• Standard
• Expanded

Example Data Mapping

title: "Weekly Signups"
value: {{ data.total_signups }}
bars: {{ data.daily_signups }}
bars[].label: {{ item.day }}
bars[].value: {{ item.count }}

---

Image

An image from a URL with optional caption. Best for photos, charts, and visual content served by your API.

Slots

Slot	Type	Required	Description
url	string	Yes	Image URL
caption	string	No	Text below the image

Supported Sizes

• Compact
• Standard
• Expanded

Example Data Mapping

url: {{ data.chart_image_url }}
caption: "Generated {{ data.updated_at }}"

---

Text

A formatted text block. Best for digests, summaries, and message-style content.

Slots

Slot	Type	Required	Description
eyebrow	string	No	Small text above the heading
heading	string	Yes	Main heading
body	string	Yes	Body text

Supported Sizes

• Standard
• Expanded

Example Data Mapping

eyebrow: "Daily Digest"                    (static)
heading: {{ data.digest.title }}            (dynamic)
body: {{ data.digest.summary }}             (dynamic)

---

General Notes

• Static values are hardcoded strings you enter in the dashboard
• Dynamic values are mapped from data source fields using syntax
• See the Liquid Templates reference for formatting and transformation options
• All templates support dark mode automatically on the user's device