Smartico Help Center
Admin loginSmartico.aiTheAffiliatePlatform.com
  • Welcome
  • Products
    • 🔆CRM Automation
      • ◾Create Journey Flow
      • ◾Event Driven Journey
      • ◾Automation Rules
      • ◾Campaigns vs Automation Rules
      • ◾Segmentation
        • ▪️User State Segments
        • ▪️Behavioral Segments
        • ▪️Imported Segments
      • ◾Activities of Flows
        • ▪️Activity: Email
        • ▪️Activity: SMS, Viber and WhatsApp
        • ▪️Activity: Telegram Bot
        • ▪️Activity: Custom IM
        • ▪️Activity: WebHook
        • ▪️Activity: Limit
        • ▪️Activity: Add Points
      • ◾Communication channels
        • ▪️Email
        • ▪️Liquid Email
        • ▪️SMS, Telegram, Viber, and WhatsApp
        • ▪️Popups
        • ▪️Inbox
        • ▪️Push notifications
        • ▪️Content Variations
        • ▪️Opt-out & Communication Statuses
        • ▪️Gamification activities in the communications
      • ◾A/B Testing
    • 🎮Gamification Blocks
      • Setup steps and checklist
      • Points
      • Gems & Diamonds
      • Levels
        • Level Map
        • Levels Tips & Hints
      • Missions
        • Mission Types & Statuses
        • How to set up a Mission
      • Tournaments
        • Tournament Setup
      • Badges
      • Store
      • Example setup
      • Gamification UI skinning
      • Terms to protect
    • 🧠AI Models
      • ◾AI Enhancer
      • ◾Best Time Model
      • ◾Churn & LTV prediction
      • ◾Favorite product
      • ◾RFM Analysis
      • ◾Sport Recommendations
    • 🎲Mini Games
      • ◾Introduction to Mini Games
      • ◾Game template setup
      • ◾Custom skins for Mini-games
      • ◾Mini-games on the landing pages
      • ◾Using images instead of prize names in Spin the Wheel
      • 🏴‍☠️Treasure Hunt
      • ⚽MatchX Game
        • Creating Rounds
        • Resolution of a Round
        • Leaderboard
        • Game Statuses
        • FAQ: MatchX game
        • Loading MatchX & Quiz games on website
      • ❓Quiz Game
      • 🪂Prize Drop
    • 🗺️Lootbox 2.0
    • 🎁Missions Lootbox
    • 🏆Jackpots
    • 🎟️Raffles
    • 💡General concepts
      • ◾Bonuses
      • ◾Dynamic Rewards
      • ◾Custom Sections
      • ◾Attribution value
      • ◾Label tags
      • ◾Multi-currency usage report
      • ◾Multi-brands support
      • ◾Override translations on Label/Brand Level
      • ◾User markers (tags)
      • ◾Deep-links
      • ◾User roles in Back Office
      • ◾Email Gateways Guide
      • ◾"Client action" event
      • ◾Custom fields/attributes
    • 💻UI Widgets
    • ❔FAQs
      • FAQ: Gamification
      • FAQ: Data Studio & Reports
      • FAQ: CRM Automation
      • FAQ: Front-end integration
      • FAQ: Other topics
      • FAQ: Bonuses
  • Use cases
    • 🔆CRM Automation
      • ◾Cross-sell. Match users on different brands
      • ◾Mini-games usage in marketing campaigns
      • ◾Optimize Communication by excluding disengaged players
      • ◾Automated Sports Campaigns
  • Technical guides
    • ◾Integration process
    • ◾Front-end integration
      • ▪️Extended integration
      • ▪️Push configurations
      • ▪️Acquisition mode
    • ◾Data integration
    • ◾Bonus API integration
    • ◾Secured Messaging Gateways (Email/SMS/IM)
    • ◾Reverse integration
    • ◾Smartico Data Warеhouse
      • ◾Smartico DWH \ Affiliation views
      • ◾Smartico DWH \ CRM views
      • ◾Smartico DWH \ Gamification views
    • ◾Games catalog API
    • ◾Custom push gateways
    • Branded Links
  • More
    • 📝Release notes
      • 🌷May 2025
      • 🌷April 2025
      • 🌷March 2025
      • ❄️February 2025
      • ❄️January 2025
      • ⛄December 2024
      • 🍁November 2024
      • 🍁October 2024
      • 🍁September 2024
      • 🌞August 2024
      • 🌞July 2024
      • 🌞June 2024
      • 🌷May 2024
      • 🌷April 2024
      • 🌷March 2024
      • ❄️February 2024
      • ❄️January 2024
      • ⛄December 2023
      • 🍁November 2023
      • 🍁October 2023
      • 🍁September 2023
      • 🌞August 2023
      • 🌞July 2023
      • 🌞June 2023
      • 🌷May 2023
      • 🌷April 2023
      • 🌷March 2023
      • ❄️February 2023
      • ❄️January 2023
      • ⛄December 2022
      • 🍁November 2022
      • 🍁October 2022
      • 🍁September 2022
      • 🌞June 2022
      • ❄️January 2022
      • 🍁October 2021
      • 🌞July 2021
      • 🌷April 2021
      • ❄️February 2021
    • ⚙️Support Scope
    • 👍Request Demo
