🎁Daily Lootbox

Daily Lootbox is a mini-game that offers daily rewards to players. The process is straightforward: players unveil a card each day to claim their daily reward, which could vary each day. Missing a day renders the card inactive, and players cannot reopen it. The cards are missions that are configured in a specific way. The rewards are configurable from the BO and can be points, bonuses, mini-game attempts, missions, etc. To build a Daily Lootbox, you need to:

1. Create a new Daily Lootbox Custom Section

2. Choose the Theme

3. Create the missions for this Custom Section

St. Valentine's Day Lootbox

Creating Custom Section

To set up a custom Lootbox section, follow these steps:

• Choose the 'Daily Lootbox' type when creating a custom section

• Select the desired theme - Light or Dark

• Define the 'Activity Period' to determine when the section will be active and visible to players in the Gamification Widget

• Add the Menu Name - the name of the section that will be displayed in the Gamification Widget's left Menu

• Once the custom section is created, proceed to create the missions to populate it

Example of Lootbox Custom Section in BO

Creating the Lootbox Missions

The Lootbox cards represent missions that should be created in the Missions section in Smartico BO. Here is a list with all the specifics that need to be taken into account when creating a mission for your Lootbox:

• The mission should be in type: Available unlocked

• The ‘Available from a specific date’ option should be enabled - this way you are creating a scheduled mission. You can set the exact period when this mission will be available

• Mission Duration should be set for 1 day (recommended)

• Icon should be added

• The reward should be added

• A custom Section should be added

• Show mission only in Custom Section: Yes (recommended)

• The task to complete should be: - task type: ‘Complete action once’, - action that completes the task: ‘Gamification: mission viewed’

After choosing the action that completes the task (Gamification: mission viewed), you should SAVE the mission first and then add the condition (Gamification: viewed mission name = [current mission name]) and SAVE the mission again!

- add Condition: 'Gamification: viewed mission name = [current mission name]'

• All other options that are not mandatory can be skipped

Example of Sceduled mission for the Lootbox

Example of Task to Complete for Lootbox mission

Daily Lootbox Specifics

Keep in mind that on the front end, the only components that will be displayed are:

• the title of the lootbox (which is a translation phrase)

• the description of the lootbox (which is a translation phrase)

• the icons of the missions

• the rewards for the missions

• countdown timer - shows when the next mission will be available

When creating and adding the available period of the mission you should keep in mind that they will be ordered by date in the Custom Section.

Generic Daily Lootbox

The Generic Daily Lootbox allows you to customize the Daily Lootbox according to your unique preferences. The mechanics of creating the lootbox are the same as the St. Valentine’s Day one, the only difference is that you need to choose the Generic theme from the drop-down when creating the Custom Section.

Generic Lootbox option in the BO

With the Generic Lootbox, you have the flexibility to upload 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.

Generic Lootbox in the Gamification Widget

If you don’t upload images for the 3 states of the boxes (closed, opened, locked), the default ones will be displayed, and if you don’t upload images for the Custom Section Background, the default color of the skin will be displayed. Below you can find a reference package with the images:

4MB

Generic Daily Lootbox.zip

archive

Here are the specifics of the images that can be uploaded from the BO:

• desktop-bg.png - 1836x1188

• mobile-bg.png - 640x1188

• closed-mission-icon.png - 512x512

• opened-mission-icon.png - 512x512

• locked-mission-icon.png - 512x512

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