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
  • Modal popup mode
  • Inline mode
  • Custom theme to Match X in iframe

Was this helpful?

  1. Products
  2. Mini Games
  3. MatchX Game

Loading MatchX & Quiz games on website

Last updated 7 months ago

Was this helpful?

You can see examples of embedding MatchX and other gamification components on this demo page -

Modal popup mode

You can show MatchX as overlay popup on top of your web site.

This can be done by calling deep-link from the javascript

// replace 1234 with ID of the matchx template that you can find in Smartico BackOffice
_smartico.dp('dp:gf_matchx&id=1234&standalone=true')
// note that for quiz game, the deep links is quite similar
_smartico.dp('dp:gf_quiz&id=1234&standalone=true')

Inline mode

MatchX game can be shown as part of the existing page on your main website

You need to create an empty IFRAME element and set it specific to your design height and width styles.

As soon as the player is authorized you can make a JavaScript call

_smartico.miniGame(362, { 
    iframe:'match-x-game',
    zoom: 1,
    height: 'auto'
});.
  • The first argument is the ID of the MatchX game template (you can have multiple).

  • The second argument is a set of parameters:

    • iframe - id of the IFRAME element, where the game will be shown.

    • zoom - optionally gives a possibility to zoom in/out the UI of the game

    • height - can be set to 'auto' or to fixed height in pixels, e.g. '500px'. It's recommended to set the value to 'auto' for desktop users and to the fixed height on mobile devices. This approach will provide the best UX.

Example of the HTML/JavaScript code

<iframe id='match-x-game' style='width: 100%; height: 0px; display: none'>
</iframe>
<script>
    _smartico.miniGame(362, { iframe:'match-x-game', zoom: 1, height: 'auto'} );
</script>

Please note that if the 'width' of the div is 576px or less, the rendered UI will be adjusted for mobile devices.

Please note that at the time of the call to smartico.miniGame, the Smartico script should be already loaded. Otherwise, you will get an exception that _smartico is undefined.

If you don't have good control from the JavaScript when _smartico script is loaded, you can use the code below to trigger the game without exception.

<script>
var miniGameInterval = setInterval(function() {
    if (window._smartico && document.getElementById('match-x-game')) {
        _smartico.miniGame(362, { iframe:'match-x-game', zoom: 1, height: 'auto'} );
        clearInterval(miniGameInterval);
    }
}, 10)
</script>

Custom theme to Match X in iframe

To apply a custom theme to Match X in an iframe, you should pass the theme as a parameter along with the theme name -> ‘theme-name’.

This parameter is optional if you want to use a custom Match X theme or one of our built-in themes (dark or light). Otherwise, Match X will use Smartico’s default colors.

Example:

_smartico.miniGame(362, { 
    iframe:'match-x-game',
    zoom: 1,
    height: 'auto',
    theme: 'theme-name'
});
🎲
⚽
https://expo.smartico.ai
Example as overlay popup
Example of inline mode