Spinner Wheel

A prize/discount wheel with configurable segments. The classic “spin to win” pattern for gamified discount offers.

Spinner Wheel Insert image: A Spinner Wheel component on the canvas showing a colorful segmented wheel with labels like “10% Off”, “20% Off”, “Free Trial” and a pointer indicator at the top

Properties

Property	Description
`spinnerSegments`	JSON array of segments (label, value, color).
`spinnerTargetSegment`	Index of the segment the wheel lands on.
`spinnerSpinDuration`	Spin animation duration in milliseconds.
`spinnerNumberOfSpins`	Number of full rotations before landing.
`spinnerStartVariableId`	Variable ID that triggers the spin (set to `true` to start).
`spinnerResultVariableId`	Variable ID that receives the winning segment’s value.
`spinnerCompletionActions`	Click actions to execute when the spin completes.
`spinnerMode`	`trigger` (spin once on trigger) or `continuous` (keep spinning).
`spinnerPointerColor`	Color of the pointer indicator.
`spinnerStrokeColor`	Color of segment borders.
`spinnerStrokeWidth`	Width of segment borders.
`spinnerCenterRadius`	Radius of the center circle.
`spinnerCenterColor`	Color of the center circle.

How It Works

Configure segments with labels, values, and colors.
Set spinnerTargetSegment to the index of the segment you want the wheel to land on (the outcome is predetermined).
Trigger the spin by setting spinnerStartVariableId to true (e.g., via a button’s Set Variable action).
When the spin completes, the winning segment’s value is written to spinnerResultVariableId and spinnerCompletionActions execute.

The result is predetermined by spinnerTargetSegment — the animation is for engagement, not randomness. This ensures you always deliver the intended offer.

Element Variable

element.{componentId}.value — the winning segment’s value after the spin completes.