◾Custom skins for Mini-games

Overview

You can prepare custom skin for the 'Spin the Wheel', 'Scratch Card', 'Treasure Hunt', 'Lootbox 2.0' 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.

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

In the configuration screen, you can upload the game's image package and customize the skin using the Custom CSS option.

We can provide a Figma 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!

To view the available skins for the Spin the Wheel mini-game, click here.
To view the available skins for the Scratch Card mini-game, click here.
To view the available skins for the Giftbox mini-game, click here.
To view the available skins for the Treasure Hunt mini-game, click here.
To view the available skins for the Lootbox 2.0 mini-game, click here.
To view the available skins for the Missions Lootbox mini-game, click here.

Customize mini-games with CSS

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.

/* Google fonts only, example of import query */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

/* 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 when old pop-ups are enabled */
.saw-modal-actions > div {
    background-color: white !important;
    color: black !important;
    border: 2px solid black !important;
  }

/*style of the title in the description popup when new pop-ups are enabled */
.saw-modal-container-new .saw-modal-title {
  color: white !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);
}

/* style of the Play button on Scratch Card */
.button-area > div {
box-shadow: 0 0 6px 0 black !important;
color: white !important;
background: #0077FF !important;
}

/* border of the Scratch Card */
.scratch-card-content {
border: none !important;
}

/* Scratch Card prize text color */
.prizes > div > div {
  color: black !important;
}

For Giftbox Only
/* style of game rules text button (text under attempts) */
.giftboxes-root .prizeboard-game-rules {

}
/* styles for popup title */
.saw-modal-wrapper .saw-modal-container-v2 
.saw-modal-content .saw-modal-title {

}

/* styles for popup content */
.saw-modal-wrapper .saw-modal-container-v2 
.saw-modal-content .saw-modal-message {

}

/* style of game modal action button */
.saw-modal-wrapper .saw-modal-container-v2 
.saw-modal-content .saw-modal-actions {

}

Updated pop-ups in mini-games

You can create Custom designs for the pop-ups inside the mini-games. The ‘Use new pop-ups’ option is available in the Mini-games Skins section in the BO.

For newly created skins the 'Use new pop-ups’ option is enabled by default and cannot be disabled.
The skin package for the new pop-ups includes different images. Make sure you're uploading the correct package that contains the new visuals.

Here you can find an example of a Scratch Card skin package:

2MB

Scratch Card - Treasure.zip

hashtagOverview

hashtagCustomize mini-games with CSS

hashtagUpdated pop-ups in mini-games

Overview

Customize mini-games with CSS

Updated pop-ups in mini-games