◾Front-end integration

This setup should be done in order to enable popups, gamification, web-push, and tracking of the online status of players.

1. Installing the Smartico script

Smartico javascript library should be plugged on all front-end pages of your site(s)

<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://_location_of_the_smartico_script_/s.js', function() {
    _smartico.init('_label_key_', { brand_key: '_brand_key_' });
});
</script>

Your label key: to be provided by the Customer Success Manager

Your brand key: to be provided by your Customer Success Manager

Your location of the smartico script: to be provided by your Customer Success Manager

Please note: if you have a production and testing environment, you should have separate keys for label and brand. Ensure you never use production keys in a testing environment and vice versa.

2. Identifying the user

On every page, when you have a user identified, you should set user_id and language of user in the global variables

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

_smartico_user_id - should be user id as it's known in your system. It should be the same ID of the user as will be used in server-to-server integration

_smartico_language - is ISO 639-1 code of user language (2 symbols code). If you need to support languages with regional codes like "pt-br", please consult with Smartico team for the proper mappings to 2-symbols codes.

Whenever the user is logged out, set these variables to null or delete from the global scope, e.g.:

<script>
    window._smartico_user_id = null;
    window._smartico_language = null;
</script>

Note: you can use additional protection from faking the user_id, you can see more details here

3. Preparation for Web-push notifications

The following file should be put in the root of the web/mobile sites. They are needed for the Web Push notifications.

https://libs.smartico.ai/smartico-messaging-sw-v2.js

e.g. if your site is somesite.com, then the file should be located as

https://somesite.com/smartico-messaging-sw-v2.js

4. Triggering gamification widget

When the gamification setup is ready and tested, you can put the entry point to open the gamification widget in the following way.

The main case when it’s needed from the Partner site is to provide an entry point to open Gamification UI. Example:

<button onclick="_smartico.dp('dp:gf');">
    Open Missions
</button>

Note: in the initial setup, the gamification widget will be empty, and you can only test the fact of opening the widget. As soon as the data integration is done, trainings for CRM team are completed, and CRM team setup gamification elements, you will be able to see real content in the widget.

5. Validating setup

When you complete steps 1,2 and 3, you should be able to see the following messages in the console log of the browser

SMARTICO.AI SETUP CHECK: the label and brand are identified. OK
SMARTICO.AI SETUP CHECK: push settings are applied. OK
SMARTICO.AI SETUP CHECK: the user is identified. OK
SMARTICO.AI SETUP CHECK: push token not registered. Execute _smartico.requestPushPermissions() to proceed with check

After executing _smartico.requestPushPermissions() command in the console, you should see

SMARTICO.AI SETUP CHECK: push token registered. OK

If there are any issues identified during setup, you will get explanations about nature of issue and needed actions