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

AttributeDescription
usernameDisplay your nickname in button and widget header.
user-idRequired 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
languageSet language for widget. Possible values are en and de. Currently we are supporting English and Germang languages. Default is English.
btn-level-colorSet colors for level badge in the main button
offset - top / right / bottom / leftProvide number to set position for widget. Those numbers are absolute position of widget related to relative position of button.
btn-backgroundSet background color for main button
main-font-familySet font for widget. Default is Helvetica, Sans-serif
header-backgroundSet background color for header of widget
header-notch-absolute-rightSet horizontal position of notch in widget header. If you set it to ‘100’ it will be moved by 100px from right side.
header-text-colorSet text color in the widget header
header-bp-lvl-colorSet battle pass level color
header-progress-bar-backgroundSet background color for overall battle pass progress in widget header
header-progress-bar-fill-backgroundSet fill color for overall battle pass progress in widget header
unlock-battle-pass-btn-backgroundSet background color of unlock button for battle pass
unlock-battle-pass-btn-text-colorSet unlock battle pass button text color
battle-pass-title-colorSet battle pass title/name color
battle-pass-lvl-progress-bar-backgroundSet battle pass current level background progress color
battle-pass-lvl-progress-bar-fill-backgroundSet battle pass current level current progress color
battle-pass-finished-type-bg-colorWhen battle pass challenge/task type is ‘finished’ set background color of check circle in top right corner
battle-pass-type-border-colorBorder color of badge in top right corner
battle-pass-type-icon-colorIcon color of badge in top right corner
battle-pass-challenge-backgroundSet background color of battle pass challenge
battle-pass-challenge-progress-backgroundSet background color of battle pass challenge progress
battle-pass-challenge-progress-fill-backgroundSet color of battle pass challenge current progress
personal-challenges-category-title-colorSet title color of personal challenges category
personal-challenges-category-progress-bar-backgroundSet background color for challenges category progress bar
personal-challenges-category-progress-bar-fill-backgroundSet fill color for challenges category progress bar
personal-challenges-finished-type-bg-colorWhen challenge/task type is ‘finished’ set background color of check circle in top right corner
personal-challenges-type-border-colorBorder color of badge in top right corner
personal-challenges-type-icon-colorIcon color of badge in top right corner
personal-challenges-backgroundSet background color of challenge/task item
personal-challenges-progress-backgroundSet background color of personal challenge progress
personal-challenges-progress-fill-backgroundSet color of personal challenge current progress
button-backgroundSet background color for call to action button inside challenge item (unlock, activate, cancel, claim).
button-text-colorSet text color for call to action button
notification-backgroundSet notification background color
notification-text-colorSet notification text color