> 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/technical-guides/front-end-integration/extended-integration/player-profile-and-gamification-ui.md). # Player profile and gamification UI Use these calls of the Smartico script to read the player's public profile (level, points, unread messages), to change the avatar, nickname and skin, to open the Gamification and Inbox widgets, and to check segments from the front end. ## User profile details As soon as the user is logged in, you can get user profile details, such as avatar, current level, gems, diamonds and points balance, and present this information on your site ``` _smartico.on('props_change', function(props) { if (props.avatar_id !== undefined) { console.log('Avatar URL', props.avatar_id); } if (props.ach_points_balance !== undefined) { console.log('Points balance', props.ach_points_balance); } if (props.ach_diamonds_balance !== undefined) { console.log('Diamonds balance', props.ach_diamonds_balance); } if (props.ach_gems_balance !== undefined) { console.log('Gems balance', props.ach_gems_balance); } if (props.ach_points_ever !== undefined) { console.log('Points ever-balance', props.ach_points_ever); } if (props.ach_level_current !== undefined) { console.log('Level name', props.ach_level_current); } if (props.core_inbox_unread_count !== undefined) { console.log('Unread messages', props.core_inbox_unread_count); } if (props.ach_gamification_in_control_group !== undefined) { // Flag indicating of gamification is enabled/disabled for user (true if disabled) console.log('Gamification status', props.ach_gamification_in_control_group); } if (props.core_registration_date) { console.log('User profile is ready, core_profile_ready was triggered'); console.log('This is indication that user profile is updated also from server-to-server integration'); } }); // You can also get the current set of properties at any moment using the following method console.log('props of user', _smartico.getPublicProps()); ``` ## Hiding gamification for the control group You can hide gamification tools from a limited percentage of the users using the Gamification control group (the **Gamification control group, %** setting in **Label settings**; a brand can override it). For example, you can set it to 10%; in this case, gamification will be disabled randomly for 10% of newly registered users: they are put in the control group. Users who already exist are not changed. You can use a user property "ach\_gamification\_in\_control\_group" to segment users to whom gamification is disabled and use it on the front end to hide an entry point to the Gamification widget. For a user in the control group, deep links that open the Gamification widget (for example `dp:gf`) do nothing. The same happens when **Disable missions and gamification UI for this brand** is on. Example of the JavaScript code to expose the gamification widget only for users not in the control group. ```javascript _smartico.on('props_change', function(props) { if (props.ach_gamification_in_control_group !== undefined) { console.log('Gamification status', props.ach_gamification_in_control_group); var btn = document.getElementById('missions_button'); // note: keep button hidden by default, when user logged in, he will // get it 'on' or 'off' based on the control group flag if (props.ach_gamification_in_control_group) { btn.style.display = 'none'; } else { btn.style.display = 'block'; } } }); ``` ## Setting avatar You can set the custom avatar as a PNG image with a 1x1 proportion for logged-in users. ```javascript _smartico.setAvatar("https://somesite.com/avatar.png"); ``` ## Setting nickname You can set the custom nickname for the user, the way he will be visible in the leaderboards and tournaments ```javascript _smartico.setNickname("Custom Nickname"); ``` ## Gamification: set skin using JavaScript API There is a way to set the Gamification widget skin using JavaScript API ```javascript _smartico.setSkin('v3_base_dark'); ``` There are two possible cases we have got from clients. If you have Day and Night visual schemes for your website, you may want to use two different Gamification skins depending on the UI of the main site. Another case is when you want to give some users special skins, for example, based on the achieved level. ```javascript _smartico.on('props_change', function(props) { // ach_level_current is the level name; ach_level_current_id is the level ID if (props.ach_level_current_id === 5) { _smartico.setSkin('v3_base_vip'); } }); ``` The skin names in these examples are placeholders. Use the skin names that Smartico set up for you. ## Gamification widgets The most flexible way to show gamification on your site is to build your own widgets in [Vibe Studio](https://help.smartico.ai/welcome/products/vibe-studio/widgets). You describe the widget in the chat, and the AI builds it in your own design: a leaderboard in the lobby sidebar, a missions strip on the sports page, a store or a badge wall on the account screen. The widget shows the player's live data from Smartico. You put it on any page with one embed snippet, and you can change it at any time without a new release of your site. {% hint style="info" %} See examples of widgets, landing pages, promotions and custom games made in Vibe Studio on [https://smartico.dev](https://smartico.dev/). {% endhint %} How to create, publish and embed a widget: [Widgets](https://help.smartico.ai/welcome/products/vibe-studio/widgets). ### Other ways * **The standard Gamification widget.** Open it with `_smartico.dp('dp:gf')`, or embed it as an inline element on your page (see the links below). * **Your own UI on the Smartico API.** Your developers can build the whole interface themselves with the Smartico JavaScript API. is an example of a UI built this way, with MatchX, Spin the Wheel, Scratch card and other components. For the details of these integrations, see these articles: * [Loading MatchX & Quiz games on website](/welcome/products/mini-games/matchx-game/loading-matchx-game-as-part-of-your-website.md) * [November 2022](/welcome/products/release-notes/november-2022.md#standalone-tournaments-widget) * [November 2022](/welcome/products/release-notes/november-2022.md#embedding-gamification-widget-as-an-inline-element-on-the-site) * [Visitor mode](/welcome/technical-guides/front-end-integration/visitor-mode.md) * [Acquisition mode](/welcome/technical-guides/front-end-integration/acquisition-mode.md) ## Inbox widget The inbox widget (or notifications widget) is an interface where the user can see the history of all notifications sent from Smartico CRM.

Example of Inbox widget with notifications

To open the inbox widget, use the following javascript code ```javascript _smartico.dp('dp:inbox') ``` You can also navigate to other sections using deep links. For a complete list of available deep links, see [Deep-links](/welcome/products/tools-and-guides/deep-links.md). You can also get a count of unread messages in order to show it in your own interface. The count is available as a callback and will be updated whenever the user gets a new message or marks some messages are read. ```javascript _smartico.on('props_change', function(props) { if (props.core_inbox_unread_count !== undefined) { document.getElementById('core_inbox_unread_count').innerHTML = props.core_inbox_unread_count; } }); // It is important to add a listener as soon as possible (inside the script onload callback before init): // ``` {% hint style="info" %} The Inbox widget is an additional feature that needs to be enabled on your setup. There are also limits regarding the total inbox messages that can be sent monthly on one setup. Please get in touch with your Customer Success Manager for details. {% endhint %} You can design a "bell" or "envelope" icon with a count of unread notifications, as shown in the example below.

Example of notification icon showing count of unread messages

## Check if the user belongs to a specific segment You can check if the user belongs to the segment. You can use this functionality to change the front-end of your web-site based on the segmentation that is managed by smartico. ```javascript // check if user is matching to the segment 6598 _smartico.api.checkSegmentMatch(6598).then( r => console.log(r)) // check if user is matching/not matching to the list of segments _smartico.api.checkSegmentListMatch([1, 2, 3]).then((result) => { console.log(result); }); ``` You can also use checkSegmentListMatch to verify multiple segments in one request; you can find more details here: --- # 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 by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://help.smartico.ai/welcome/technical-guides/front-end-integration/extended-integration/player-profile-and-gamification-ui.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. 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.