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
| Field | Description |
|---|---|
| Name | Display name for the widget |
| Card Type | Toggle buttons to select the widget type |
Card Types
| Type | Icon | Description |
|---|---|---|
| Chart | bar_chart | Data visualization charts (bar, area, column, pie, etc.) |
| Report | list | Tabular and summary reports |
| Menu | menu | Menu sections, categories, specials, products |
| Tables | table | Table layout displays (square, round, half-round) |
| Order | shopping_cart | Live order data, order totals, client info |
| YouTube | smart_display | Embedded YouTube videos |
| iFrame | whatshot | Embedded web content via iframe |
| Text | text | Rich-text content blocks |
| Image | image | Static or uploaded images |
Type-Specific Configuration
Chart Widgets
| Field | Description |
|---|---|
| Chart Type | Dropdown of 20+ chart types (bar, area, column, pie, bubble, bullet, box plot, bell curve, arcdiagram, etc.) |
| Value Type | Select the data to chart (see Report Value Types) |
| Use Specific Dates | Toggle to use a custom date range instead of the default |
| Range Type | Toggle buttons: year, month, date, week, hour, currentDay |
| Units Back | Slider (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
| Field | Description |
|---|---|
| Value Type | Select the report metric (see Report Value Types) |
| Use Specific Dates | Toggle for custom date range |
| Range Type | year, month, date, week, hour, currentDay |
| Units Back | Slider for how far back to pull data |
| Refresh (seconds) | Auto-refresh interval |
Report Value Types
| Value Type | Description |
|---|---|
| Avg Count | Average order count over the range |
| Category Sales | Sales broken down by category |
| Department Sales | Sales broken down by department |
| Employee Sales | Sales broken down by employee |
| Tax | Tax totals |
| Sales Totals | Gross sales summary |
| Product Sales | Sales per product |
| Type Sales | Sales by product type |
| Sales | Raw sales figures |
| Order Count | Number of orders |
| Employee Sales Count | Order count per employee |
| WeekDay Grouping | Sales grouped by day of week |
Menu Widgets
| Field | Description |
|---|---|
| Value Type | Select the menu content type |
| Select | Dropdown to pick the specific item (category, special, etc.) |
| Disable Actions | Toggle to hide interactive elements (for display-only) |
| Cannabis Style Menu | Toggle for MMJ-style menu layout |
Menu Value Types
| Value Type | Description |
|---|---|
| Menu Section | A specific menu section |
| Category | Product category browsing |
| Specials | Current specials and promotions |
| Product | Single product detail (with product search selector) |
| Tier Prices | Price tier display |
| Catalog Schedule | Scheduled catalog display |
| Flowers / Flowers2 | Flower-specific product layouts |
| Display Menu | Full browsable menu with category navigation and price schedules |
Display Menu Widget
The Display Menu widget renders a complete, browsable menu experience inside a dashboard. It includes a menu banner with title and description, price schedule sections organized by category, and optional side-panel category navigation.
Display Menu Admin Settings
When creating or editing a Display Menu, the following toggles control its behavior:
| Setting | Description |
|---|---|
| Show Side Panel Navigation | Enables a sticky side-panel that lists all categories. As the customer scrolls, the currently visible category is automatically highlighted (scroll-spy). Tapping a category scrolls to that section. |
| Disable in Staff Handheld | Hides this menu from staff users on phone-sized devices. Staff on full-size terminals still see the menu. Useful for keeping large-format customer menus off handheld POS units. |
Embedding Display Menus
A Display Menu can be embedded inside a dashboard by dragging the Display Menu widget from the Menus palette onto the grid. It inherits the dashboard's locked mode — when locked=true is set in the URL, the widget becomes view-only.
Chromeless Kiosk Mode
To hide the surrounding app chrome (user header bar, toolbar) when the menu is opened directly — for example, from a QR code or kiosk link — append hideNavigation=true to the display menu URL:
http://yoursite.com/display-menu?id=1;hideNavigation=true
In this mode, only the menu content is displayed with no surrounding navigation bar.
Tables Widgets
| Field | Description |
|---|---|
| Value Type | Square, Round, or Half-Round table layout |
Order Widgets
| Field | Description |
|---|---|
| Value Type | POSOrder, ClientInfo, OrderTotal, or Limits |
| Disable Actions | Toggle to hide interactive elements |
| Refresh (seconds) | Auto-refresh interval for live order data |
YouTube Widgets
| Field | Description |
|---|---|
| Video ID | The YouTube video ID (e.g., if URL is https://www.youtube.com/watch?v=PRQCAL_1234, enter PRQCAL_1234) |
| Auto Play | Toggle to start playing automatically |
| Repeat | Toggle to loop the video |
iFrame Widgets
| Field | Description |
|---|---|
| URL | The full URL to embed in the iframe |
Text Widgets
| Field | Description |
|---|---|
| Description | Rich-text editor (TipTap) for formatted content |
Image Widgets
| Field | Description |
|---|---|
| Image | File uploader to select an image from AWS S3 |
Product Filter Panel
The product search and browse pages include a Filters panel on the side that lets customers narrow down items by various attributes. Each filter category is presented as an accordion section with a labeled button, an icon, and a count badge showing how many selections are currently active.
| Filter | Icon | Description |
|---|---|---|
| Departments | storefront | Filter by product department |
| Brands | workspaces | Filter by brand |
| Categories | category | Filter by product category |
| Sub Categories | category | Filter by sub-category |
| Item Types | widgets | Filter by item type |
| Size | straighten | Filter by size |
| Colors | palette | Filter by color |
| Countries | public | Filter by country of origin |
Each filter button includes a chevron that rotates when expanded. Selecting a category automatically syncs the department filter to include the department(s) of the selected category.
Image Carousel Widget
The Image Carousel widget displays a rotating slideshow of images with captions. It auto-advances every 15 seconds and provides left/right arrow navigation.
Phone and Tablet Support
The carousel now renders on all screen sizes, including phones and tablets. On smaller screens, it adapts with a reduced viewport height and maintains full touch-friendly navigation arrows.
Dynamic Slide Height
Each slide in the carousel can have its own configured height. This allows slides of different aspect ratios to display at their proper proportions without stretching or cropping. If no height is set for a slide, the carousel uses a default height (300px on desktop, 100px on phone).
Image Fallback
If a carousel image fails to load, the system automatically substitutes a placeholder image. This keeps the carousel functional and visually consistent even when individual images are missing or broken.
Carousel on the Main Menu
When a carousel is assigned to a menu (via the carousel setting), it appears at the top of the main menu page for all users — including on phone-sized devices. The carousel renders at full width and adapts its height to the active slide.
Parallax Scrolling Effect
The carousel features a subtle parallax scrolling effect. As the user scrolls the page, the images within the carousel viewport shift slightly to create a sense of depth. The effect is performance-optimized, using requestAnimationFrame to ensure smooth rendering without impacting page responsiveness.
Design Properties
Every widget has visual styling controls at the bottom of the editor:
| Property | Control | Description |
|---|---|---|
| Opacity | Slider (0–100) | Widget card transparency |
| Border | Slider (0–100) | Border width in pixels |
| Border-Radius | Slider (0–100) | Corner rounding in pixels |
| Layer | Slider (0–100) | Stacking order (higher values render on top) |
| Height | Text | Widget height (e.g., 400px, 400%) |
| Width | Text | Widget 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.