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
🆕 data-minimalist-orientation <string|optional>: portrait | landscape in order display the minimalist sidebar and animations with portrait or landscape mode. The portrait mode uses up | down animations, and the landscape mode uses left | right animations. If not provided, the default value is portrait. Additionally, this setting only works with the minimalist customization.

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
The minimalist version should be enabled from the customization section in the Backoffice Platform, specifically in (Settings -> Widgets -> Widgets Configuration -> Sidebar Tab)

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

Important

Please note that the closed mobile version of the sidebar is always in dark mode

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.

Missions Section

Below are screenshots showing the content of the missions page.

List of Bundles
Bundle Details - In Order
Bundle Details - In Any Order
Missions History

Tournaments Section

Below are screenshots showing the content of the tournaments menu tab.

List of active tournaments
Tournament details

Scheduled tournament
Active tournament
Ended tournament

Tournament games modal

Tournaments history

Reward Shop Section

Below are screenshots showing the content of the reward shop page.

All products:

Category products:

Product details modal:

Shipping Information:

Customization

The following features can be customized for the Sidebar Widget. To modify these values head to the Backoffice (Settings -> Widgets):

Minimalist

To enable the minimalist version of the sidebar on mobile devices, simply enable the option in the Backoffice Settings.

Sidebar Minimalist UI Examples

Important notes

Please remember that with this customization you can use the property data-minimalist-orientation described in the configuration section.

Example: With portrait mode

Show me the code!

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

Example: With landscape mode

Show me the code!

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

In this customization set, you can enable or disable some modules added to the sidebar widget. Below, we'll look at examples of each.

Loyalty: If you disable the loyalty module, all the gamification components will be hidden in the sidebar.

Boosters: If you disable the boosters module, the boosters components and the button to activate them in the "My Rewards" component will be hidden in the Sidebar.