Powered by GitBook

More

  • expo.smartico.ai
  • ice.smartico.ai
  • play.smartico.ai

@ 2025 Smartico.ai

On this page
  • Lootbox 2.0
  • Prize positioning for Lootbox Map
  • Mission Lootbox - Generic
  • Updated pop-ups in mini-games

Was this helpful?

  1. Products
  2. Mini Games

Custom skins for Mini-games

Last updated 5 hours ago

Was this helpful?

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.

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.

For further assistance, please contact your Customer Success Manager!

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

/* 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 */
.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);
}

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

}

For the 'Treasure hunt,' you need to upload a set of images using the reference package from the archive.

Lootbox 2.0

To create a custom skin for the Lootbox 2.0, you can use 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.

For further assistance, please contact your Customer Success Manager

Please follow these guidelines when creating a Custom Lootbox Map skin:

  1. For all skins (7, 14, 25, 31 days):

    1. 'game-bg' and 'game-bg-mobile' images should be less than 900kb

  2. For all skins (7, 14, 25, 31 days):

    1. 'game-bg' and 'game-bg-mobile' images should be in JPEG format

  3. For 7 days skin:

    1. The 'game-bg' image should be exactly 1835x1284

    2. The 'game-bg-mobile' image should be exactly 527x1072

  4. For 14 days skin:

    1. The 'game-bg' image should be exactly 1835x2193

    2. The 'game-bg-mobile' image should be exactly 527x1622

  5. For 25 and 31 days skin:

    1. The 'game-bg' image should be exactly 1835x3895

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

Prize positioning for Lootbox Map

The default prize styles for the Lootbox map layout are shown below:

  1. Prize positioning for Lootbox Map - 7 days

/* Desktop positioning for prizes */

.desktop-week-prize-1 {
    top: 17%;
    left: 46%;
}

.desktop-week-prize-2 {
    top: 38%;
    left: 55%;
}

.desktop-week-prize-3 {
    top: 51%;
    right: 21%;
}

.desktop-week-prize-4 {
    top: 76%;
    right: 15%;
}

.desktop-week-prize-5 {
    top: 85%;
    right: 35%;
}

.desktop-week-prize-6 {
    top: 69%;
    left: 39%;
}

.desktop-week-prize-7 {
    top: 81%;
    left: 16%;
}

/* Mobile positioning for prizes */

.mobile-week-prize-1 {
    top: 43em;
    left: 47em;
}

.mobile-week-prize-2 {
    top: 72em;
    left: 85em;
}

.mobile-week-prize-3 {
    top: 84em;
    left: 30em;
}

.mobile-week-prize-4 {
    top: 121em;
    left: 18em;
}

.mobile-week-prize-5 {
    top: 143em;
    right: 30em;
}

.mobile-week-prize-6 {
    top: 189em;
    right: 36em;
}

.mobile-week-prize-7 {
    top: 173em;
    left: 29em;
}
  1. Prize positioning for Lootbox Map - 14 days

/* Desktop positioning for prizes */

.desktop-week-prize-1 {
    top: 17%;
    left: 46%;
}

.desktop-week-prize-2 {
    top: 28%;
    left: 58%;
}

.desktop-week-prize-3 {
    top: 34%;
    right: 20%;
}

