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
  • Reporting data
  • Last login entry point
  • Custom actions
  • Triggering custom action through the URL (or any other deep link)
  • JS markers (public tags)
  • Client-side events
  • Gamification context
  • User profile details
  • Hiding gamification for the control group
  • Setting avatar
  • Setting nickname
  • Gamification: set skin using JavaScript API
  • Gamification widgets
  • Inbox widget
  • Other topics
  • Suspending online creatives
  • Smartico callbacks
  • IFrame bridge (B2B)
  • Opening gamification widget from operator's backoffice
  • Protecting user identification on the public front-end
  • Requesting push permissions
  • Debug/develop on the localhost
  • Setting UTM fields on the user profile
  • Check if the user belongs to a specific segment

Was this helpful?

  1. Technical guides
  2. Front-end integration

Extended integration

Last updated 15 days ago

Was this helpful?

Reporting data

Last login entry point

You can set a property "Last login entry point" and segment users by it or react when they are logging in from a specific entry point.

This is useful, in case the integrated website has different entry points, for example - there is a lobby, landing page, user profile, etc. Or there are different device types that can be used to log in, like mobile, desktop, app, TV, etc.

The entry point can be reported in the following way:

_smartico.setLoginEntry('LOBBY')

You can pass any string value as the entry point, but the number of different entry points per label is limited to 50.

Custom actions

You can report a specific action done by the end-user, for example when the user is clicking on the submit button on the cashier page, you can report the action 'CashierSubmitClicked'.

Example:

  
  _smartico.action('CashierSubmitClicked');
  

As soon as the action is defined, and triggered at least once, you can build a real-time journey to react to such action

In case you need to provide additional attributes together with action, please follow the 'Reporting client-side events' approach described below.

Triggering custom action through the URL (or any other deep link)

In some cases, you will want to start a campaign when the user is getting to a specific page.

One of the options is to pass a special parameter in the URL of any of your pages.

For example, you can build a URL like

When a user comes on this page you can catch him with the campaign waiting for the "Core: client action" and action DEPOSIT_OPENED

Note: the passed parameter in our example is "dp:action&action=TEST5" which is "URL Encoded". You can also pass any other deep links that will be triggered automatically after the user is logged in

JS markers (public tags)

There is a possibility to put markers on the user from the campaign flow or with automation rules and use these markers on the front end.

When the marker is set to the user, you are able to use it in the front end using the following code.

_smartico.on('props_change', function(props) {
    if (props.core_public_tags !== undefined) {
        // note that the passed object is an array 
        // with upper-cased markers of users
        console.log('List of user tags', props.core_public_tags.join(','));
    }
});

You can also update JS markers from the client side with JavaScript, e.g.

// add A & B tags
_smartico.updatePublicTags('add', ['A', 'B']);
// remove A tag
_smartico.updatePublicTags('remove', ['A']);
// replace all tags with new set of C & D
_smartico.updatePublicTags('replace', ['C', 'D']);
// clear all tags
_smartico.updatePublicTags('clear');

Client-side events

You can report events in the context of identified end users via Smartico JS SDK.

Public channels are considered as not trusted, those should be used only for non-sensitive events like - the user navigating to a specific screen, clicking on some elements, etc.

Example:

  
  _smartico.event('opened_deposit_page', { payment_method: 'PaySafe'});
  

The payload of the event is passed as JSON object with any structure and data types.

Before reporting any custom events, please contact the Smartico Customer Success Manager to align the data that will be reported and how it should be processed by the Smartico system.

Smartico team will need to register such events and define rules for processing and storing payload

Gamification context

User profile details

As soon as the user is logged in, you can get user profile details, such as avatar, current level, gemds, diamonds and points balance, and present this information on your site

