Widgets
Esta página apresentará todos os Widgets disponíveis para ajudá-lo a personalizar ainda mais a experiência de Recompensas para seus jogadores!
☸ Widget de Tokens da Roleta
O widget de Tokens da Roleta pode ser incorporado em qualquer lugar do seu site usando a seguinte tag HTML:
Uma vez adicionado, o widget exibe automaticamente todas as roletas para as quais o usuário atual tem tokens disponíveis.
Exemplo de widget da Roleta
Exemplo de widget da Roleta
Comportamento
- O widget exibe um ícone por roleta.
- Se um usuário tem múltiplos tokens para a mesma roleta, um distintivo é mostrado no ícone da roleta indicando o número de tokens disponíveis.
- A personalização de marca (cores, fontes, etc.) não é atualmente suportada através do Fast Track CRM, mas está disponível através de variáveis CSS descritas abaixo.
O Widget da Roleta só será mostrado quando o Token da Roleta tiver sido reivindicado e estiver pronto para girar!
Personalização de Layout
Por padrão, o widget exibe os ícones da roleta horizontalmente com um espaço de 10px entre eles. Você pode ajustar a direção do layout e o espaçamento usando as seguintes variáveis CSS:
| Nome da variável | Valor padrão | Valores possíveis |
|---|---|---|
--ft-wheel-tokens-direction | row | row, column |
--ft-wheel-tokens-gap | 10px | Qualquer valor válido de comprimento CSS |
Estilização do Ícone da Roleta
Você pode controlar o tamanho dos ícones da roleta usando estas variáveis CSS:
| Nome da variável | Valor padrão | Valores possíveis |
|---|---|---|
--ft-wheel-tokens-icon-width | 50px | Qualquer valor válido de comprimento CSS |
--ft-wheel-tokens-icon-height | 50px (padrão para largura do ícone se não definido) | Qualquer valor válido de comprimento CSS |
Estilização do Distintivo
Quando uma roleta tem mais de um token disponível, um distintivo é exibido. A aparência deste distintivo pode ser personalizada usando as seguintes variáveis CSS:
| Nome da variável | Valor padrão | Valores possíveis |
|---|---|---|
--ft-wheel-tokens-badge-background-color | #ff0000 | Qualquer cor CSS válida |
--ft-wheel-tokens-badge-text-color | #ffffff | Qualquer cor CSS válida |
--ft-wheel-tokens-badge-border-radius | 50% (distintivo circular) | Qualquer valor válido de comprimento CSS |
--ft-wheel-tokens-badge-text-size | 12px | Qualquer valor válido de comprimento CSS |
--ft-wheel-tokens-badge-height | 20px | Qualquer valor válido de comprimento CSS |
--ft-wheel-tokens-badge-width | 20px (padrão para altura do distintivo se não definido) | Qualquer valor válido de comprimento CSS |