Widgets
Esta página descreverá todos os Widgets disponíveis para ajudá-lo a personalizar ainda mais a experiência de Recompensas para seus jogadores!
☸ Widget de Tokens da Roda
O widget de Tokens da Roda pode ser incorporado em qualquer lugar do seu site usando a seguinte tag HTML:
Uma vez adicionado, o widget exibe automaticamente todas as rodas para as quais o usuário atual possui tokens disponíveis.
Exemplo do widget da Roda
Exemplo do widget da Roda
Comportamento
- O widget exibe um ícone por roda.
- Se um usuário tiver múltiplos tokens para a mesma roda, um distintivo é mostrado no ícone da roda 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 via variáveis CSS descritas abaixo.
O Widget da Roda só será mostrado quando o Token da Roda tiver sido reivindicado e estiver pronto para girar!
Personalização do Layout
Por padrão, o widget exibe ícones de roda 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 Roda
Você pode controlar o tamanho dos ícones da roda usando essas 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 roda 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 |