Sidebar

Description

This widget displays several sections and gamification widgets in the same space. You can find the player's gamification data, their boosters, a compact version of the reward shop, and information about missions and bundles.

Configuration

class <string|required>: gamification_widget
data-type <string|required>: sidebar
data-height <string|required>: add height with pixels (600px for example) to set the height for the widget in open form

Reminder

The data-height property is required. Without this, the widget's height will vary on each internal page, depending on the content.

Important notes

The color of the sidebar widget (including the header section, menu buttons, and booster actions) is determined by the main theme color. In some cases, a transition to a darker shade of the main color is applied, such as changing from the main color to a darkened version of the same color.
The sidebar widget has two states: open and closed. They are toggled by clicking on the avatar
The "Desktop" version appears in window widths above 600px. The "Mobile" version appears in window widths below that. The sidebar will appear open by default in Desktop and closed by default in Mobile.
The sidebar currently has a max width of 330px

** We are currently working on a future version which will allow the configuration of the max-width and mobile/desktop breakpoints **

Example:

With all props (all of them are required). And with the container

Show me the code!

<div class="gamification_widget" data-type="sidebar" data-height="600px"></div>

UI:

Sidebar Open Desktop

Sidebar Closed Desktop

Sidebar Open Mobile

Sidebar Closed Mobile

Optional Sections

On the sidebar widget there are three optional sections that only appear if you have them enabled.

You must specify if you want these features enabled when you first decide to use our widgets.

Missions

If you don't have the missions feature enabled, the sidebar hides all related content, including the slider with active missions and the missions page.

Boosters

If you don't have the boosters feature enabled, the sidebar hides the actions to buy or activate additional boosters.

Tournaments

If you don't have the tournaments feature enabled, the sidebar hides all related content, including the slider with active tournaments and the tournaments menu tab.