Popover Preview Widget
Purpose of this widget is to display a user profile button and a popover with the progress of your battle pass and personal tasks once a user clicks on that button. You can replace your own profile button and provide the name of the user, an avatar image and even additional buttons with this one and you’ll have a fully functional, customizable gamification solution added in minutes.
Info
You can experience this web component yourself by clicking on that button on the top right of the developer documentation.
As this component is rather complex we decided to hide the DOM in a Shadow DOM to prevent styles of your website to
lead into this component. Tests showed, that this happened a lot and a lot of times had to be invested to fix CSS bugs.
To still allow it to be customized we added a lot of attributes that you can use to adjust the color and various other aspects of this web component.
The source code to all webcomponents can be found in our GitHub repository. Feel free to fork the repo and customize the look and feel as you like.
<scill-popover-preview class="scill-web-component"
username="franj0"
app-id="593776232582742019"
battle-pass-id="627086321190174723"
language="de"
offset-top="100" offset-right="" offset-bottom="" offset-left=""
btn-background="goldenrod"
btn-level-color="goldenrod"
main-font-family=""
header-background=""
header-notch-absolute-right=""
header-text-color=""
header-bp-lvl-color=""
header-progress-bar-background=""
header-progress-bar-fill-background="#009BED"
unlock-battle-pass-btn-background=""
unlock-battle-pass-btn-text-color=""
battle-pass-title-color="#CF0E00"
battle-pass-lvl-progress-bar-background="#00466A"
battle-pass-lvl-progress-bar-fill-background="#07DDEC"
battle-pass-finished-type-bg-color="#07DDEC"
battle-pass-type-border-color="#00466A"
battle-pass-type-icon-color="#00466A"
battle-pass-challenge-progress-background="#00466A"
battle-pass-challenge-progress-fill-background="#07DDEC"
battle-pass-challenge-background="#00466A"
personal-challenges-category-title-color="#5FB44B"
personal-challenges-category-progress-bar-background="#1D4913"
personal-challenges-category-progress-bar-fill-background="#5FB44B"
personal-challenges-finished-type-bg-color="#5FB44B"
personal-challenges-type-border-color="#1D4913"
personal-challenges-type-icon-color="#1D4913"
personal-challenges-progress-background="#1D4913"
personal-challenges-progress-fill-background="#5FB44B"
personal-challenges-background="#1D4913"
button-background="#555"
button-text-color="white"
notification-background=""
notification-text-color=""
>
<div class="scill-profile-buttons">
<div class="scill-profile-buttons-row">
<a href="" class="scill-profile-button">Profile</a>
<a href="" class="scill-profile-button">Watchlist</a>
</div>
<div class="scill-profile-buttons-row">
<a href="" class="scill-profile-button">Logout</a>
</div>
</div>
</scill-popover-preview>
HTML Injection
As you can see on picture above, there is an option to inject HTML which will take space between widget header and battle pass section. In this example, buttons Profile, Watchlist, Logout are injected HTML
Attributes
| Attribute | Description |
|---|---|
| username | Display your nickname in button and widget header. |
| user-id | Required attribute to fetch correct data from SCILL. If username not provided, than userID is displayed. |
| app-id (required) | Required attribute to fetch correct data from SCILL. app-id you can find in the admin under Apps |
| battle-pass-id (optional) | Optional attribute to display Battle Pass data. If battle_pass_id not provided there will not be any content related to the battle pass. If Battle Pass locked yhere will be button to unlock it |
| language | Set language for widget. Possible values are en and de. Currently we are supporting English and Germang languages. Default is English. |
| btn-level-color | Set colors for level badge in the main button |
| offset - top / right / bottom / left | Provide number to set position for widget. Those numbers are absolute position of widget related to relative position of button. |
| btn-background | Set background color for main button |
| main-font-family | Set font for widget. Default is Helvetica, Sans-serif |
| header-background | Set background color for header of widget |
| header-notch-absolute-right | Set horizontal position of notch in widget header. If you set it to ‘100’ it will be moved by 100px from right side. |
| header-text-color | Set text color in the widget header |
| header-bp-lvl-color | Set battle pass level color |
| header-progress-bar-background | Set background color for overall battle pass progress in widget header |
| header-progress-bar-fill-background | Set fill color for overall battle pass progress in widget header |
| unlock-battle-pass-btn-background | Set background color of unlock button for battle pass |
| unlock-battle-pass-btn-text-color | Set unlock battle pass button text color |
| battle-pass-title-color | Set battle pass title/name color |
| battle-pass-lvl-progress-bar-background | Set battle pass current level background progress color |
| battle-pass-lvl-progress-bar-fill-background | Set battle pass current level current progress color |
| battle-pass-finished-type-bg-color | When battle pass challenge/task type is ‘finished’ set background color of check circle in top right corner |
| battle-pass-type-border-color | Border color of badge in top right corner |
| battle-pass-type-icon-color | Icon color of badge in top right corner |
| battle-pass-challenge-background | Set background color of battle pass challenge |
| battle-pass-challenge-progress-background | Set background color of battle pass challenge progress |
| battle-pass-challenge-progress-fill-background | Set color of battle pass challenge current progress |
| personal-challenges-category-title-color | Set title color of personal challenges category |
| personal-challenges-category-progress-bar-background | Set background color for challenges category progress bar |
| personal-challenges-category-progress-bar-fill-background | Set fill color for challenges category progress bar |
| personal-challenges-finished-type-bg-color | When challenge/task type is ‘finished’ set background color of check circle in top right corner |
| personal-challenges-type-border-color | Border color of badge in top right corner |
| personal-challenges-type-icon-color | Icon color of badge in top right corner |
| personal-challenges-background | Set background color of challenge/task item |
| personal-challenges-progress-background | Set background color of personal challenge progress |
| personal-challenges-progress-fill-background | Set color of personal challenge current progress |
| button-background | Set background color for call to action button inside challenge item (unlock, activate, cancel, claim). |
| button-text-color | Set text color for call to action button |
| notification-background | Set notification background color |
| notification-text-color | Set notification text color |