# 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)

<pre class="language-javascript"><code class="lang-javascript">&#x3C;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() {
<strong>    _smartico.init('_label_key_', { brand_key: '_brand_key_' });
</strong>});
&#x3C;/script>
</code></pre>

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

{% hint style="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.
{% endhint %}

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

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

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

{% hint style="info" %}
Note: We recommend using additional protection against faking the user\_id. You can see more details [here](https://help.smartico.ai/welcome/technical-guides/extended-integration#protecting-user-identification-on-the-public-front-end)
{% endhint %}

#### **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](http://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:

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

{% hint style="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.
{% endhint %}

#### **5. Validating setup**

When you complete steps 1, 2, and 3, you should see the following messages in the browser console.

```log
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

```log
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           |
| 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.