.desktop-week-prize-4 {
    top: 50%;
    right: 16%;
}

.desktop-week-prize-5 {
    top: 56%;
    right: 37%;
}

.desktop-week-prize-6 {
    top: 45%;
    left: 42%;
}

.desktop-week-prize-7 {
    top: 45%;
    left: 21%;
}

.desktop-week-prize-8 {
    top: 63%;
    left: 17%;
}

.desktop-week-prize-9 {
    top: 70%;
    left: 34%;
}

.desktop-week-prize-10 {
    top: 74%;
    right: 42%;
}

.desktop-week-prize-11 {
    top: 77%;
    right: 17%;
}

.desktop-week-prize-12 {
    top: 91%;
    right: 16%;
}

.desktop-week-prize-13 {
    top: 92%;
    left: 37%;
}

.desktop-week-prize-14 {
    top: 91%;
    left: 14%;
}

/* Mobile positioning for prizes */

.mobile-week-prize-1 {
    top: 43em;
    left: 47em;
}

.mobile-week-prize-2 {
    top: 64em;
    right: 24em;
}

.mobile-week-prize-3 {
    top: 103em;
    right: 21em;
}

.mobile-week-prize-4 {
    top: 84em;
    left: 38em;
}

.mobile-week-prize-5 {
    top: 111em;
    left: 16em;
}

.mobile-week-prize-6 {
    top: 142em;
    left: 47em;
}

.mobile-week-prize-7 {
    top: 155em;
    right: 14em;
}

.mobile-week-prize-8 {
    top: 189em;
    right: 36em;
}

.mobile-week-prize-9 {
    top: 190em;
    left: 13em;
}

.mobile-week-prize-10 {
    top: 230em;
    left: 23em;
}

.mobile-week-prize-11 {
    top: 232em;
    right: 39em;
}

.mobile-week-prize-12 {
    top: 251em;
    right: 11em;
}

.mobile-week-prize-13 {
    top: 283em;
    right: 39em;
}

.mobile-week-prize-14 {
    top: 267em;
    left: 25em;
}
  1. Prize positioning for Lootbox Map - 25 days

/* Desktop positioning for prizes */

.desktop-prize-1 {
    top: 6%;
    right: 53%;
}

.desktop-prize-2 {
    top: 15%;
    left: 58%;
}

.desktop-prize-3 {
    top: 21%;
    right: 15%;
}

.desktop-prize-4 {
    top: 30%;
    right: 19%;
}

.desktop-prize-5 {
    top: 28%;
    right: 44%;
}

.desktop-prize-6 {
    top: 24%;
    left: 23%;
}

.desktop-prize-7 {
    top: 33%;
    left: 14%;
}

.desktop-prize-8 {
    top: 38%;
    left: 32%;
}

.desktop-prize-9 {
    top: 41%;
    right: 40%;
}

.desktop-prize-10 {
    top: 43%;
    right: 14%;
}

.desktop-prize-11 {
    top: 53%;
    right: 18%;
}

.desktop-prize-12 {
    top: 59%;
    right: 35%;
}

.desktop-prize-13 {
    top: 56%;
    right: 59%;
}

.desktop-prize-14 {
    top: 49%;
    left: 24%;
}

.desktop-prize-15 {
    top: 56%;
    left: 10%;
}

.desktop-prize-16 {
    top: 66%;
    left: 16%;
}

.desktop-prize-17 {
    top: 71%;
    left: 37%;
}

.desktop-prize-18 {
    top: 69%;
    right: 33%;
}

.desktop-prize-19 {
    bottom: 28%;
    right: 8%;
}

.desktop-prize-20 {
    bottom: 17%;
    right: 19%;
}

.desktop-prize-21 {
    bottom: 15%;
    right: 44%;
}

.desktop-prize-22 {
    bottom: 20%;
    left: 25%;
}

.desktop-prize-23 {
    bottom: 14%;
    left: 8%;
}

.desktop-prize-24 {
    bottom: 6%;
    left: 24%;
}

.desktop-prize-25 {
    bottom: 6%;
    right: 50%;
}

/* Mobile positioning for prizes */

.mobile-prize-1 {
    top: 47em;
    right: 54em;
}

.mobile-prize-2 {
    top: 84em;
    right: 19em;
}

