Admin Panel

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.

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