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 |