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

<figure><img src="/files/dL29DTuRIJPlxO8yJeWJ" alt=""><figcaption><p>GF Widget V4 layout</p></figcaption></figure>

<figure><img src="/files/bxQFyhvFmwizCsqnKLYi" alt=""><figcaption><p>GF Widget V3 layout</p></figcaption></figure>

#### **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.

{% hint style="success" %}
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.
  {% endhint %}

#### **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

{% hint style="danger" %}
Please do not swap, detach, or add any styles to the Figma template
{% endhint %}

2. **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

{% hint style="danger" %}
Please do not detach or add any new components to the images you see in the Figma template
{% endhint %}

#### **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

<mark style="color:purple;">**Guide for V3 GF widget layout:**</mark>

{% embed url="<https://help.smartico.ai/welcome/products/gamification-basics/gamification-ui-skinning/v3-gamification-widget-layout>" %}

<mark style="color:purple;">**Guide for V4 GF widget layout:**</mark>

{% embed url="<https://help.smartico.ai/welcome/products/gamification-basics/gamification-ui-skinning/v4-gamification-widget-layout>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.smartico.ai/welcome/products/gamification-basics/gamification-ui-skinning.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.