_smartico.on('props_change', function(props) {
    if (props.avatar_id !== undefined) {
        console.log('Avatar URL', props.avatar_id);
    }
    if (props.ach_points_balance !== undefined) {
        console.log('Points balance', props.ach_points_balance);
    }
    if (props.ach_diamonds_balance !== undefined) {
        console.log('Diamonds balance', props.ach_diamonds_balance);
    }
    if (props.ach_gems_balance !== undefined) {
        console.log('Gems balance', props.ach_gems_balance);
    }        
    if (props.ach_points_ever !== undefined) {
        console.log('Points ever-balance', props.ach_points_ever);
    }    
    if (props.ach_level_current !== undefined) {
        console.log('Level name', props.ach_level_current);
    }
    if (props.core_inbox_unread_count !== undefined) {
        console.log('Unread messages', props.core_inbox_unread_count);
    }
    if (props.ach_gamification_in_control_group !== undefined) {
        // Flag indicating of gamification is enabled/disabled for user (true if disabled)
        console.log('Gamification status', props.ach_gamification_in_control_group);
    }    
    if (props.core_registration_date !== 0) {
        console.log('User profile is ready, core_profile_ready was triggered');
        console.log('This is indication that user profile is updated also from server-to-server integration');
    }
    
});

// You can also get the current set of properties at any moment using the following method
console.log('props of user', _smartico.getPublicProps());

Hiding gamification for the control group

You can expose gamification tools to a limited percentage of the users using the Gamification control group.

For example, you can set it to 10%; in this case, gamification will be enabled randomly for 10% of newly registered users.

You can use a user property "ach_gamification_in_control_group" to segment users to whom gamification is disabled and use it on the front end to hide an entry point to the Gamification widget.

Example of the JavaScript code to expose the gamification widget only for users not in the control group.

_smartico.on('props_change', function(props) {
    if (props.ach_gamification_in_control_group !== undefined) {
        console.log('Gamification status', props.ach_gamification_in_control_group);
        var btn = document.getElementById('missions_button');
        // note: keep button hidden by default, when user logged in, he will
        // get it 'on' or 'off' based on the control group flag
        if (props.ach_gamification_in_control_group) {
            btn.style.display = 'none';
        } else {
            btn.style.display = 'block';        
        }
    }    
    
});

Setting avatar

You can set the custom avatar as a PNG image with a 1x1 proportion for logged-in users.

 _smartico.setAvatar("https://somesite.com/avatar.png");

Setting nickname

You can set the custom nickname for the user, the way he will be visible in the leaderboards and tournaments

 _smartico.setNickname("Custom Nickanme");

Gamification: set skin using JavaScript API

There is a way to set the Gamification widget skin using JavaScript API

_smartico.setSkin('v3_base_dark');

There are two possible cases we have got from clients.

If you have Day and Night visual schemes for your website, you may want to use two different Gamification skins depending on the UI of the main site.

Another case is when you want to give some users special skins, for example, based on the achieved level.

_smartico.on('props_change', function(props) {
    if (props.ach_level_current === 5) {
        _smartico.setSkin('v3_base_vip');
    }
});

Gamification widgets

There are different ways to load the Gamification widget, MatchX game, Spin The Wheel, Scratch card, and other components.

Also, check these articles in the documentation for the details of the integration:

  • Loading MatchX & Quiz games on website

Inbox widget

The inbox widget (or notifications widget) is an interface where the user can see the history of all notifications sent from Smartico CRM.

To open the inbox widget, use the following javascript code

_smartico.dp('dp:inbox')

You can also get a count of unread messages in order to show it in your own interface. The count is available as a callback and will be updated whenever the user gets a new message or marks some messages are read.

_smartico.on('props_change', function(props) {
    if (props.core_inbox_unread_count !== undefined) {
        $('core_inbox_unread_count').innerHTML = props.core_inbox_unread_count
    }
});

// It is important to add a listener as soon as possible
// the best place is to do it as soon as smartico library is loaded
// otherwise, there are chances that you may miss some callbacks
<script>
(function(d, r, b, h, s){h=d.getElementsByTagName('head')[0];s = d.createElement('script');s.onload=b;s.src=r;h.appendChild(s);})
(document, 'https://libs.smartico.ai/smartico.js', function() {
    _smartico.on('props_change', function(props) { /*..here goes your handler */ });
    _smartico.init('_label_key_', { brand_key: '_brand_key_' });
});
</script>

The Inbox widget is an additional feature that needs to be enabled on your setup.

There are also limits regarding the total inbox messages that can be sent monthly on one setup.

Please get in touch with your Customer Success Manager for details.

