> For the complete documentation index, see [llms.txt](https://help.smartico.ai/welcome/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.smartico.ai/welcome/products/gamification-basics/gamification-ui-skinning/v3-gamification-widget-layout.md). # V3 Gamification widget layout

{% hint style="info" %} For an overview of skinning capabilities and design boundaries, see [Gamification UI skinning](https://help.smartico.ai/welcome/products/gamification-basics/gamification-ui-skinning). To compare with or implement the newer V4 layout (which introduces top navigation and mobile footers), see [V4 Gamification widget layout](https://help.smartico.ai/welcome/products/gamification-basics/gamification-ui-skinning/v4-gamification-widget-layout). {% endhint %} **Reference image package for V3:** {% embed url="" %} {% hint style="success" %} You will need to provide the package with exactly the same names of files and sizes of the images. {% endhint %} {% hint style="info" %} **Obtaining the Figma Template:** Contact your Customer Success Manager to obtain the official V3 Figma Color Template link. Always duplicate the file directly from the latest link provided rather than reusing older copies stored in your Figma team workspace, ensuring your skin includes the latest components and style definitions. {% endhint %} #### Step by Step reference Videos We have created these videos for you explaining how the full process works from beginning (using the Figma template) to end (delivering the required documents for implementation): {% hint style="info" %} You can switch the audio to another language by clicking the 'Settings' icon ⚙️ on the video and selecting your preferred language. {% endhint %} 1. **How to edit images?** {% embed url="" %} 2. **How to edit Colors?** {% embed url="" %} 3. **How to export from Figma Color Template?** {% embed url="" %} 4. **Validating the Skin Package** {% embed url="" %} 5. **Saving a local copy of the Figma file** {% embed url="" %} 6. **Sharing the skin with the Smartico Team** {% embed url="" %} #### **How to work with the Figma file** * **Sections in the file**

**`1*`** Replace images Section - This is the only section you can edit\ **`2*`** Preview Section - 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 the image inside a component (it works similar to the direct selection tool from Illustrator) 3. Edit or replace the image inside the component (parent) - changes will show live in the Preview Section (children) 1. ⚠️ 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).

{% hint style="success" %} * Use high-quality images or vectors to avoid pixelation * If you want to keep Smartico’s default images, no changes are needed, but you will still need to provide us with the file {% endhint %} * **Edit colors** Colors can be updated in the Styles panel on the right sidebar in the Replace images section

{% hint style="danger" %} * Detaching, swapping, or adding styles or components. * Editing colors that are set as plain values (only styles can be edited). Any of the actions described above might result in our team declining the changes you made and requesting a new delivery. {% endhint %} * **How to change the font inside Figma?** 1. Open the Variables Panel on the left sidebar inside Figma 2. Change the "Font Family" variable string to the one you want to use, please make sure you are writing the exact name (better to copy-paste directly from Google Fonts), if you don't write the name correctly the font will not work 3. Done, all the text layers will be updated with the font you selected. 4. Please let the Smartico Team know in case you changed the typeface. {% hint style="info" %} **Important Notes:** * We're only supporting Google Fonts, please make sure you comply with this requirement before delivering the Figma file to the Smartico Team * Make sure to write the name correctly when updating the "Font Family" string variable {% endhint %}

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

{% hint style="info" %} By default all the exported components will be inside a folder, please do not change anything inside (naming, adding/deleting elements, changing the location they’ll be exported to by default, etc) all of these might result in the folder not being approved. {% endhint %} * **Validate the components exported** 1. Go to the Validator tool: 2. Choose a version (V3 or V4) - in this case V3 3. Upload your exported image folder 4. Check that all files and sizes are correct, this is the message you should expect

* **Sharing with the Smartico Team** 1. Please save a local copy of the Figma file (.fig) you just edited

2. After exporting, you will get a “.fig” file like this:

3. Open a Jira ticket and add the exported Figma inside 4. Attach archive with the package folder in the Jira ticket (if images should be changed, if not we will use the fall back icons, the ones you can see inside the template) ### Frequently Asked Questions **Can we use our own brand font files (OTF/TTF/WOFF) instead of Google Fonts?** No. The widget strictly supports Google Fonts. Custom font files cannot be uploaded or embedded into the widget iframe. **Can we switch skins dynamically between light and dark modes or player VIP levels?** Yes. Developers can switch the active skin dynamically via the front-end JavaScript SDK method by specifying the theme name without reloading the page. **What happens if we do not replace all default icons?** If you leave default icons in the template without changes, Smartico's fallback icons will be used automatically in the final skin. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://help.smartico.ai/welcome/products/gamification-basics/gamification-ui-skinning/v3-gamification-widget-layout.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. 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.