▪️Extended integration

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.

_smartico.event('core_public_tags_update', { core_public_tags: ['A', 'B'] } );

If you want to add or remove tags, you will need to modify original set on the client side and send it back, e.g.

var tags = _smartico.getPublicProps().core_public_tags || [];
tags.push("new_tag");
_smartico.event('core_public_tags_update', { core_public_tags: tags } );

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.

Gamification context

User profile details

As soon as the user is logged in, you can get user profile details live avatar, current level, 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_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 disabled for user (true if disabled)
        console.log('Gamification disabled', props.ach_gamification_in_control_group);
    }    
    
});

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

Hidding gamification for the control group

You can expose gamification tools to a limited percentage of the user 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 also to 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 who are not in the control group.

_smartico.on('props_change', function(props) {
    if (props.ach_gamification_in_control_group !== undefined) {
        console.log('Gamification disabled', 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 are able to set the custom avatar as a png image with a 1x1 proportion for logged-in user.

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

Setting nickname

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

 _smartico.setNickname("Custom Nickanme");

Gamification widgets

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

You can see examples of embedding MatchX and other gamification components on this demo page: https://expo.smartico.ai/widgets/api_widgets

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

• Loading MatchX game as part of your website

• Standalone "Tournaments" widget

• Embedding gamification widget as an "inline" element on the site

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 every time when 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
    }
});

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

Other topics

Suspending online creatives

Popups and inbox messages 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);

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", () => {
});

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>  

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.

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

<script>
    window._smartico_user_hash = '019b370929095f0cfe6c9b02ea7524a2:1638050700000';
</script>

The salt key should be requested from Smartico Account Managers 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 account 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

const _smartico_allow_localhost = true;