You can design a "bell" or "envelope" icon with a count of unread notifications, as shown in the example below.

Other topics

Suspending online creatives

Popups, inbox messages and mini-games can be suspended in some cases. Usually, it's done on the screens where the user shouldn't be interrupted from the main process, e.g., on the Deposit page or while completing a KYC form.

// Disabling popups
 _smartico.suspendPopups(true);
// Enabling popups
 _smartico.suspendPopups(false);
 // Disabling inbox messages
 _smartico.suspendInbox(true);
// Enabling inbox messages
 _smartico.suspendInbox(false);
// Disabling mini-games that are triggered by server
 _smartico.suspendMiniGames(true);
// Enabling mini-games that are triggered by server
 _smartico.suspendMiniGames(false);

After disabling suspension, the first popup that was missed will be shown to the end-user if the client session remains active (the user didn't refresh the page or didn't navigate between pages).

Smartico callbacks

/*
Callback when the script is initialized.
*/
_smartico.on("init", (errCode) => { 
});
 

/*
Callback when the user is identified.
'props' parameter contains public information about the user, like level, number
etc
*/
_smartico.on("identify", (errCode, props) => {
});

 
/*
Callback when some of the user properties are changed.
'props' parameter contains public information about the user, like level, number
etc.
*/
_smartico.on("props_change", (props) => {
});
 
/*
Callback when the user is logged in.
*/
_smartico.on("login", () => {
});
 
 
/*
Callback when the user is logged out.
*/
_smartico.on("logout", () => {
});
 
/*
Callback when the gamification widget is about to be opened or about to be    
closed.
*/
_smartico.on("gf_starting", () => {
});
 
_smartico.on("gf_closing", () => {
});


/*
You can use 'off' method to unsubscribe from the notifications, 
for example
*/

const f = (v) => console.log(v);

// subscribe
_smartico.on("logout", f);
// unsubscribe
_smartico.off("logout", f);


IFrame bridge (B2B)

If the integrated platform is loaded in the iframe and not the owner of the main window, the setup should be done in a different way.

The site that owns the main window should load only the smartico.js script without doing initialization of the label/brand and identifying the user. HTML code to past as is:

<script>
(function(d, r, b, h, s){h=d.getElementsByTagName('head')[0];s = d.createElement('script');s.onload=b;s.src=r;h.appendChild(s);})
(document, 'https://libs.smartico.ai/smartico.js');
</script>

The iframe should load smartico_inframe.js script and makes the same calls as described above, but using _smartico_inframe object instead of _smartico.

Example of the script

<script>
   (function(d, r, b, h, s){h=d.getElementsByTagName('head')[0];s = d.createElement('script');s.onload=b;s.src=r;h.appendChild(s);})
   (document, 'https://libs.smartico.ai/smartico_inframe.js', function() {
       _smartico_inframe.init('__your_label_key', { brand_key: '__your_brand_key__' });
       _smartico_inframe.online('some_user_id', 'fr');
       // open gamification widget
       _smartico_inframe.dp('dp:gf');
   });
</script>  

Please contact your Customer Success Manager to evaluate if your setup needs this type of integration.

Opening gamification widget from operator's backoffice

The gamification widget can be opened in read-only mode from 3rd party sites.

The most common reason for this is to provide the Support team the possibility to see the current status of the gamification setup as the end-user sees it.

The widget can be opened using the URL:

http://libs.smartico.ai/wrapper-bo.html?label_key=${label_key}&brand_key=${brand_key}&user_ext_id=${user_ext_id}&user_hash=${user_hash}

Parameters to be passed:

  • label_key & brand_key - the same set of public keys for the label & brand as used in the front-end integration for the end user

  • user_ext_id - identification of the user in the integrated product

  • user_hash - md5 hash and the validity timestamp separated with the ":" symbol

The user_hash should be calculated in the following way

const hashValidityTimestampMs = ~~(+new Date() / 1000) * 1000 + 24 * 3600 * 1000;
user_hash = Md5.init((user_ext_id + ":" + "label_salt_key" + ":" + hashValidityTimestampMs).toLowerCase()) + ":" + hashValidityTimestampMs;

