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).

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 inlcude:

      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

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:

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

Guide for V4 GF widget layout:

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