◾Front-end integration

This setup should be implemented to enable pop-ups, gamification, web push notifications, and player online status tracking.

1. Installing the Smartico script

Smartico JavaScript library should be plugged into 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 the language of the user in the global variables

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

_smartico_user_id - should be the 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-symbol code). If you need to support languages with regional codes such as "pt-br", please see the table below for the custom 2-character codes.

If the site supports multiple languages, please keep in mind that whenever the language is changed, you should set the value of window._smartico_lanaguage accordingly too.

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: We recommend using additional protection against 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 the gamification widget

Once the gamification setup is ready and tested, you can configure the entry point to open the gamification widget as follows.

The primary use case on the Partner site is to provide an entry point to open the Gamification UI. Example:

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

Note: During initial setup, the gamification widget will be empty; you can only test that the widget opens. Once data integration is complete, training for the CRM team is done, and the CRM team sets up 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 see the following messages in the browser console.

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 the nature of the issue and the needed actions

Custom language codes

For historical reasons, Smartico uses 2-character language codes according to the ISO-639-1 standard.

To support regional variations, we use custom codes. Please ensure you use the same codes on the front end and in the server-to-server data integration.

Regional variation	Smartico custom code	Note
pt-BR	BR	Portuguese (Brazilian)
es-MX	MX	Spanish (Mexican)
en-CA	EC	English Canadian
fr-CA	FC	French Canadian
en-AU	AU	English Australian
ar-IQ	IQ	Arabic (Iraq)
de-CH	CH	Swiss German