.mobile-prize-3 {
    top: 115em;
    right: 17em;
}

.mobile-prize-4 {
    top: 105em;
    right: 48em;
}

.mobile-prize-5 {
    top: 110em;
    left: 18em;
}

.mobile-prize-6 {
    top: 148em;
    left: 27em;
}

.mobile-prize-7 {
    top: 160em;
    left: 60em;
}

.mobile-prize-8 {
    top: 180em;
    right: 12em;
}

.mobile-prize-9 {
    top: 206em;
    right: 30em;
}

.mobile-prize-10 {
    top: 191em;
    right: 65em;
}

.mobile-prize-11 {
    top: 218em;
    left: 12em;
}

.mobile-prize-12 {
    top: 250em;
    left: 45em;
}

.mobile-prize-13 {
    top: 260em;
    left: 85em;
}

.mobile-prize-14 {
    top: 300em;
    left: 77em;
}

.mobile-prize-15 {
    top: 289em;
    left: 30em;
}

.mobile-prize-16 {
    top: 318em;
    left: 12em;
}

.mobile-prize-17 {
    top: 337em;
    left: 53em;
}

.mobile-prize-18 {
    top: 362em;
    right: 14em;
}

.mobile-prize-19 {
    bottom: 229em;
    right: 40em;
}

.mobile-prize-20 {
    bottom: 206em;
    left: 36em;
}

.mobile-prize-21 {
    bottom: 170em;
    left: 74em;
}

.mobile-prize-22 {
    bottom: 148em;
    left: 17em;
}

.mobile-prize-23 {
    bottom: 108em;
    left: 40em;
}

.mobile-prize-24 {
    bottom: 75em;
    left: 75em;
}

.mobile-prize-25 {
    bottom: 53em;
    right: 80em;
}
  1. Prize positioning for Lootbox Map - 31 days

/* Desktop positioning for prizes */

.desktop-prize-1 {
    top: 4%;
    right: 53%;
}
.desktop-prize-2 {
    top: 14%;
    left: 54%;
}
.desktop-prize-3 {
    top: 18%;
    right: 20%;
}
.desktop-prize-4 {
    top: 26%;
    right: 16%;
}
.desktop-prize-5 {
    top: 31.5%;
    right: 29.5%;
}
.desktop-prize-6 {
    top: 28%;
    left: 54%;
}
.desktop-prize-7 {
    top: 23.5%;
    left: 30%;
}
.desktop-prize-8 {
    top: 27%;
    left:14%;
}
.desktop-prize-9 {
    top: 34%;
    left: 15%;
}
.desktop-prize-10 {
    top: 38%;
    left: 33%;
}
.desktop-prize-11 {
    top: 40.5%;
    left: 55%;
}
.desktop-prize-12 {
    top: 41.5%;
    right: 22.5%;
}
.desktop-prize-13 {
    top: 47.5%;
    right: 14%;
}
.desktop-prize-14 {
    top: 54.5%;
    right: 23%;
}
.desktop-prize-15 {
    top: 59%;
    left: 62%;
}
.desktop-prize-16 {
    top: 57%;
    left: 44%;
}
.desktop-prize-17 {
    top: 50%;
    left: 35%;
}
.desktop-prize-18 {
    top: 49%;
    left: 17%;
}
.desktop-prize-19 {
    bottom: 42%;
    left: 9%;
}
.desktop-prize-20 {
    bottom: 36%;
    left: 13%;
}
.desktop-prize-21 {
    bottom: 31%;
    left: 27%;
}
.desktop-prize-22 {
    bottom: 29.5%;
}
.desktop-prize-23 {
    bottom: 32%;
    left: 68%;
}
.desktop-prize-24 {
    bottom: 31%;
    left: 90%;
}
.desktop-prize-25 {
    bottom: 24%;
    left: 92%;
}
.desktop-prize-26 {
   bottom: 17.5%;
    left: 79%;
}
.desktop-prize-27 {
   bottom: 15.5%;
    left: 59%;
}
.desktop-prize-28 {
    bottom: 19.5%;
    left: 33%;
}
.desktop-prize-29 {
    bottom: 16%;
    left: 8%;
}
.desktop-prize-30 {
    bottom: 7%;
    left: 25%;
}
.desktop-prize-31 {
    bottom: 6%;
    left: 53%;
}

