◾Custom skins for Mini-games

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

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.

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.

// text of the prize on sector
.saw-view .wheel-sector-name .sector-text {
   color: yellow !important;
}

// the name of the game shown under the wheel
.saw-info-name {
   color: red !important;
}

// style of the "?" mark opening description of the game
.saw-info-link {
  filter: invert(0);
}

// style of the buttons in the description popup
.saw-modal-actions > div {
    background-color: white !important;
    color: black !important;
    border: 2px solid black !important;
  }

// color of text main text in the description popup
.saw-modal-body-content {
    color: white !important;
 }

// color and style of the links in the description popup
.saw-modal-body-content a {
   color: white !important;
   text-decoration: underline;
}

// style of the title in the description popup
.saw-modal-content .saw-modal-title > div > div {
  color: yellow !important;
  text-shadow: none !important;
}

// the default lights on the wheel’s rim removed and the shining turned off
.wheel-light-behind, .wheel-lights {
 display: none !important;
}

// style of the sound button
.saw-sound-button {
filter: invert(0);
}

Generic Daily Lootbox

With the Generic 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

The colors of the cards can be changed by request.

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:

// 1. The color of the cards' main (thick) border
.generic-layout .cards-container .mission-card {
    background-color: #101010;
}

// 2. The color of the cards' thin border that fills the space between the corner and 
// the main border
.generic-layout .cards-container .mission-card .gap-filler {
    border: 4px solid #101010;
}

// 3. The color of the lighter background behind the rotating lines of the cards
.generic-layout .cards-container .mission-card .mission-card-inner {
    background: #352B12;
}

// 4. The color of the rotating lines of the cards
.generic-layout .cards-container .mission-card .mission-card-inner .generic-rotating-bg {
    background: #101010;
}

// 5. The color of the background of the numbers in the corners of the cards
.generic-layout .cards-container .mission-card .mission-card-inner .mission-card-corner {
    background: #101010;
}

// 6. The color of the ACTIVE card main (thick) border
.generic-layout .cards-container .mission-card.active {
    background-color: #AB8219;
}

// 7. The color of the ACTIVE card thin border that fills the space between the corner and
// the main border
.generic-layout .cards-container .mission-card.active .gap-filler {
    border: 4px solid #AB8219;
}

// 8. The color of the lighter background behind the rotating lines of the ACTIVE card
.generic-layout .cards-container .mission-card.active .mission-card-inner {
    background: #B8963E;
}

// 9. The color of the rotating lines of the ACTIVE card
.generic-layout .cards-container .mission-card .mission-card-inner .generic-rotating-bg.active {
    background: #AB8219;
}

// 10. The color of the background of the numbers in the corners of the ACTIVE card
.generic-layout .cards-container .mission-card.active .mission-card-inner .mission-card-corner {
    background: #AB8219;
}