Rewards - Widgets
This page will outline all available Widgets to help you customise the Rewards experience for your players even further!
☸ Wheel Tokens Widget
The Wheel Tokens widget can be embedded anywhere on your website using the following HTML tag:
Once added, the widget automatically displays all wheels for which the current user has available tokens.
Example Wheel widget
Example Wheel widget
Behaviour
- The widget displays one icon per wheel.
- If a user has multiple tokens for the same wheel, a badge is shown on the wheel icon indicating the number of available tokens.
- Branding customisation (colours, fonts, etc.) is not currently supported through Fast Track CRM, but is available via CSS variables outlined below.
The Wheel Widget will only show when the Wheel Token has been claimed and is ready to spin!
Layout Customisation
By default, the widget displays wheel icons horizontally with a 10px gap between them. You can adjust the layout direction and spacing using the following CSS variables:
| Variable name | Default value | Possible values |
|---|---|---|
--ft-wheel-tokens-direction | row | row, column |
--ft-wheel-tokens-gap | 10px | Any valid CSS length value |
Wheel Icon Styling
You can control the size of the wheel icons using these CSS variables:
| Variable name | Default value | Possible values |
|---|---|---|
--ft-wheel-tokens-icon-width | 50px | Any valid CSS length value |
--ft-wheel-tokens-icon-height | 50px (defaults to icon width if not set) | Any valid CSS length value |
Badge Styling
When a wheel has more than one available token, a badge is displayed. The appearance of this badge can be customised using the following CSS variables:
| Variable name | Default value | Possible values |
|---|---|---|
--ft-wheel-tokens-badge-background-color | #ff0000 | Any valid CSS colour |
--ft-wheel-tokens-badge-text-color | #ffffff | Any valid CSS colour |
--ft-wheel-tokens-badge-border-radius | 50% (circular badge) | Any valid CSS length value |
--ft-wheel-tokens-badge-text-size | 12px | Any valid CSS length value |
--ft-wheel-tokens-badge-height | 20px | Any valid CSS length value |
--ft-wheel-tokens-badge-width | 20px (defaults to badge height if not set) | Any valid CSS length value |