> For the complete documentation index, see [llms.txt](https://help.smartico.ai/welcome/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.smartico.ai/welcome/~/changes/B87CND5z8x8BAzJwmSVQ/technical-guides/front-end-integration.md).

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

<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://libs.smartico.ai/smartico.js', function() {
<strong>    _smartico.init('_label_key', { brand_key: '_brand_key_' });
</strong>});
&#x3C;/script>
</code></pre>

Your label key is: ***provided by the account manager***

Your brand key is: ***provided by your account manager***

{% hint style="info" %}
**Please note:** if you have a production and testing environment, then you should have separate keys for label and brand. Be sure that you never use production keys on 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 language of user in the global variables

```javascript
<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)

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: you can use additional protection from faking the user\_id, you can see more details [here](/welcome/~/changes/B87CND5z8x8BAzJwmSVQ/technical-guides/front-end-integration/extended-integration.md#protecting-user-identification-on-the-public-front-end)
{% endhint %}

#### **3. Preparation for Web-push notifications**

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

<https://libs.smartico.ai/manifest.json>

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

<https://libs.smartico.ai/smartico-messaging-sw.js>

e.g. if your site is [somesite.com](http://somesite.com/), then files should be located as

<https://somesite.com/manifest.json>

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

<https://somesite.com/smartico-messaging-sw.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:

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

Please note: it should be available only for identified users

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

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://help.smartico.ai/welcome/~/changes/B87CND5z8x8BAzJwmSVQ/technical-guides/front-end-integration.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.