/* Mobile positioning for prizes */

.mobile-prize-1 {
    top: 57em;
    right: 52em;
}
.mobile-prize-2 {
    top: 86em;
    right: 17em;
}
.mobile-prize-3 {
    top: 120em;
    right: 23em;
}
.mobile-prize-4 {
    top: 100em;
    right: 55em;
}
.mobile-prize-5 {
    top: 126em;
    left: 16em;
}
.mobile-prize-6 {
    top: 154em;
    left: 41em;
}
.mobile-prize-7 {
    top: 158em;
    right: 23em;
}
.mobile-prize-8 {
    top: 188em;
    right: 12em;
}
.mobile-prize-9 {
    top: 203em;
    right: 44em;
}
.mobile-prize-10 {
    top: 197em;
    left: 16em;
}
.mobile-prize-11 {
    top: 229em;
    left: 12em;
}
.mobile-prize-12 {
    top: 252em;
    left: 38em;
}
.mobile-prize-13 {
    top: 250em;
    left: 84em;
}
.mobile-prize-14 {
    top: 286em;
    left: 84em;
}
.mobile-prize-15 {
    top: 292em;
    left: 46em;
}
.mobile-prize-16 {
    top: 300em;
    left: 12em;
}
.mobile-prize-17 {
    top: 330em;
    left: 30em;
}
.mobile-prize-18 {
    top: 338em;
    right: 30em;
}
.mobile-prize-19 {
    bottom: 250em;
    right: 13em;
}
.mobile-prize-20 {
    bottom: 233em;
    left: 60em;
}
.mobile-prize-21 {
    bottom: 215em;
    left: 33em;
}
.mobile-prize-22 {
    bottom: 190em;
    left: 60em;
}
.mobile-prize-23 {
    bottom: 160em;
    left: 73em;
}
.mobile-prize-24 {
    bottom: 157em;
    left:40em;
}
.mobile-prize-25 {
    bottom: 131em;
    left: 14em;
}
.mobile-prize-26 {
    bottom: 108em;
    left: 43em;
}
.mobile-prize-27 {
    bottom: 97em;
    left: 77em;
}
.mobile-prize-28 {
    bottom: 68em;
    left: 68em;
}
.mobile-prize-29 {
    bottom:73em;
    right: 70em;
}
.mobile-prize-30 {
    bottom: 41em;
    right: 75em;
}
.mobile-prize-31 {
    bottom: 25em;
    right: 40em;
}

Mission Lootbox - Generic

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:

/* 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;
}

/* 11. The color of the CTA button */
.generic-layout .cards-container .mission-card .mission-card-inner .card-center .cta-lootbox {
    background-color: #001F43 !important;
    color: white !important;
}

/* 12. The color of the Title text */
.generic-layout .generic-layout-title {color: white !important;
}

/*13. The color of the Reward text */
.generic-layout .cards-container .mission-card .mission-card-inner .card-center .card-reward {color: white !important;
}

/*14.  The color of the description text on the bottom */
.generic-layout .layout-description {color: white !important;
}

Read more about the Missions Lootbox in:

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:

Below are the required image files and naming conventions for implementing pop-ups in a mini-game:

These images are used to create the background and buttons of the pop-up. You can customize the font color of the text content by using the 'Override CSS' field, either at the skin level or directly within the mini-game settings in the BO.

Please note that any images exported from the template must be compressed before uploading them to the BO. You can use to compress your images.

Note: For the 'Giftbox' game your JSON file should be a valid Lottie animation. You can test it with or another Lottie files tester website. The animation should have the same frame count, as follows:

Please note that any images exported from the template must be compressed before uploading them to the BO. You can use to compress your images.

popup_bg_bottom

popup_bg_bottom_left

popup_bg_bottom_right

popup_bg_center

popup_bg_left

popup_bg_right

popup_bg_top

popup_bg_top_left

popup_bg_top_right

button_primery_bg_left

button_primery_bg_center

button_primery_bg_right

button_secondary_bg_left

button_secondary_bg_right

button_secondary_bg_center

