Skip to main content

Widgets

Each widget on a dashboard is a configurable card that displays a specific type of content. Open the widget editor by clicking the menu icon on a widget and selecting Settings.

Widget Editor

The widget editor has three sections: card configuration, content-specific options, and design properties.

Card Configuration

FieldDescription
NameDisplay name for the widget
Card TypeToggle buttons to select the widget type

Card Types

TypeIconDescription
Chartbar_chartData visualization charts (bar, area, column, pie, etc.)
ReportlistTabular and summary reports
MenumenuMenu sections, categories, specials, products
TablestableTable layout displays (square, round, half-round)
Ordershopping_cartLive order data, order totals, client info
YouTubesmart_displayEmbedded YouTube videos
iFramewhatshotEmbedded web content via iframe
TexttextRich-text content blocks
ImageimageStatic or uploaded images

Type-Specific Configuration

Chart Widgets

FieldDescription
Chart TypeDropdown of 20+ chart types (bar, area, column, pie, bubble, bullet, box plot, bell curve, arcdiagram, etc.)
Value TypeSelect the data to chart (see Report Value Types)
Use Specific DatesToggle to use a custom date range instead of the default
Range TypeToggle buttons: year, month, date, week, hour, currentDay
Units BackSlider (0–100) — number of range units to look back
Refresh (seconds)Slider (0–100) — how often the widget refreshes data

Chart types: arcdiagram, area, arearange, areaspline, areasplinerange, bar, bellcurve, boxplot, bubble, bullet, column, columnrange, dependencies, funnel, gauge, heatmap, heatmapcoloraxis, histogram, networkgraph, pie, polygon, pyramids, sankey, scatter, streamgraph, treemap, variablepie, waterfall, wordcloud.

Report Widgets

FieldDescription
Value TypeSelect the report metric (see Report Value Types)
Use Specific DatesToggle for custom date range
Range Typeyear, month, date, week, hour, currentDay
Units BackSlider for how far back to pull data
Refresh (seconds)Auto-refresh interval

Report Value Types

Value TypeDescription
Avg CountAverage order count over the range
Category SalesSales broken down by category
Department SalesSales broken down by department
Employee SalesSales broken down by employee
TaxTax totals
Sales TotalsGross sales summary
Product SalesSales per product
Type SalesSales by product type
SalesRaw sales figures
Order CountNumber of orders
Employee Sales CountOrder count per employee
WeekDay GroupingSales grouped by day of week
FieldDescription
Value TypeSelect the menu content type
SelectDropdown to pick the specific item (category, special, etc.)
Disable ActionsToggle to hide interactive elements (for display-only)
Cannabis Style MenuToggle for MMJ-style menu layout
Value TypeDescription
Menu SectionA specific menu section
CategoryProduct category browsing
SpecialsCurrent specials and promotions
ProductSingle product detail (with product search selector)
Tier PricesPrice tier display
Catalog ScheduleScheduled catalog display
Flowers / Flowers2Flower-specific product layouts

Tables Widgets

FieldDescription
Value TypeSquare, Round, or Half-Round table layout

Order Widgets

FieldDescription
Value TypePOSOrder, ClientInfo, OrderTotal, or Limits
Disable ActionsToggle to hide interactive elements
Refresh (seconds)Auto-refresh interval for live order data

YouTube Widgets

FieldDescription
Video IDThe YouTube video ID (e.g., if URL is https://www.youtube.com/watch?v=PRQCAL_1234, enter PRQCAL_1234)
Auto PlayToggle to start playing automatically
RepeatToggle to loop the video

iFrame Widgets

FieldDescription
URLThe full URL to embed in the iframe

Text Widgets

FieldDescription
DescriptionRich-text editor (TipTap) for formatted content

Image Widgets

FieldDescription
ImageFile uploader to select an image from AWS S3

Design Properties

Every widget has visual styling controls at the bottom of the editor:

PropertyControlDescription
OpacitySlider (0–100)Widget card transparency
BorderSlider (0–100)Border width in pixels
Border-RadiusSlider (0–100)Corner rounding in pixels
LayerSlider (0–100)Stacking order (higher values render on top)
HeightTextWidget height (e.g., 400px, 400%)
WidthTextWidget width (e.g., 600px, 100%)

Custom CSS

Every widget has a CSS textarea for custom styling. You can enter arbitrary CSS that will be applied to the widget card. The Set Default CSS button resets to the default template.

Custom CSS is injected as a <style> element into the page <head> and scoped to the widget. Use this for fine-grained control over fonts, colors, spacing, and other visual properties.

Widget configuration is saved to the server automatically when you click Save or Save & Exit in the widget editor.