Admin loginSmartico.aiTheAffiliatePlatform.com

Gamification 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

You can get the latest packages for V3 and V4 with reference images in the files below.

You will need to provide the package with exactly the same names of files and sizes of the images.

  • Reference image package for V4

https://libs.smartico.ai/gf/widget_images_v4.ziplibs.smartico.ai

  • Reference image package for V3

https://libs.smartico.ai/gf/widget_images.zip

  • Figma templates for both Gamification Widget layouts are available.

  • Reach out to your Customer Success Manager to request the one you need.

✅ What can be customized

You can customize the colors, icons, and images.

1️⃣ Colors

  • You can fully customize the UI colors to fit your brand

  • We provide a Gamification Color Template in Figma, which includes all available color options

  • Once you receive the Figma file:

    • Adjust the colors as desired

    • Send it back to us so we can apply your updated color scheme.

Please contact your Customer Success Manager about the Gamification Color Template in Figma!

Please, when returning the already adjusted Figma document:

  • Open a Jira ticket and add the Figma link inside

  • Attach the archive with new icons in the Jira ticket (if icons should be changed)

  • In Figma - share the Figma file with: [email protected] -> Do not email it to this address

  • Share it as 'Can edit' permissions

2️⃣ Icons & images

You can change the following icons and images:

  • Menu item images

  • Icons for leaderboard positions

  • 'No result' icons

  • Icons for different activities

🚫 What cannot 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

🎨How to work with the Figma file

Sections in the file

  • Replace images - This is the only section you can edit

  • Preview - Locked by default, shows how your changes will look

Edit images

  1. Go to the Replace images section

  2. Use CMD/CTRL + click to select a component

  3. Edit or replace the image inside the component - changes will show live in the Preview

  • Use high-quality images or vectors to avoid pixelation

  • If you want to keep Smartico’s default images, no changes are needed

⚠️ By changing the images inside the components in this 'Replace images' Section, you will also be able to see how they change inside the widget screens (in the 'Preview' Section).

Edit colors

Colors can be updated in the Styles panel on the right sidebar in the Replace images section

  • Don’t detach, swap, or add styles.

  • Do not edit colors that are set as plain values (only styles can be edited).

Export images

  1. Select all components in the Replace images section

  2. Click Export in the right sidebar

  3. Use default settings (1x PNG)

  4. Click Export layers and save the images

Validate your skin

  1. Go to the Validator tool: https://expo.smartico.ai/validate

  2. Choose a version (V3 or V4)

  3. Upload your exported image folder

  4. Check that all files and sizes are correct

Last updated

Was this helpful?