🎲
◾
[this link]
https://app.lottiefiles.com/preview
[this link]
LogoMissions Lootbox | Smartico Help Center
2MB
Loyalty Wheel - Wood Oak.zip
archive
1MB
Loyalty Wheel - Candy.zip
archive
2MB
Loyalty Wheel - Cosmic.zip
archive
1000KB
Loyalty Wheel - Valentine's Day 2024.zip
archive
3MB
Loyalty Wheel - Euro 2024 (Soccer).zip
archive
2MB
Loyalty Wheel - Halloween 2024.zip
archive
4MB
Loyalty Wheel - Santa Spin (Christmas).zip
archive
3MB
Loyalty Wheel - Wheel of Love 2025.zip
archive
4MB
Loyalty Wheel - Easter 2025.zip
archive
9MB
Loyalty Wheel - Autumn.zip
archive
6MB
Loyalty Wheel - Christmas, red.zip
archive
9MB
Loyalty Wheel - Christmas, Green.zip
archive
830KB
Scratch Card - Win.zip
archive
2MB
Scratch Card - Treasure.zip
archive
406KB
Scratch Card - Valentines Day.zip
archive
1MB
Scratch Card - Euro 2025 (Soccer).zip
archive
647KB
Scratch Card - Halloween.zip
archive
959KB
Scratch Card - Snowy Scratch (Christmas).zip
archive
1MB
Scratch Card - Unveil Love 2025.zip
archive
1016KB
Giftbox - Bubbles.zip
archive
233KB
Giftbox - Valentines Day Box.zip
archive
2MB
Giftbox - Euro 2024 (Soccer).zip
archive
534KB
GiftBox - Chest.zip
archive
1MB
Giftbox - Halloween 2024.zip
archive
2MB
Giftbox - Jolly Box (Christmas).zip
archive
2MB
Giftbox - Love in a Box.zip
archive
2MB
Treasure Hunt.zip
archive
2MB
Treasure Hunt - Easter Hunt.zip
archive
1MB
Lootbox Cards - Halloween.zip
archive
1MB
Lootbox Cards - Japanese Cyberpunk.zip
archive
773KB
Lootbox Cards - Xmas.zip
archive
3MB
Lootbox Cards - Daily Love Drop 2025.zip
archive
978KB
Lootbox Map Xmas - 7 Days.zip
archive
1MB
Lootbox Map Xmas - 14 Days.zip
archive
2MB
Lootbox Map Xmas - 25 Days.zip
archive
2MB
Lootbox Map Xmas - 31 Days.zip
archive
648KB
Lootbox Map Sweet Choco - 7 Days.zip
archive
795KB
Lootbox Map Sweet Choco - 14 Days.zip
archive
1MB
Lootbox Map Sweet Choco - 25 Days.zip
archive
1MB
Lootbox Map Sweet Choco - 31 Days.zip
archive
1MB
Lootbox Map Trail of Love - 7 Days.zip
archive
2MB
Lootbox Map Trail of Love - 14 Days.zip
archive
1MB
Lootbox Map Trail of Love - 25 Days.zip
archive
1MB
Lootbox Map Trail of Love - 31 Days.zip
archive
1003KB
Lootbox Map Easter - 7 Days.zip
archive
1MB
Lootbox Map Easter - 14 Days.zip
archive
1MB
Lootbox Map Easter - 25 Days.zip
archive
1MB
Lootbox Map Easter - 31 Days.zip
archive
4MB
Generic Daily Lootbox.zip
archive
2MB
Scratch Card - Treasure.zip
archive
popup_bg_bottom.png
popup_bg_bottom_left.png
popup_bg_bottom_right.png
popup_bg_center.png
popup_bg_left.png
popup_bg_right.png
popup_bg_top.png
popup_bg_top_left.png
popup_bg_top_right.png
button_primary_bg_left.png
button_primary_bg_center.png
button_primary_bg_right.png
button_secondary_bg_left.png
button_secondary_bg_right.png
button_secondary_bg_center.png
popup_bg_bottom.png
popup_bg_bottom_left.png
popup_bg_bottom_right.png
popup_bg_center.png
popup_bg_left.png
popup_bg_right.png
popup_bg_top.png
popup_bg_top_left.png
popup_bg_top_right.png
button_primary_bg_left.png
button_primary_bg_center.png
button_primary_bg_right.png
button_secondary_bg_left.png
button_secondary_bg_right.png
button_secondary_bg_center.png