โ—พ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

circle-info

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

circle-info

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.jsarrow-up-right

e.g. if your site is somesite.comarrow-up-right, 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:

circle-info

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.

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

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

fr-CI

CI

French, Code d'Ivoire

Serving smartico scripts & connectivity from a custom domain

It is possible to server smartico libraries on behalf of your domain.

For example, if your main product is located on mysite.com, you will need to delegate the NS record of the s.mysite.com domain to Smartico name servers, and we will create a separate setup that will be handling both scripts, server communication, and media resources serving on behalf of your domain.

To complete the setup, please contact your Success Manager to get details for the Smartico name servers.

Bypassing Regional IP Restrictions

In certain regulated markets, Internet Service Providers (ISPs) may block standard Amazon Web Services (AWS) IP addresses. This can prevent users from loading Smartico scripts or establishing connections to the Smartico infrastructure.

The Solution Smartico offers an advanced integration using Cloudflare. This method routes traffic through your own domain and a dedicated IP address, effectively bypassing regional AWS blocks and ensuring stable connectivity for your players.

Next Steps: If you operate in markets with strict internet filtering or are experiencing IP-based blocking, please contact your Success Manager. They will provide the necessary configuration code and guide you through the setup.

Last updated

Was this helpful?