Popover Preview Widget

Purpose of this widget is to display progress of your battle pass and personal tasks.

In pictures bellow you will se scill-popover-preview as web component with multiple attributes .

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