Gamification

Integrate Smartico gamification features into your brand.

Prerequisites

• An active Smartico account with keys provided by the Cactus team
• Keys: labelKey, brandKey, saltKey, slsk (and optionally visitor keys)

Configuration

Option 1: Environment variables (recommended)

Set your Smartico keys as environment variables in .dev.vars (local) and Cloudflare Workers secrets (production):

# Client-side keys
SMARTICO_LABEL_KEY=your_label_key
SMARTICO_BRAND_KEY=your_brand_key

# Visitor keys (optional — enables features for logged-out users)
SMARTICO_VISITOR_LABEL_KEY=your_visitor_label_key
SMARTICO_VISITOR_BRAND_KEY=your_visitor_brand_key

# Server-side keys (never exposed to the browser)
SMARTICO_SALT_KEY=your_salt_key
SMARTICO_SLSK=your_slsk

Option 2: Config file

Edit app/config/gamification.config.ts directly:

smartico: {
  labelKey: 'your_label_key',
  brandKey: 'your_brand_key',
  // ...
}

And app/config/gamification.server.config.ts for server-side keys.

informação

Environment variables take priority over config file values. This allows you to use the same codebase for multiple brands by changing only the env vars.

Enabling / disabling modules

Each gamification feature can be toggled in app/config/gamification.config.ts:

modules: {
  missions:      { enabled: true, native: true },
  tournaments:   { enabled: true, native: true },
  store:         { enabled: true, native: true },
  miniGames:     { enabled: true, native: true },
  levels:        { enabled: true, native: true },
  notifications: { enabled: true, native: true },
  badges:        { enabled: true, native: true },
  bonuses:       { enabled: true, native: true },
  jackpots:      { enabled: true, native: true },
  raffles:       { enabled: true, native: true },
}

• enabled: true — module is active
• enabled: false — module is completely hidden (no buttons, no pages)
• native: true — uses custom React UI (recommended)
• native: false — uses Smartico's built-in overlay widget

Available routes

When modules are enabled with native: true, these pages are available:

Route	Description
/vip/missions	Missions listing with filters
/vip/tournaments	Tournaments listing with filters
/vip/tournaments/:id	Tournament detail (leaderboard, prizes)
/vip/store	Store with filters
/vip/mini-games	Mini-games listing
/vip/levels	Level progress timeline
/vip/badges	Badges listing
/vip/bonuses	Bonuses listing
/vip/jackpots	Jackpots listing
/vip/raffles	Raffles listing
/user/notifications	Notifications inbox

Visitor mode

Logged-out users can browse mission and tournament listings. When they try to open a detail page, they are prompted to log in.

Customization tips

• Naming: Change naming.programName and naming.coinsName in the config to match your brand
• Sidebar buttons: The VIP highlight buttons in the sidebar can be styled via your theme tokens
• Disable specific modules: Set enabled: false for modules you don't need
• Use Smartico UI for everything: Set native: false on all modules to use Smartico's built-in overlays instead of custom React pages