Widgets
Esta página describe todos los Widgets disponibles para ayudarte a personalizar aún más la experiencia de Recompensas para tus jugadores!
☸ Widget de Tokens de Ruleta
El widget de Tokens de Ruleta puede ser embebido en cualquier lugar de tu sitio web usando la siguiente etiqueta HTML:
Una vez añadido, el widget muestra automáticamente todas las ruletas para las cuales el usuario actual tiene tokens disponibles.
Ejemplo de widget de Ruleta
Ejemplo de widget de Ruleta
Comportamiento
- El widget muestra un icono por cada ruleta.
- Si un usuario tiene múltiples tokens para la misma ruleta, se muestra una insignia en el icono de la ruleta indicando el número de tokens disponibles.
- La personalización de marca (colores, fuentes, etc.) no está actualmente soportada a través de Fast Track CRM, pero está disponible mediante variables CSS descritas a continuación.
El Widget de Ruleta solo se mostrará cuando el Token de Ruleta haya sido reclamado y esté listo para girar!
Personalización de Diseño
Por defecto, el widget muestra los iconos de ruleta horizontalmente con un espacio de 10px entre ellos. Puedes ajustar la dirección del diseño y el espaciado usando las siguientes variables CSS:
| Nombre de variable | Valor por defecto | Valores posibles |
|---|---|---|
--ft-wheel-tokens-direction | row | row, column |
--ft-wheel-tokens-gap | 10px | Cualquier valor válido CSS |
Estilo del Icono de Ruleta
Puedes controlar el tamaño de los iconos de ruleta usando estas variables CSS:
| Nombre de variable | Valor por defecto | Valores posibles |
|---|---|---|
--ft-wheel-tokens-icon-width | 50px | Cualquier valor válido CSS |
--ft-wheel-tokens-icon-height | 50px (por defecto al ancho del icono si no está definido) | Cualquier valor válido CSS |
Estilo de Insignia
Cuando una ruleta tiene más de un token disponible, se muestra una insignia. La apariencia de esta insignia puede personalizarse usando las siguientes variables CSS:
| Nombre de variable | Valor por defecto | Valores posibles |
|---|---|---|
--ft-wheel-tokens-badge-background-color | #ff0000 | Cualquier color válido CSS |
--ft-wheel-tokens-badge-text-color | #ffffff | Cualquier color válido CSS |
--ft-wheel-tokens-badge-border-radius | 50% (insignia circular) | Cualquier valor válido CSS |
--ft-wheel-tokens-badge-text-size | 12px | Cualquier valor válido CSS |
--ft-wheel-tokens-badge-height | 20px | Cualquier valor válido CSS |
--ft-wheel-tokens-badge-width | 20px (por defecto a la altura de la insignia si no está definido) | Cualquier valor válido CSS |