Label salt key can be retrieved from label configuration in Smartico BackOffice. Hash validity timestamp is defining the time in epoch with milliseconds till which the hash will be valid.

Example of calculation:

label_key = 3ff6261b-00a7-4137-9906-de7450fd61c9
brand_key = 13d7ff00
user_ext_id = 879978
label_salt_key = demo-salt
timestamp = 1638050700000 // Sat Nov 27 2021 22:05:00 GMT+0000
user_hash = 019b370929095f0cfe6c9b02ea7524a2:1638050700000

Example of JavaScript code opening a widget in the iframe and closing it when the widget is closed from inside:

const ifr = document.createElement('iframe');
document.body.appendChild(ifr);
ifr.style.cssText = 'position:absolute;width:90vw;height:90vh;top:5vh;left:5vw;border: 3px dotted black;z-index:99999';
ifr.src = `http://libs.smartico.ai/wrapper-bo.html?label_key=${label_key}&brand_key=${brand_key}&user_ext_id=${user_ext_id}&user_hash=${user_hash}`;
window.addEventListener("message", function (event) {
   if (event.data === 'close-gamification-frame' && ifr) {
       ifr.remove();
   }
});

Smartico BackOffice is using the same approach to show the gamification widget of any user in the CRM section

Protecting user identification on the public front-end

The simple user identification is based on the unique ID of the user set in the _smartico_user_id

<script>
    window._smartico_user_id = 'some_id';
    window._smartico_language = 'fr';
</script>

In case the user ID can easily be guessed (e.g. it's a sequential number or just a sting that corresponds to the username), there are additional mechanics to protect identification.

<script>
    window._smartico_user_id = 'some_id';
    window._smartico_language = 'fr';
    window._smartico_user_hash = '019b370929095f0cfe6c9b02ea7524a2:1638050700000';
</script>

The salt key should be requested from Smartico Customer Success Manager and should be kept in secret.

Requesting push permissions

You can directly call the Smartico script to trigger the browsers' native dialog for push permissions.

This can be done for the already identified user or an anonymous (visitor).

The push permissions token will be registered automatically on the Smartico side when the user is identified.

_smartico.dp("dp:ask_push_permissions")

It's also possible to build marketing (acquisition) campaigns., gamification, and communication for anonymous users (visitors), please get in touch with your Smartico Customer Success Manager to make the needed setup and provide training.

Debug/develop on the localhost

By default, the Smartico script is not allowed to be used on the localhost.

This is done to prevent the creation of "phantom" users when the script running on localhost is usually connected to the DEV/QA environment, and the user that reported from this environment will be sent to smartest, which will lead to the creation of the users that shouldn't be on production.

If you want to run on localhost and you are going to use a real/production user, you can enable debugging on the localhost

window._smartico_allow_localhost = true;

Setting UTM fields on the user profile

Smartico has two fields to hold UTM parameters - core_utm_source and core_utm_campaign.

These fields can be set via server REST API or can be also set from the front-end

_smartico.setUTMs('My UTM source', 'My UTM campaign')

Check if the user belongs to a specific segment

You can check if the user belongs to the segment.

You can use this functionality to change the front-end of your web-site based on the segmentation that is managed by smartico.

// check if user is matching to the segment 6598
_smartico.api.checkSegmentMatch(6598).then( r=> console.log(r))

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

Example of Inbox widget with notifications

You will need to calculate a hash string from the user ID, secret salt key, and validity timestamp. The calculation formula is the same as described . The hash should be calculated on the server(!) and passed in the front end in the following way.

You can also use checkSegmentListMatch to verify multiple segments in one request, you can find more details here -

◾
▪️
https://expo.smartico.ai/widgets/api_widgets
https://github.com/smarticoai/public-api/blob/main/docs/classes/WSAPI.md
here
https://mycasino.com/deposit.html#_smartico_dp=dp%3Aaction%26action%3DDEPOSIT_OPENEDmycasino.com
Real-time journey to start campaign when user does specific action
Exampel of the campaign
Example of notification icon showing count of unread messages
View on gamification state of specific user from the Smartico BackOffice
Standalone "Tournaments" widget
#embedding-gamification-widget-as-an-inline-element-on-the-site