▪️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

Real-time journey to start campaign when user does specific 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

https://mycasino.com/deposit.html#_smartico_dp=dp%3Aaction%26action%3DDEPOSIT_OPENEDmycasino.com

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

Exampel of the campaign

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, 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 enabled/disabled for user (true if disabled)
        console.log('Gamification status', props.ach_gamification_in_control_group);
    }    
    
});

// 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.

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 & Quiz games on 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.

Example of Inbox widget with notifications

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.

Example of notification icon showing count of unread messages

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


/*
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

View on gamification state of specific user from the Smartico BackOffice

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 calculation formula 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_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 also use checkSegmentListMatch to verify multiple segments in one request, you can find more details here - https://github.com/smarticoai/public-api/blob/main/docs/classes/WSAPI.md