Define the choices your customers make: dropdowns, sliders, color pickers, and more.
Parameters are the building blocks of every configurator. Each parameter represents a choice the customer makes — a color, a size, a material, a quantity. Spokbee supports 7 parameter types, each designed for a different kind of input.
A dropdown menu for choosing one option from a list. Use this when you have more than 4-5 options and screen space is limited. The customer clicks to open the menu, picks an option, and the menu closes.
Visual single-choice selection displayed as a row or grid of buttons. Best for small option sets (2-5 options) where you want all choices visible at once. Each option can include an image thumbnail.
Displays color swatches the customer can click to choose a finish or color. Each option stores a hex color value and an optional label. Great for paint colors, fabric swatches, material finishes.
An on/off switch for boolean features. Use this for add-ons like “Add engraving”, “Include gift wrap”, or “Premium packaging”. The value is either true or false.
A numeric range selector with configurable min, max, and step values. The customer drags a handle to pick a value. Ideal for continuous dimensions: width (50-200 cm), height (30-150 cm), thickness (1-10 mm).
A direct numeric entry field with optional min/max constraints and step size. Use this when the customer needs to type an exact value rather than sliding, or when the range is very large.
A free-text field for custom entries like engraving text, personalization messages, or special instructions. You can set a maximum character length.
Every parameter has a set of properties that control its behavior. Here is the full list:
| Property | Type | Description |
|---|---|---|
| id | string | Unique identifier. Used in constraints, pricing formulas, and the API. Auto-generated from the label. |
| label | string | Human-readable name shown to the customer (e.g., “Color”, “Width”). |
| type | enum | One of: select, radio, color, toggle, slider, number, text. |
| options | array | For select, radio, and color types. Each option has a value, label, and optional image or color hex. |
| range | object | For slider and number types. Defines min, max, and step. |
| default_value | any | The value selected when the configurator first loads. |
| geometry_impact | boolean | Marks this parameter as affecting the 3D model geometry (used with Onshape integration). |
| affects_image | boolean | When true, this parameter is included in image assignment matching. Controls which parameters determine which image is shown. |
You can organize parameters into named groups that render as collapsible sections in the configurator. This keeps the UI clean when you have many parameters. For example, a furniture configurator might have groups for “Dimensions”, “Materials”, and “Accessories”.
To create a group, drag parameters together in the builder or use the “Add Group” button. Groups can be reordered by dragging. Each group has a name and an optional description.
Visibility rules let you show or hide parameters based on the customer's current selections. For example, you might show the “Engraving Text” parameter only when the “Add Engraving” toggle is on. Or show “Leg Style” only when “Product Type” is “Table”.
Visibility rules are defined per parameter. You select a condition parameter, an operator (equals, not equals, is one of, etc.), and a value. When the condition is not met, the parameter is hidden and its value does not affect pricing or constraints.
Content blocks let you insert non-interactive elements between parameters: headings, descriptive text, images, or dividers. Use them to add context and guide the customer through the configuration process. For example, add a heading “Step 2: Choose your finish” above the material parameters.
Tip: Use groups and content blocks together for the best customer experience. Groups keep the form compact; content blocks add helpful context within each group.