Widgets
¡Esta página describirá todos los Widgets disponibles para ayudarte a personalizar la experiencia de Recompensas para tus jugadores aún más!
☸ 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 agregado, 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 ícono por ruleta.
- Si un usuario tiene múltiples tokens para la misma ruleta, se muestra una insignia en el ícono de la ruleta indicando el número de tokens disponibles.
- La personalización de marca (colores, fuentes, etc.) no está soportada actualmente a través de Fast Track CRM, pero está disponible vía 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 íconos 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 de longitud CSS válido |
Estilo del Ícono de Ruleta
Puedes controlar el tamaño de los íconos de ruleta usando estas variables CSS:
| Nombre de variable | Valor por defecto | Valores posibles |
|---|---|---|
--ft-wheel-tokens-icon-width | 50px | Cualquier valor de longitud CSS válido |
--ft-wheel-tokens-icon-height | 50px (por defecto toma el ancho del ícono si no se establece) | Cualquier valor de longitud CSS válido |
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 CSS válido |
--ft-wheel-tokens-badge-text-color | #ffffff | Cualquier color CSS válido |
--ft-wheel-tokens-badge-border-radius | 50% (insignia circular) | Cualquier valor de longitud CSS válido |
--ft-wheel-tokens-badge-text-size | 12px | Cualquier valor de longitud CSS válido |
--ft-wheel-tokens-badge-height | 20px | Cualquier valor de longitud CSS válido |
--ft-wheel-tokens-badge-width | 20px (por defecto toma la altura de la insignia si no se establece) | Cualquier valor de longitud CSS válido |