Skip to main content

Enumeration: WidgetType

Defines the types of widgets available for option blocks.

WidgetType determines the user interface component used to display and interact with options. Each widget type provides a different user experience optimized for specific types of options.

The widget type is a critical design decision that affects usability, space efficiency, and the overall user experience of the product configurator. The appropriate widget should be selected based on the nature of the options being presented and the context in which users will interact with them.

Enumeration Members​

COLOR​

COLOR: "COLOR"

A custom color picker widget.

This widget provides advanced color selection tools beyond predefined swatches. It typically includes RGB/HSL color pickers, hex code input, color sliders, and potentially color harmony tools.

Best used for:

  • Products with custom color capabilities
  • Scenarios requiring precise color selection
  • Applications where exact color matching is important

Business cases:

  • Custom paint or finish options
  • Digital printing with specific color requirements
  • Brand color matching for corporate products
  • Design applications with color customization

ENGRAVE​

ENGRAVE: "ENGRAVE"

A widget for displaying and engraving text.

This specialized widget enables users to input custom text and preview how it will appear engraved or embossed on the product. It typically includes font options, text alignment controls, and a preview of the engraving effect.

Best used for:

  • Personalized products with custom text
  • Products where text becomes a physical feature
  • Scenarios requiring text formatting controls

Business cases:

  • Jewelry or gift item personalization
  • Nameplate or plaque customization
  • Award or trophy text
  • Custom signage or labeling

FILTER​

FILTER: "FILTER"

A widget designed for filtering data or options.

This widget is essentially the same as THUMBNAILS but with added filtering capabilities. It displays options as visual thumbnails while providing interactive filtering controls to help users narrow down large sets of options.

Best used for:

  • Large thumbnail-based option sets that need to be narrowed down
  • Visual catalogs where filtering by attributes is helpful
  • Scenarios where users need to find specific visual options quickly

Business cases:

  • Large material libraries with filterable properties
  • Extensive color or pattern collections with attribute filters
  • Product catalogs where visual browsing with filters is needed
  • Any scenario where a visual grid with filtering improves selection

FILTER_GROUPS​

FILTER_GROUPS: "FILTER_GROUPS"

A filter widget capable of handling multiple option sets or collections simultaneously.

This widget is a variation of THUMBNAILS that organizes options into visual sections by option set (with option set names and possibly descriptions), while providing a single filter button that applies to all sections. The visual content is clearly separated by category, but filtering is unified.

Best used for:

  • Complex products with multiple visual option categories that need clear organization
  • Scenarios where options need to be visually grouped but filtered together
  • Interfaces where maintaining clear separation between option types improves usability

Business cases:

  • Multi-material products with options organized by component type
  • Products with related but distinct visual option categories
  • Complex configurators where logically separated option categories aid understanding
  • Any scenario where grouping thumbnails by category while maintaining unified filtering is beneficial

IMAGE​

IMAGE: "IMAGE"

A widget for uploading textures or images.

This widget enables users to upload their own images to be applied to the product. It typically includes file upload controls, cropping/positioning tools, and a preview of how the image will appear on the product.

Best used for:

  • Products that can feature custom images or logos
  • Scenarios where users provide their own visual content
  • Brand customization of products

Business cases:

  • Corporate branding on promotional items
  • Custom photo products
  • Logo application on business products
  • User-supplied artwork for product decoration

MESSAGE​

MESSAGE: "MESSAGE"

A widget for displaying a message.

This informational widget doesn't collect user input but instead displays important notes, instructions, warnings, or other information during the configuration process. It can be styled with different backgrounds and icons to indicate different message types.

Best used for:

  • Important notices or instructions
  • Compatibility warnings
  • Context-sensitive help
  • Promotional information

Business cases:

  • Configuration guidance
  • Product limitations or warnings
  • Special offer announcements
  • Legal notices or disclaimers

MULTICHOICE​

MULTICHOICE: "MULTICHOICE"

A widget allowing for the selection of multiple choices simultaneously.

Unlike most other widgets that implement single-select behavior, this widget enables users to select multiple options from the available choices. Typically implemented as a set of checkboxes or multi-select chips.

Best used for:

  • Optional features or add-ons
  • Scenarios where combinations of options are valid
  • Configuration aspects that aren't mutually exclusive

Business cases:

  • Accessory selection
  • Feature bundles where multiple items can be chosen
  • Product enhancements or add-ons
  • Configuration aspects with valid combinations (e.g., "Select all connectivity options you need")

NUMBER​

NUMBER: "NUMBER"

A widget for entering numerical values.

This widget provides a specialized input field for numerical data with validation and potentially unit conversion. It may include minimum/maximum bounds, step controls, and unit selection.

Best used for:

  • Precise numerical specifications
  • Dimensions that require exact values
  • Quantities or measurements

Business cases:

  • Custom dimensions for made-to-measure products
  • Technical specifications requiring exact values
  • Performance parameters for engineered products
  • Quantity fields with validation rules

NUMBERS_BUTTON​

NUMBERS_BUTTON: "NUMBERS_BUTTON"

A widget consisting of buttons for selecting numerical values or small text values.

This widget displays options as a row or grid of clickable buttons, each showing a number or short text value. It provides a compact, touch-friendly interface for quickly selecting from a limited set of values.

