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 tournaments.

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
🆕 data-open <string|optional>: true in order to show sidebar open by default. If not provided, the default is false
🆕 data-disable-toggle <string|optional>: true in order to disable the sidebar toggling its own open/closed state. If not provided, the default is false
🆕 data-show-menu-names <string|optional>: true in order to always display the name of each menu tab. If not provided, the default is false
🆕 data-menu-default <string|optional>: this indicates which tab will appear open by default in the sidebar. If not provided, the default is home. Available options:
- home
- missions
- reward_shop
- tournaments

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 sidebar will appear closed by default but this can be modified using the data-open property in the configuration.
If you wish to disable the sidebar toggling its own closed/open state, you may use the data-disable-toggle property in the configuration.
The "Desktop" version appears in window widths above 600px. The "Mobile" version appears in window widths below that.
The sidebar will have the home tab selected as default but this can be modified using the data-menu-default property in the configuration.
Only the name of the selected tab will show by default. If you wish to display the names on all tabs you can use the data-show-menu-names property in the configuration.
The sidebar currently has a max width of 330px

Example: With required props

Show me the code!

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

Example: With show-names prop

Show me the code!

<div
  class="gamification_widget"
  data-type="sidebar"
  data-height="600px"
  data-show-menu-names="true"
></div>

With Menu names prop

Without Menu names prop

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.