Ctrlk
Admin loginSmartico.aiTheAffiliatePlatform.com
For the complete documentation index, see llms.txt. This page is also available as Markdown.

◼️Gamification widget UI skinning

Overview

The gamification interface can be customized to match your brand’s color scheme and style. You can choose between two different layouts - V3 and V4.

GF Widget V4 layout
GF Widget V3 layout

How it can be customized?

We will provide you with a Figma Template depending on the Version of the Widget you would like to implement.

Please contact your Customer Success Manager about the Gamification Color Template in Figma, mentioning the version you want to implement (V3 or V4).

  • If you’re a new client, please ask your Success Manager for the template link.

  • If you’re an existing client, always duplicate the file from the latest provided link (you can request it again if you’ve lost it). This ensures you’re using the most up-to-date template with the latest features, CSS styles, images, and components.

  • Please note that designs created from outdated templates may be rejected.

  • It’s important to duplicate the file from the provided link rather than from a copy stored in your Figma team. Files duplicated from your team space are detached from our master template and won’t receive updates, which can cause mismatches with the latest features and design standards.

What can be customized?

You can customize:

  1. The colors - You can customize the UI colors to fit your brand using the Variables you will find inside the Figma Template

Please do not swap, detach, or add any styles to the Figma template

  1. Icons and images

    1. Depending on the version you choose images will vary

    2. Change ONLY the images you will see in the “Replace image“ sector from the Figma file, they will include:

      1. Menu item images

      2. Icons for leaderboard positions

      3. 'No result' icons

      4. Icons for different activities

Please do not detach or add any new components to the images you see in the Figma template

  1. Fonts - You can change the font, but only fonts available in Google Fonts are supported.

What can not be customized?

The layout is fixed, meaning that:

  • The header size cannot be changed

  • The menu cannot be moved

  • All element sizes and positions follow the reference design

Guide for V3 GF widget layout:

LogoV3 Gamification widget layout | Smartico Help Centerhelp.smartico.ai

Guide for V4 GF widget layout:

LogoV4 Gamification widget layout | Smartico Help Centerhelp.smartico.ai

Last updated

Was this helpful?