Best used for:

  • Numerical selections (quantities, dimensions, etc.)
  • Short text options that can be displayed in a small space
  • Options that benefit from a side-by-side comparison
  • Mobile-friendly interfaces where touch targets need to be larger

Business cases:

  • Quantity selectors
  • Size options (S/M/L/XL)
  • Rating scales (1-5)
  • Quick yes/no choices

NUMBERS_SCALE​

NUMBERS_SCALE: "NUMBERS_SCALE"

A widget featuring a scale for selecting numerical values.

This widget presents a slider or similar control for selecting values along a continuous range. It's ideal for numerical parameters where the exact value exists within a defined range.

Best used for:

  • Numeric values with min/max boundaries
  • Options that have meaningful intermediate values
  • Settings where relative position matters more than exact numbers

Business cases:

  • Dimensional adjustments within manufacturing tolerances
  • Parameter tuning (opacity, intensity, etc.)
  • Quantity selection within a range
  • Performance vs. cost tradeoff settings

PRINT_ON_DEMAND: "PRINT_ON_DEMAND"

A widget for initiating print-on-demand tasks.

This advanced widget combines image upload capabilities with precise positioning controls optimized for print-on-demand applications. It typically includes image upload, scaling, rotation, positioning, and quality verification tools.

Best used for:

  • Products that require precise image placement for printing
  • Custom apparel or promotional items
  • Products with defined print areas or zones

Business cases:

  • Custom t-shirt or apparel printing
  • Personalized bags, mugs, or promotional items
  • Products with multiple printable surfaces
  • Any product requiring precise image positioning before production

RADIO_LISTBOX_TYPE​

RADIO_LISTBOX_TYPE: "RADIO_LISTBOX_TYPE"

A radio button widget with a listbox interface for selecting options.

This widget combines radio button selection with a space-efficient listbox layout. It supports scrolling and can accommodate longer lists of options while maintaining a compact footprint in the UI.

Best used for:

  • Longer lists of options where vertical space is limited
  • Options that require some explanatory text
  • Scenarios where users need to quickly scan many options
  • Interfaces where consistent height constraints are important

Business cases:

  • Country or region selection
  • Product model variants with descriptions
  • Configuration options with explanatory text
  • Any scenario with 8+ text-based options

RADIO_PLAIN_TEXT​

RADIO_PLAIN_TEXT: "RADIO_PLAIN_TEXT"

A radio button widget displaying plain text options.

This widget presents options as a vertical list of radio buttons with text labels. It's ideal for scenarios where text descriptions are the primary way to distinguish between options and visual representation isn't necessary.

Best used for:

  • Simple yes/no or multiple-choice selections
  • Option lists with clear, concise text descriptions
  • Selections where reading the option name is sufficient
  • Limited option sets (typically fewer than 7 options)

Business cases:

  • Product features (e.g., "With armrests" / "Without armrests")
  • Service levels (e.g., "Standard delivery" / "Express delivery")
  • Warranty options
  • Basic product variants

RADIO_WITH_THUMBNAILS​

RADIO_WITH_THUMBNAILS: "RADIO_WITH_THUMBNAILS"

A radio button widget displaying options as thumbnail images.

This widget combines radio button selection with visual thumbnails, providing both the familiar interaction pattern of radio buttons and the visual preview benefits of thumbnails.

Best used for:

  • Options where visual differentiation complements text descriptions
  • Scenarios where users benefit from both visual and textual information
  • Interfaces where the selection mechanism needs to be explicit

Business cases:

  • Material options with texture previews
  • Color choices with sample swatches
  • Design variations where subtle details need highlighting
  • Product variations with both visual and technical differences

TEXT​

TEXT: "TEXT"

A widget for entering text.

This widget provides a simple text input field for collecting string data. Unlike the ENGRAVE widget, it doesn't render the text on the 3D model but simply collects it as configuration data.

Best used for:

  • Collecting text information for order processing
  • Custom specifications in text form
  • Notes or instructions for manufacturing

Business cases:

  • Special instructions for manufacturing
  • Order reference information
  • Custom text for packaging or documentation
  • Text parameters that don't affect the visual product

THUMBNAILS​

THUMBNAILS: "THUMBNAILS"

A widget displaying thumbnail images for selection.

This widget presents options as visual thumbnails in a grid layout, emphasizing the visual aspects of each option. It's ideal for highly visual selections where seeing the option is more important than reading about it.

Best used for:

  • Options that are primarily distinguished visually
  • Material, color, or texture selections
  • Scenarios where visual comparison is important

Business cases:

  • Fabric or material libraries
  • Color selections
  • Pattern or texture options
  • Design variants where visual differences are key

THUMBNAILS_GROUPS​

THUMBNAILS_GROUPS: "THUMBNAILS_GROUPS"

A widget with thumbnail images organized into multiple option sets or collections.

This widget is essentially the same as THUMBNAILS but with a dropdown menu that allows users to select specific option sets. It maintains the visual grid layout while adding the ability to switch between different collections of options.

Best used for:

  • Large libraries of visual options that can be segmented into categories
  • Scenarios where users need to select from different groups of visual options
  • Interfaces where screen space is limited but many option groups are available

Business cases:

  • Material libraries organized by material type, accessed through a dropdown
  • Color collections grouped by color families or palettes
  • Pattern or texture libraries organized by style or application
  • Any visual selection that benefits from categorical organization with a dropdown