Custom skins for Mini-games
Last updated
Last updated
You can prepare custom skin for the 'Spin the Wheel', 'Scratch Card' and 'Giftbox' games directly from the Smartico Back Office by navigating to the Gamification tab and then to the Mini games skin menu
When you upload an image package, you'll now see detailed information about each file, including a preview, format, dimensions, status, size, and more. If there are any missing or incorrect files, you'll be notified immediately. To view the currently uploaded package, simply click the 'Open files' button.
In the configuration screen, you can upload the game's image package and customize the skin using the Custom CSS option.
For the 'Spin the wheel', you need to upload a set of images using the reference package from the archive.
For the 'Scratch Card,' you need to upload a set of images using the reference package from the archive.
For the 'GiftBox,' you need to upload a set of images using the reference package from the archive.
We can provide a template for Mini-games skins upon request.
Please note that any images exported from the template must be compressed before uploading them to the BO. You can use [this link] to compress your images.
For further assistance, please contact your Customer Success Manager!
Note: For the 'Giftbox' game your JSON file should be a valid Lottie animation. You can test it with https://app.lottiefiles.com/preview or another Lottie files tester website. The animation should have the same frame count, as follows:
[0-35] -> loop; [36] -> stop frame before opening for all boxes except the selected one; [35, 80] -> win animation frames; [91, 118] -> lose animation frames;
You can customize your own JSON from the default skin pack, but please ensure that you maintain the total frame count and frame animations as per our guidelines.
Important:
All images should be in the same format, and size and have the same names as in the reference package
Images should be uploaded unpacked (not as an archive)
For the "Spin the Wheel" game, pay attention to how background images for different sectors are designed. There are separators for each sector that should be placed exactly at the same angles as in the reference design, otherwise, the text of the prize will overlap the separators
You can also customize some elements using custom CSS. The most useful styles that you can use are the following.
You can use only 'Google Font' fonts.
To change the font family you need to Copy the import of the needed font family from Google Fonts and paste it in the CSS/SCSS file.
The Font family can be set globally for all texts or used only in a specific location.
The lootbox 2.0 skin should be uploaded in the “Mini-games’ skin editor” following the same approach that is used for mini-games. The lootbox comes with 2 different layouts - Cards and Map.
You can find the existing packages below and create a custom one. Here are the available skins for the Card layout:
Below you can find the available skins for the Map layout:
When selecting a skin for the Map layout (25 and 31 days) in the BO game template, you may need to manually adjust the positions of some prizes. The simplest way to handle this is by copying the prizes from the skin editor and pasting them directly into the game template.
We can provide a template for Lootbox 2.0 skins upon request.
Please note that any images exported from the template must be compressed before uploading them to the BO. You can use [this link] to compress your images.
For further assistance, please contact your Customer Success Manager
Please follow these guidelines when creating a Custom Lootbox Map skin:
For all skins (7, 14, 25, 31 days):
'game-bg' and 'game-bg-mobile' images should be less than 900kb
For all skins (7, 14, 25, 31 days):
'game-bg' and 'game-bg-mobile' images should be in JPEG format
For 7 days skin:
The 'game-bg' image should be exactly 1835x1284
The 'game-bg-mobile' image should be exactly 527x1072
For 14 days skin:
The 'game-bg' image should be exactly 1835x2193
The 'game-bg-mobile' image should be exactly 527x1622
For 25 and 31 days skin:
The 'game-bg' image should be exactly 1835x3895
The 'game-bg-mobile' image should be exactly 527x3260
For the map layout, the positions of the prizes are pre-defined for 7, 14, 25, and 31 days, so if you create a Lootbox with 7, 14, 25, or 31 days you don't have to adjust the positions of the prizes on the map. If you want to introduce more or less than the pre-defined prizes you need to adjust the positions of the prizes in the CSS editor in the skin or in the game template. The maximum amount of days that can be added is 31.
Please note that you must use '!important' when adjusting CSS on the game template and skin levels.
With the Generic skin in the Mission Lootbox, you have the flexibility to add your own images directly from the BO. Additionally, you can customize the colors of the cards. Below is a list of the customizable images:
Custom section background image for desktop
Custom section background image for mobile
Image for closed box
Image for locked box
Image for opened box
Below you can find a reference package with the images:
You can further customize certain elements by applying your own CSS. Below are some helpful styles to get you started:
Read more about the Missions Lootbox in:
